feat: integrated ValidateCompositeQuery in API layer in rule update APIs

* fix: added fix for quick filter reset not working

* chore: added fix for quick filter reset issue

* chore: removed non-required code

* test: added tests for checkbox component

* test: added updated test for querysearch

* chore: updated querysearch test

.github/CODEOWNERS

@@ -2,7 +2,7 @@
 # Owners are automatically requested for review for PRs that changes code
 # that they own.
 
-/frontend/ @YounixM @aks07
+/frontend/ @SigNoz/frontend-maintainers
 
 # Onboarding
 /frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json @makeavish

.github/workflows/goci.yaml

@@ -73,3 +73,19 @@ jobs:
         shell: bash
         run: |
           make docker-build-enterprise
+  openapi:
+    if: |
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: self-checkout
+        uses: actions/checkout@v4
+      - name: go-install
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.24"
+      - name: generate-openapi
+        run: |
+          go run cmd/enterprise/*.go generate openapi
+          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in openapi spec. Run go run cmd/enterprise/*.go generate openapi locally and commit."; exit 1)

.github/workflows/integrationci.yaml

@@ -9,6 +9,29 @@ on:
       - labeled
 
 jobs:
+  fmtlint:
+    if: |
+      ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-integrate')
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: python
+        uses: actions/setup-python@v5
+        with:
+          python-version: 3.13
+      - name: poetry
+        run: |
+          python -m pip install poetry==2.1.2
+          python -m poetry config virtualenvs.in-project true
+          cd tests/integration && poetry install --no-root
+      - name: fmt
+        run: |
+          make py-fmt
+      - name: lint
+        run: |
+          make py-lint
   test:
     strategy:
       fail-fast: false
@@ -21,6 +44,7 @@ jobs:
           - dashboard
           - querier
           - ttl
+          - preference
         sqlstore-provider:
           - postgres
           - sqlite

cmd/community/main.go

@@ -13,6 +13,7 @@ func main() {
 
 	// register a list of commands to the root command
 	registerServer(cmd.RootCmd, logger)
+	cmd.RegisterGenerate(cmd.RootCmd, logger)
 
 	cmd.Execute(logger)
 }

cmd/enterprise/Dockerfile.integration

@@ -1,11 +1,3 @@
-FROM node:18-bullseye AS build
-
-WORKDIR /opt/
-COPY ./frontend/ ./
-ENV NODE_OPTIONS=--max-old-space-size=8192
-RUN CI=1 yarn install
-RUN CI=1 yarn build
-
 FROM golang:1.24-bullseye
 
 ARG OS="linux"
@@ -40,8 +32,6 @@ COPY Makefile Makefile
 RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
 RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
 
-COPY --from=build /opt/build ./web/
-
 RUN chmod 755 /root /root/signoz
 
 ENTRYPOINT ["/root/signoz", "server"]

cmd/enterprise/Dockerfile.with-web.integration

@@ -0,0 +1,47 @@
+FROM node:18-bullseye AS build
+
+WORKDIR /opt/
+COPY ./frontend/ ./
+ENV NODE_OPTIONS=--max-old-space-size=8192
+RUN CI=1 yarn install
+RUN CI=1 yarn build
+
+FROM golang:1.24-bullseye
+
+ARG OS="linux"
+ARG TARGETARCH
+ARG ZEUSURL
+
+# This path is important for stacktraces
+WORKDIR $GOPATH/src/github.com/signoz/signoz
+WORKDIR /root
+
+RUN set -eux; \
+	apt-get update; \
+	apt-get install -y --no-install-recommends \
+		g++ \
+		gcc \
+		libc6-dev \
+		make \
+		pkg-config \
+	; \
+	rm -rf /var/lib/apt/lists/*
+
+COPY go.mod go.sum ./
+
+RUN go mod download
+
+COPY ./cmd/ ./cmd/
+COPY ./ee/ ./ee/
+COPY ./pkg/ ./pkg/
+COPY ./templates/email /root/templates
+
+COPY Makefile Makefile
+RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
+RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
+
+COPY --from=build /opt/build ./web/
+
+RUN chmod 755 /root /root/signoz
+
+ENTRYPOINT ["/root/signoz", "server"]

cmd/enterprise/main.go

@@ -13,6 +13,7 @@ func main() {
 
 	// register a list of commands to the root command
 	registerServer(cmd.RootCmd, logger)
+	cmd.RegisterGenerate(cmd.RootCmd, logger)
 
 	cmd.Execute(logger)
 }

cmd/generate.go

@@ -0,0 +1,21 @@
+package cmd
+
+import (
+	"log/slog"
+
+	"github.com/spf13/cobra"
+)
+
+func RegisterGenerate(parentCmd *cobra.Command, logger *slog.Logger) {
+	var generateCmd = &cobra.Command{
+		Use:               "generate",
+		Short:             "Generate artifacts",
+		SilenceUsage:      true,
+		SilenceErrors:     true,
+		CompletionOptions: cobra.CompletionOptions{DisableDefaultCmd: true},
+	}
+
+	registerGenerateOpenAPI(generateCmd)
+
+	parentCmd.AddCommand(generateCmd)
+}

cmd/openapi.go

@@ -0,0 +1,41 @@
+package cmd
+
+import (
+	"context"
+	"log/slog"
+
+	"github.com/SigNoz/signoz/pkg/instrumentation"
+	"github.com/SigNoz/signoz/pkg/signoz"
+	"github.com/SigNoz/signoz/pkg/version"
+	"github.com/spf13/cobra"
+)
+
+func registerGenerateOpenAPI(parentCmd *cobra.Command) {
+	openapiCmd := &cobra.Command{
+		Use:   "openapi",
+		Short: "Generate OpenAPI schema for SigNoz",
+		RunE: func(currCmd *cobra.Command, args []string) error {
+			return runGenerateOpenAPI(currCmd.Context())
+		},
+	}
+
+	parentCmd.AddCommand(openapiCmd)
+}
+
+func runGenerateOpenAPI(ctx context.Context) error {
+	instrumentation, err := instrumentation.New(ctx, instrumentation.Config{Logs: instrumentation.LogsConfig{Level: slog.LevelInfo}}, version.Info, "signoz")
+	if err != nil {
+		return err
+	}
+
+	openapi, err := signoz.NewOpenAPI(ctx, instrumentation)
+	if err != nil {
+		return err
+	}
+
+	if err := openapi.CreateAndWrite("docs/api/openapi.yml"); err != nil {
+		return err
+	}
+
+	return nil
+}

conf/example.yaml

@@ -3,6 +3,13 @@
 # Do not modify this file
 #
 
+##################### Global #####################
+global:
+  # the url under which the signoz apiserver is externally reachable.
+  external_url: <unset>
+  # the url where the SigNoz backend receives telemetry data (traces, metrics, logs) from instrumented applications.
+  ingestion_url: <unset>
+
 ##################### Version #####################
 version:
   banner:

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.104.0
+    image: signoz/signoz:v0.105.1
     command:
       - --config=/root/config/prometheus.yml
     ports:

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.104.0
+    image: signoz/signoz:v0.105.1
     command:
       - --config=/root/config/prometheus.yml
     ports:

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.104.0}
+    image: signoz/signoz:${VERSION:-v0.105.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

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.104.0}
+    image: signoz/signoz:${VERSION:-v0.105.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

docs/contributing/go/handler.md

@@ -0,0 +1,179 @@
+# Handler
+
+Handlers in SigNoz are responsible for exposing module functionality over HTTP. They are thin adapters that:
+
+- Decode incoming HTTP requests
+- Call the appropriate module layer
+- Return structured responses (or errors) in a consistent format
+- Describe themselves for OpenAPI generation
+
+They are **not** the place for complex business logic; that belongs in modules (for example, `pkg/modules/user`, `pkg/modules/session`, etc).
+
+## How are handlers structured?
+
+At a high level, a typical flow looks like this:
+
+1. A `Handler` interface is defined in the module (for example, `user.Handler`, `session.Handler`, `organization.Handler`).
+2. The `apiserver` provider wires those handlers into HTTP routes using Gorilla `mux.Router`.
+
+Each route wraps a module handler method with the following:
+- Authorization middleware (from `pkg/http/middleware`)
+- A generic HTTP `handler.Handler` (from `pkg/http/handler`)
+- An `OpenAPIDef` that describes the operation for OpenAPI generation
+
+For example, in `pkg/apiserver/signozapiserver`:
+
+```go
+if err := router.Handle("/api/v1/invite", handler.New(
+    provider.authZ.AdminAccess(provider.userHandler.CreateInvite),
+    handler.OpenAPIDef{
+        ID:                  "CreateInvite",
+        Tags:                []string{"users"},
+        Summary:             "Create invite",
+        Description:         "This endpoint creates an invite for a user",
+        Request:             new(types.PostableInvite),
+        RequestContentType:  "application/json",
+        Response:            new(types.Invite),
+        ResponseContentType: "application/json",
+        SuccessStatusCode:   http.StatusCreated,
+        ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusConflict},
+        Deprecated:          false,
+        SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+    },
+)).Methods(http.MethodPost).GetError(); err != nil {
+    return err
+}
+```
+
+In this pattern:
+
+- `provider.userHandler.CreateInvite` is a handler method.
+- `provider.authZ.AdminAccess(...)` wraps that method with authorization checks and context setup.
+- `handler.New` converts it into an HTTP handler and wires it to OpenAPI via the `OpenAPIDef`.
+
+## How to write a new handler method?
+
+When adding a new endpoint:
+
+1. Add a method to the appropriate module `Handler` interface.
+2. Implement that method in the module.
+3. Register the method in `signozapiserver` with the correct route, HTTP method, auth, and `OpenAPIDef`.
+
+### 1. Extend an existing `Handler` interface or create a new one
+
+Find the module in `pkg/modules/<name>` and extend its `Handler` interface with a new method that receives an `http.ResponseWriter` and `*http.Request`. For example:
+
+```go
+type Handler interface {
+    // existing methods...
+    CreateThing(rw http.ResponseWriter, req *http.Request)
+}
+```
+
+Keep the method focused on HTTP concerns and delegate business logic to the module.
+
+### 2. Implement the handler method
+
+In the module implementation, implement the new method. A typical implementation:
+
+- Extracts authentication and organization context from `req.Context()`
+- Decodes the request body into a `types.*` struct using the `binding` package
+- Calls module functions
+- Uses the `render` package to write responses or errors
+
+```go
+func (h *handler) CreateThing(rw http.ResponseWriter, req *http.Request) {
+    // Extract authentication and organization context from req.Context()
+    claims, err := authtypes.ClaimsFromContext(req.Context())
+    if err != nil {
+        render.Error(rw, err)
+        return
+    }
+
+    // Decode the request body into a `types.*` struct using the `binding` package
+    var in types.PostableThing
+    if err := binding.JSON.BindBody(req.Body, &in); err != nil {
+        render.Error(rw, err)
+        return
+    }
+    
+    // Call module functions
+    out, err := h.module.CreateThing(req.Context(), claims.OrgID, &in)
+    if err != nil {
+        render.Error(rw, err)
+        return
+    }
+
+    // Use the `render` package to write responses or errors
+    render.Success(rw, http.StatusCreated, out)
+}
+```
+
+### 3. Register the handler in `signozapiserver`
+
+In `pkg/apiserver/signozapiserver`, add a route in the appropriate `add*Routes` function (`addUserRoutes`, `addSessionRoutes`, `addOrgRoutes`, etc.). The pattern is:
+
+```go
+if err := router.Handle("/api/v1/things", handler.New(
+    provider.authZ.AdminAccess(provider.thingHandler.CreateThing),
+    handler.OpenAPIDef{
+        ID:                  "CreateThing",
+        Tags:                []string{"things"},
+        Summary:             "Create thing",
+        Description:         "This endpoint creates a thing",
+        Request:             new(types.PostableThing),
+        RequestContentType:  "application/json",
+        Response:            new(types.GettableThing),
+        ResponseContentType: "application/json",
+        SuccessStatusCode:   http.StatusCreated,
+        ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusConflict},
+        Deprecated:          false,
+        SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+    },
+)).Methods(http.MethodPost).GetError(); err != nil {
+    return err
+}
+```
+
+### 4. Update the OpenAPI spec
+
+Run the following command to update the OpenAPI spec:
+
+```bash
+go run cmd/enterprise/*.go generate openapi
+```
+
+This will update the OpenAPI spec in `docs/api/openapi.yml` to reflect the new endpoint.
+
+## How does OpenAPI integration work?
+
+The `handler.New` function ties the HTTP handler to OpenAPI metadata via `OpenAPIDef`. This drives the generated OpenAPI document.
+
+- **ID**: A unique identifier for the operation (used as the `operationId`).
+- **Tags**: Logical grouping for the operation (for example, `"users"`, `"sessions"`, `"orgs"`).
+- **Summary / Description**: Human-friendly documentation.
+- **Request / RequestContentType**:
+  - `Request` is a Go type that describes the request body or form.
+  - `RequestContentType` is usually `"application/json"` or `"application/x-www-form-urlencoded"` (for callbacks like SAML).
+- **Response / ResponseContentType**:
+  - `Response` is the Go type for the successful response payload.
+  - `ResponseContentType` is usually `"application/json"`; use `""` for responses without a body.
+- **SuccessStatusCode**: The HTTP status for successful responses (for example, `http.StatusOK`, `http.StatusCreated`, `http.StatusNoContent`).
+- **ErrorStatusCodes**: Additional error status codes beyond the standard ones automatically added by `handler.New`.
+- **SecuritySchemes**: Auth mechanisms and scopes required by the operation.
+
+The generic handler:
+
+- Automatically appends `401`, `403`, and `500` to `ErrorStatusCodes` when appropriate.
+- Registers request and response schemas with the OpenAPI reflector so they appear in `docs/api/openapi.yml`.
+
+See existing examples in:
+
+- `addUserRoutes` (for typical JSON request/response)
+- `addSessionRoutes` (for form-encoded and redirect flows)
+
+## What should I remember?
+
+- **Keep handlers thin**: focus on HTTP concerns and delegate logic to modules/services.
+- **Always register routes through `signozapiserver`** using `handler.New` and a complete `OpenAPIDef`.
+- **Choose accurate request/response types** from the `types` packages so OpenAPI schemas are correct.

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

@@ -94,10 +94,6 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// routes available only in ee version
 	router.HandleFunc("/api/v1/features", am.ViewAccess(ah.getFeatureFlags)).Methods(http.MethodGet)
 
-	// paid plans specific routes
-	router.HandleFunc("/api/v1/complete/saml", am.OpenAccess(ah.Signoz.Handlers.Session.CreateSessionBySAMLCallback)).Methods(http.MethodPost)
-	router.HandleFunc("/api/v1/complete/oidc", am.OpenAccess(ah.Signoz.Handlers.Session.CreateSessionByOIDCCallback)).Methods(http.MethodGet)
-
 	// base overrides
 	router.HandleFunc("/api/v1/version", am.OpenAccess(ah.getVersion)).Methods(http.MethodGet)
 

ee/query-service/app/server.go

@@ -3,13 +3,14 @@ package app
 import (
 	"context"
 	"fmt"
-	"log/slog"
 	"net"
 	"net/http"
 	_ "net/http/pprof" // http profiler
 	"slices"
 
 	"github.com/SigNoz/signoz/pkg/cache/memorycache"
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/ruler/rulestore/sqlrulestore"
 	"go.opentelemetry.io/contrib/instrumentation/github.com/gorilla/mux/otelmux"
 	"go.opentelemetry.io/otel/propagation"
@@ -106,7 +107,8 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		signoz.Prometheus,
 		signoz.Modules.OrgGetter,
 		signoz.Querier,
-		signoz.Instrumentation.Logger(),
+		signoz.Instrumentation.ToProviderSettings(),
+		signoz.QueryParser,
 	)
 
 	if err != nil {
@@ -243,6 +245,11 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.MetricExplorerRoutes(r, am)
 	apiHandler.RegisterTraceFunnelsRoutes(r, am)
 
+	err := s.signoz.APIServer.AddToRouter(r)
+	if err != nil {
+		return nil, err
+	}
+
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},
 		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
@@ -253,7 +260,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 
 	handler = handlers.CompressHandler(handler)
 
-	err := web.AddToRouter(r)
+	err = web.AddToRouter(r)
 	if err != nil {
 		return nil, err
 	}
@@ -348,8 +355,8 @@ func (s *Server) Stop(ctx context.Context) error {
 	return nil
 }
 
-func makeRulesManager(ch baseint.Reader, cache cache.Cache, alertmanager alertmanager.Alertmanager, sqlstore sqlstore.SQLStore, telemetryStore telemetrystore.TelemetryStore, prometheus prometheus.Prometheus, orgGetter organization.Getter, querier querier.Querier, logger *slog.Logger) (*baserules.Manager, error) {
-	ruleStore := sqlrulestore.NewRuleStore(sqlstore)
+func makeRulesManager(ch baseint.Reader, cache cache.Cache, alertmanager alertmanager.Alertmanager, sqlstore sqlstore.SQLStore, telemetryStore telemetrystore.TelemetryStore, prometheus prometheus.Prometheus, orgGetter organization.Getter, querier querier.Querier, providerSettings factory.ProviderSettings, queryParser queryparser.QueryParser) (*baserules.Manager, error) {
+	ruleStore := sqlrulestore.NewRuleStore(sqlstore, queryParser, providerSettings)
 	maintenanceStore := sqlrulestore.NewMaintenanceStore(sqlstore)
 	// create manager opts
 	managerOpts := &baserules.ManagerOptions{
@@ -359,7 +366,7 @@ func makeRulesManager(ch baseint.Reader, cache cache.Cache, alertmanager alertma
 		Logger:              zap.L(),
 		Reader:              ch,
 		Querier:             querier,
-		SLogger:             logger,
+		SLogger:             providerSettings.Logger,
 		Cache:               cache,
 		EvalDelay:           baseconst.GetEvalDelay(),
 		PrepareTaskFunc:     rules.PrepareTaskFunc,
@@ -369,6 +376,7 @@ func makeRulesManager(ch baseint.Reader, cache cache.Cache, alertmanager alertma
 		RuleStore:           ruleStore,
 		MaintenanceStore:    maintenanceStore,
 		SqlStore:            sqlstore,
+		QueryParser:         queryParser,
 	}
 
 	// create Manager

ee/query-service/rules/anomaly.go

@@ -207,6 +207,42 @@ func (r *AnomalyRule) GetSelectedQuery() string {
 	return r.Condition().GetSelectedQueryName()
 }
 
+// filterNewSeries filters out new series based on the first_seen timestamp.
+func (r *AnomalyRule) filterNewSeries(ctx context.Context, ts time.Time, series []*v3.Series) ([]*v3.Series, error) {
+	// Convert []*v3.Series to []v3.Series for filtering
+	v3Series := make([]v3.Series, 0, len(series))
+	for _, s := range series {
+		v3Series = append(v3Series, *s)
+	}
+
+	// Get indexes to skip
+	skipIndexes, filterErr := r.BaseRule.FilterNewSeries(ctx, ts, v3Series)
+	if filterErr != nil {
+		r.logger.ErrorContext(ctx, "Error filtering new series, ", "error", filterErr, "rule_name", r.Name())
+		return nil, filterErr
+	}
+
+	// if no series are skipped, return the original series
+	if len(skipIndexes) == 0 {
+		return series, nil
+	}
+
+	// Create a map of skip indexes for efficient lookup
+	skippedIdxMap := make(map[int]struct{}, len(skipIndexes))
+	for _, idx := range skipIndexes {
+		skippedIdxMap[idx] = struct{}{}
+	}
+
+	// Filter out skipped series
+	oldSeries := make([]*v3.Series, 0, len(series)-len(skipIndexes))
+	for i, s := range series {
+		if _, shouldSkip := skippedIdxMap[i]; !shouldSkip {
+			oldSeries = append(oldSeries, s)
+		}
+	}
+	return oldSeries, nil
+}
+
 func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, ts time.Time) (ruletypes.Vector, error) {
 
 	params, err := r.prepareQueryRange(ctx, ts)
@@ -239,7 +275,18 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 	scoresJSON, _ := json.Marshal(queryResult.AnomalyScores)
 	r.logger.InfoContext(ctx, "anomaly scores", "scores", string(scoresJSON))
 
-	for _, series := range queryResult.AnomalyScores {
+	// Filter out new series if newGroupEvalDelay is configured
+	seriesToProcess := queryResult.AnomalyScores
+	if r.ShouldSkipNewGroups() {
+		filteredSeries, filterErr := r.filterNewSeries(ctx, ts, seriesToProcess)
+		if filterErr != nil {
+			r.logger.ErrorContext(ctx, "Error filtering new series, ", "error", filterErr, "rule_name", r.Name())
+			return nil, filterErr
+		}
+		seriesToProcess = filteredSeries
+	}
+
+	for _, series := range seriesToProcess {
 		if r.Condition() != nil && r.Condition().RequireMinPoints {
 			if len(series.Points) < r.Condition().RequiredNumPoints {
 				r.logger.InfoContext(ctx, "not enough data points to evaluate series, skipping", "ruleid", r.ID(), "numPoints", len(series.Points), "requiredPoints", r.Condition().RequiredNumPoints)
@@ -291,7 +338,18 @@ func (r *AnomalyRule) buildAndRunQueryV5(ctx context.Context, orgID valuer.UUID,
 	scoresJSON, _ := json.Marshal(queryResult.AnomalyScores)
 	r.logger.InfoContext(ctx, "anomaly scores", "scores", string(scoresJSON))
 
-	for _, series := range queryResult.AnomalyScores {
+	// Filter out new series if newGroupEvalDelay is configured
+	seriesToProcess := queryResult.AnomalyScores
+	if r.ShouldSkipNewGroups() {
+		filteredSeries, filterErr := r.filterNewSeries(ctx, ts, seriesToProcess)
+		if filterErr != nil {
+			r.logger.ErrorContext(ctx, "Error filtering new series, ", "error", filterErr, "rule_name", r.Name())
+			return nil, filterErr
+		}
+		seriesToProcess = filteredSeries
+	}
+
+	for _, series := range seriesToProcess {
 		if r.Condition().RequireMinPoints {
 			if len(series.Points) < r.Condition().RequiredNumPoints {
 				r.logger.InfoContext(ctx, "not enough data points to evaluate series, skipping", "ruleid", r.ID(), "numPoints", len(series.Points), "requiredPoints", r.Condition().RequiredNumPoints)

ee/query-service/rules/manager.go

@@ -37,6 +37,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 			opts.SLogger,
 			baserules.WithEvalDelay(opts.ManagerOpts.EvalDelay),
 			baserules.WithSQLStore(opts.SQLStore),
+			baserules.WithQueryParser(opts.ManagerOpts.QueryParser),
 		)
 
 		if err != nil {
@@ -59,6 +60,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 			opts.Reader,
 			opts.ManagerOpts.Prometheus,
 			baserules.WithSQLStore(opts.SQLStore),
+			baserules.WithQueryParser(opts.ManagerOpts.QueryParser),
 		)
 
 		if err != nil {
@@ -82,6 +84,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 			opts.Cache,
 			baserules.WithEvalDelay(opts.ManagerOpts.EvalDelay),
 			baserules.WithSQLStore(opts.SQLStore),
+			baserules.WithQueryParser(opts.ManagerOpts.QueryParser),
 		)
 		if err != nil {
 			return task, err
@@ -140,6 +143,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			baserules.WithSendAlways(),
 			baserules.WithSendUnmatched(),
 			baserules.WithSQLStore(opts.SQLStore),
+			baserules.WithQueryParser(opts.ManagerOpts.QueryParser),
 		)
 
 		if err != nil {
@@ -160,6 +164,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			baserules.WithSendAlways(),
 			baserules.WithSendUnmatched(),
 			baserules.WithSQLStore(opts.SQLStore),
+			baserules.WithQueryParser(opts.ManagerOpts.QueryParser),
 		)
 
 		if err != nil {
@@ -179,6 +184,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			baserules.WithSendAlways(),
 			baserules.WithSendUnmatched(),
 			baserules.WithSQLStore(opts.SQLStore),
+			baserules.WithQueryParser(opts.ManagerOpts.QueryParser),
 		)
 		if err != nil {
 			zap.L().Error("failed to prepare a new anomaly rule for test", zap.String("name", alertname), zap.Error(err))

frontend/package.json

@@ -48,6 +48,7 @@
 		"@signozhq/calendar": "0.0.0",
 		"@signozhq/callout": "0.0.2",
 		"@signozhq/checkbox": "0.0.2",
+		"@signozhq/command": "0.0.0",
 		"@signozhq/design-tokens": "1.1.4",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
@@ -104,7 +105,6 @@
 		"i18next-http-backend": "^1.3.2",
 		"jest": "^27.5.1",
 		"js-base64": "^3.7.2",
-		"kbar": "0.1.0-beta.48",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",

frontend/src/AppRoutes/index.tsx

@@ -4,7 +4,7 @@ import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import AppLoading from 'components/AppLoading/AppLoading';
-import KBarCommandPalette from 'components/KBarCommandPalette/KBarCommandPalette';
+import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import { FeatureKeys } from 'constants/features';
@@ -24,9 +24,9 @@ import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFall
 import posthog from 'posthog-js';
 import { useAppContext } from 'providers/App/App';
 import { IUser } from 'providers/App/types';
+import { CmdKProvider } from 'providers/cmdKProvider';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
-import { KBarCommandPaletteProvider } from 'providers/KBarCommandPaletteProvider';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useCallback, useEffect, useState } from 'react';
@@ -364,10 +364,10 @@ function App(): JSX.Element {
 			<ConfigProvider theme={themeConfig}>
 				<Router history={history}>
 					<CompatRouter>
-						<KBarCommandPaletteProvider>
-							<KBarCommandPalette />
+						<CmdKProvider>
 							<NotificationProvider>
 								<ErrorModalProvider>
+									{isLoggedInState && <CmdKPalette userRole={user.role} />}
 									<PrivateRoute>
 										<ResourceProvider>
 											<QueryBuilderProvider>
@@ -398,7 +398,7 @@ function App(): JSX.Element {
 									</PrivateRoute>
 								</ErrorModalProvider>
 							</NotificationProvider>
-						</KBarCommandPaletteProvider>
+						</CmdKProvider>
 					</CompatRouter>
 				</Router>
 			</ConfigProvider>

frontend/src/auto-import-registry.d.ts

@@ -14,6 +14,8 @@ import '@signozhq/badge';
 import '@signozhq/button';
 import '@signozhq/calendar';
 import '@signozhq/callout';
+import '@signozhq/checkbox';
+import '@signozhq/command';
 import '@signozhq/design-tokens';
 import '@signozhq/input';
 import '@signozhq/popover';

frontend/src/components/FieldVariantBadges/FieldVariantBadges.styles.scss

@@ -1,80 +0,0 @@
-.field-variant-badges-container {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	flex-shrink: 0;
-}
-
-.field-badge {
-	&.data-type {
-		display: flex;
-		height: 20px;
-		padding: 4px 8px;
-		justify-content: center;
-		align-items: center;
-		gap: 4px;
-		border-radius: 20px;
-		background: color-mix(in srgb, var(--bg-vanilla-100) 8%, transparent);
-		white-space: nowrap;
-		font-family: Inter;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 18px;
-		letter-spacing: -0.06px;
-	}
-
-	&.type-tag {
-		display: flex;
-		align-items: center;
-		height: 20px;
-		padding: 0px 6px;
-		justify-content: center;
-		gap: 4px;
-		border-radius: 50px;
-		text-transform: capitalize;
-		white-space: nowrap;
-
-		.dot {
-			width: 6px;
-			height: 6px;
-			border-radius: 50%;
-			flex-shrink: 0;
-		}
-
-		.text {
-			font-family: Inter;
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px;
-			letter-spacing: -0.06px;
-		}
-
-		&.attribute {
-			background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
-			color: var(--bg-sienna-400);
-
-			.dot {
-				background-color: var(--bg-sienna-400);
-			}
-
-			.text {
-				color: var(--bg-sienna-400);
-			}
-		}
-
-		&.resource {
-			background: color-mix(in srgb, var(--bg-aqua-400) 10%, transparent);
-			color: var(--bg-aqua-400);
-
-			.dot {
-				background-color: var(--bg-aqua-400);
-			}
-
-			.text {
-				color: var(--bg-aqua-400);
-			}
-		}
-	}
-}

frontend/src/components/FieldVariantBadges/FieldVariantBadges.tsx

@@ -1,69 +0,0 @@
-import './FieldVariantBadges.styles.scss';
-
-import cx from 'classnames';
-
-/**
- * Field contexts that should display badges
- */
-export enum AllowedFieldContext {
-	Attribute = 'attribute',
-	Resource = 'resource',
-}
-
-const ALLOWED_FIELD_CONTEXTS = new Set<string>([
-	AllowedFieldContext.Attribute,
-	AllowedFieldContext.Resource,
-]);
-
-interface FieldVariantBadgesProps {
-	fieldDataType?: string;
-	fieldContext?: string;
-}
-
-/**
- * Determines if a fieldContext badge should be displayed
- * Only shows badges for contexts in ALLOWED_FIELD_CONTEXTS
- */
-const shouldShowFieldContextBadge = (
-	fieldContext: string | undefined | null,
-): boolean => {
-	if (!fieldContext) {
-		return false;
-	}
-	return ALLOWED_FIELD_CONTEXTS.has(fieldContext);
-};
-
-function FieldVariantBadges({
-	fieldDataType,
-	fieldContext,
-}: FieldVariantBadgesProps): JSX.Element | null {
-	// If neither value exists, don't render anything
-	if (!fieldDataType && !fieldContext) {
-		return null;
-	}
-
-	// Check if fieldContext should be displayed
-	const showFieldContext =
-		fieldContext && shouldShowFieldContextBadge(fieldContext);
-
-	return (
-		<span className="field-variant-badges-container">
-			{fieldDataType && (
-				<span className="field-badge data-type">{fieldDataType}</span>
-			)}
-			{showFieldContext && (
-				<section className={cx('field-badge type-tag', fieldContext)}>
-					<div className="dot" />
-					<span className="text">{fieldContext}</span>
-				</section>
-			)}
-		</span>
-	);
-}
-
-FieldVariantBadges.defaultProps = {
-	fieldDataType: undefined,
-	fieldContext: undefined,
-};
-
-export default FieldVariantBadges;

frontend/src/components/KBarCommandPalette/KBarCommandPalette.scss

@@ -1,152 +0,0 @@
-.kbar-command-palette__positioner {
-	position: fixed;
-	inset: 0;
-	display: flex;
-	align-items: flex-start;
-	justify-content: center;
-	padding: 1rem;
-	background: rgba(0, 0, 0, 0.5);
-	backdrop-filter: blur(6px);
-	z-index: 50;
-}
-
-.kbar-command-palette__animator {
-	width: 100%;
-	max-width: 600px;
-}
-
-.kbar-command-palette__card {
-	background: var(--bg-ink-500);
-	color: var(--text-vanilla-100);
-	border-radius: 3px;
-	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-}
-
-.kbar-command-palette__search {
-	padding: 12px 16px;
-	font-size: 13px;
-	border: none;
-	border-bottom: 1px solid var(--border-ink-200);
-	color: var(--text-vanilla-100);
-	outline: none;
-	background-color: var(--bg-ink-500);
-}
-
-.kbar-command-palette__section {
-	padding: 8px 16px 4px;
-	font-size: 12px;
-	font-weight: 600;
-	color: var(--text-robin-500);
-	font-family: 'Inter', sans-serif;
-	text-transform: uppercase;
-	letter-spacing: 0.02em;
-}
-
-.kbar-command-palette__item {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 10px 16px;
-	font-size: 13px;
-	cursor: pointer;
-	transition: background 0.15s ease;
-}
-
-.kbar-command-palette__item:hover,
-.kbar-command-palette__item--active {
-	background: var(--bg-ink-400);
-}
-
-.kbar-command-palette__icon {
-	flex-shrink: 0;
-	width: 18px;
-	height: 18px;
-	color: #444;
-}
-
-.kbar-command-palette__shortcut {
-	margin-left: auto;
-	display: flex;
-	gap: 4px;
-}
-
-.kbar-command-palette__key {
-	padding: 2px 6px;
-	font-size: 12px;
-	border-radius: 4px;
-	background: var(--bg-ink-300);
-	color: var(--text-vanilla-300);
-	text-transform: uppercase;
-	font-family: 'Space Mono', monospace;
-}
-
-.kbar-command-palette__results-container {
-	div {
-		&::-webkit-scrollbar {
-			width: 0.3rem;
-			height: 0.3rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--bg-slate-300);
-		}
-
-		&::-webkit-scrollbar-thumb:hover {
-			background: var(--bg-slate-200);
-		}
-	}
-}
-
-.lightMode {
-	.kbar-command-palette__positioner {
-		background: rgba(0, 0, 0, 0.5);
-	}
-
-	.kbar-command-palette__card {
-		background: #fff;
-		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-	}
-
-	.kbar-command-palette__search {
-		border-bottom: 1px solid #e5e5e5;
-		color: var(--text-ink-500);
-		background-color: var(--bg-vanilla-100);
-	}
-
-	.kbar-command-palette__item {
-		color: var(--text-ink-500);
-	}
-
-	.kbar-command-palette__item:hover,
-	.kbar-command-palette__item--active {
-		background: #f5f5f5;
-	}
-
-	.kbar-command-palette__icon {
-		color: #444;
-	}
-
-	.kbar-command-palette__key {
-		background: #eee;
-		color: #555;
-	}
-
-	.kbar-command-palette__results-container {
-		div {
-			&::-webkit-scrollbar-thumb {
-				background: var(--bg-vanilla-300);
-			}
-
-			&::-webkit-scrollbar-thumb:hover {
-				background: var(--bg-vanilla-300);
-			}
-		}
-	}
-}

frontend/src/components/KBarCommandPalette/KBarCommandPalette.tsx

@@ -1,69 +0,0 @@
-import './KBarCommandPalette.scss';
-
-import {
-	KBarAnimator,
-	KBarPortal,
-	KBarPositioner,
-	KBarResults,
-	KBarSearch,
-	useMatches,
-} from 'kbar';
-
-function Results(): JSX.Element {
-	const { results } = useMatches();
-
-	const renderResults = ({
-		item,
-		active,
-	}: {
-		item: any;
-		active: boolean;
-	}): JSX.Element =>
-		typeof item === 'string' ? (
-			<div className="kbar-command-palette__section">{item}</div>
-		) : (
-			<div
-				className={`kbar-command-palette__item ${
-					active ? 'kbar-command-palette__item--active' : ''
-				}`}
-			>
-				{item.icon}
-				<span>{item.name}</span>
-				{item.shortcut?.length ? (
-					<span className="kbar-command-palette__shortcut">
-						{item.shortcut.map((sc: string) => (
-							<kbd key={sc} className="kbar-command-palette__key">
-								{sc}
-							</kbd>
-						))}
-					</span>
-				) : null}
-			</div>
-		);
-
-	return (
-		<div className="kbar-command-palette__results-container">
-			<KBarResults items={results} onRender={renderResults} />
-		</div>
-	);
-}
-
-function KBarCommandPalette(): JSX.Element {
-	return (
-		<KBarPortal>
-			<KBarPositioner className="kbar-command-palette__positioner">
-				<KBarAnimator className="kbar-command-palette__animator">
-					<div className="kbar-command-palette__card">
-						<KBarSearch
-							className="kbar-command-palette__search"
-							placeholder="Search or type a command..."
-						/>
-						<Results />
-					</div>
-				</KBarAnimator>
-			</KBarPositioner>
-		</KBarPortal>
-	);
-}
-
-export default KBarCommandPalette;

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

@@ -1,170 +0,0 @@
-import { renderHook, RenderHookResult } from '@testing-library/react';
-import { ColumnType } from 'antd/es/table';
-import { TelemetryFieldKey } from 'api/v5/v5';
-import {
-	mockAllAvailableKeys,
-	mockConflictingFieldsByContext,
-	mockConflictingFieldsByDatatype,
-} from 'container/OptionsMenu/__tests__/mockData';
-import { FontSize } from 'container/OptionsMenu/types';
-import { renderColumnHeader } from 'tests/columnHeaderHelpers';
-import { IField } from 'types/api/logs/fields';
-import { ILog } from 'types/api/logs/log';
-
-import { useTableView } from '../useTableView';
-
-const COLUMN_UNDEFINED_ERROR = 'statusCodeColumn is undefined';
-const SERVICE_NAME_COLUMN_UNDEFINED_ERROR = 'serviceNameColumn is undefined';
-
-// Mock useTimezone hook
-jest.mock('providers/Timezone', () => ({
-	useTimezone: (): {
-		formatTimezoneAdjustedTimestamp: (input: string | number) => string;
-	} => ({
-		formatTimezoneAdjustedTimestamp: jest.fn((input: string | number): string => {
-			if (typeof input === 'string') {
-				return new Date(input).toISOString();
-			}
-			return new Date(input / 1e6).toISOString();
-		}),
-	}),
-}));
-
-// Mock useIsDarkMode hook
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-describe('useTableView - Column Headers', () => {
-	const HTTP_STATUS_CODE = 'http.status_code';
-
-	const mockLogs: ILog[] = [
-		({
-			id: '1',
-			body: 'Test log',
-			timestamp: '2024-01-01T00:00:00Z',
-			[HTTP_STATUS_CODE]: '200',
-		} as unknown) as ILog,
-	];
-
-	const renderUseTableView = (
-		fields: TelemetryFieldKey[],
-		allAvailableKeys = mockAllAvailableKeys,
-	): RenderHookResult<ReturnType<typeof useTableView>, unknown> =>
-		renderHook(() =>
-			useTableView({
-				logs: mockLogs,
-				fields: fields as IField[],
-				linesPerRow: 1,
-				fontSize: FontSize.SMALL,
-				allAvailableKeys,
-			}),
-		);
-
-	it('shows datatype in column header for conflicting columns', () => {
-		const fields: TelemetryFieldKey[] = [
-			mockConflictingFieldsByDatatype[0], // string variant
-		];
-
-		const { result } = renderUseTableView(fields);
-		const { columns } = result.current;
-
-		const statusCodeColumn = columns.find(
-			(col): col is ColumnType<Record<string, unknown>> =>
-				'dataIndex' in col && col.dataIndex === HTTP_STATUS_CODE,
-		);
-
-		expect(statusCodeColumn).toBeDefined();
-		expect(statusCodeColumn?.title).toBeDefined();
-
-		if (!statusCodeColumn) {
-			throw new Error(COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(statusCodeColumn);
-		expect(container.textContent).toContain('http.status_code (string)');
-		expect(container.textContent).toContain('string');
-	});
-
-	it('shows tooltip icon when unselected conflicting variant exists', () => {
-		const fields: TelemetryFieldKey[] = [
-			mockConflictingFieldsByDatatype[0], // Only string variant selected
-		];
-
-		const { result } = renderUseTableView(fields, mockAllAvailableKeys); // Contains number variant
-		const { columns } = result.current;
-
-		const statusCodeColumn = columns.find(
-			(col): col is ColumnType<Record<string, unknown>> =>
-				'dataIndex' in col && col.dataIndex === HTTP_STATUS_CODE,
-		);
-
-		expect(statusCodeColumn).toBeDefined();
-
-		// Verify that _hasUnselectedConflict metadata is set correctly
-		const columnRecord = statusCodeColumn as Record<string, unknown>;
-		expect(columnRecord._hasUnselectedConflict).toBe(true);
-
-		if (!statusCodeColumn) {
-			throw new Error(COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(statusCodeColumn);
-		const tooltipIcon = container.querySelector('.anticon-info-circle');
-		expect(tooltipIcon).toBeInTheDocument();
-	});
-
-	it('hides tooltip icon when all conflicting variants are selected', () => {
-		const fields: TelemetryFieldKey[] = [
-			...mockConflictingFieldsByDatatype, // Both variants selected
-		];
-
-		const { result } = renderUseTableView(fields);
-		const { columns } = result.current;
-
-		const statusCodeColumn = columns.find(
-			(col): col is ColumnType<Record<string, unknown>> =>
-				'dataIndex' in col && col.dataIndex === HTTP_STATUS_CODE,
-		);
-
-		expect(statusCodeColumn).toBeDefined();
-
-		// Verify that _hasUnselectedConflict metadata is NOT set when all variants are selected
-		const columnRecord = statusCodeColumn as Record<string, unknown>;
-		expect(columnRecord._hasUnselectedConflict).toBeUndefined();
-
-		if (!statusCodeColumn) {
-			throw new Error(COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(statusCodeColumn);
-		const tooltipIcon = container.querySelector('.anticon-info-circle');
-		expect(tooltipIcon).not.toBeInTheDocument();
-	});
-
-	it('shows context in header for attribute/resource conflicting fields', () => {
-		// When same datatype but different contexts, it shows context
-		const fields: TelemetryFieldKey[] = [
-			mockConflictingFieldsByContext[0], // resource variant
-			mockConflictingFieldsByContext[1], // attribute variant - both have same datatype
-		];
-
-		const { result } = renderUseTableView(fields);
-		const { columns } = result.current;
-
-		const serviceNameColumn = columns.find(
-			(col): col is ColumnType<Record<string, unknown>> =>
-				'dataIndex' in col && col.dataIndex === 'service.name',
-		);
-
-		expect(serviceNameColumn).toBeDefined();
-
-		if (!serviceNameColumn) {
-			throw new Error(SERVICE_NAME_COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(serviceNameColumn);
-		expect(container.textContent).toContain('service.name (resource)');
-		expect(container.textContent).toContain('resource');
-	});
-});

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

@@ -1,5 +1,4 @@
 import { ColumnsType, ColumnType } from 'antd/es/table';
-import { TelemetryFieldKey } from 'api/v5/v5';
 import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
@@ -29,7 +28,6 @@ export type UseTableViewProps = {
 	activeLogIndex?: number;
 	activeContextLog?: ILog | null;
 	isListViewPanel?: boolean;
-	allAvailableKeys?: TelemetryFieldKey[];
 } & LogsTableViewProps;
 
 export type ActionsColumnProps = {

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

@@ -5,12 +5,6 @@ import { ColumnsType } from 'antd/es/table';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
-import {
-	getColumnTitleWithTooltip,
-	getFieldVariantsByName,
-	getUniqueColumnKey,
-	hasMultipleVariants,
-} from 'container/OptionsMenu/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
@@ -37,7 +31,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 		fontSize,
 		appendTo = 'center',
 		isListViewPanel,
-		allAvailableKeys,
 	} = props;
 
 	const isDarkMode = useIsDarkMode();
@@ -57,50 +50,30 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 	);
 
 	const columns: ColumnsType<Record<string, unknown>> = useMemo(() => {
-		// Group fields by name to analyze variants
-		const fieldVariantsByName = getFieldVariantsByName(fields);
-
 		const fieldColumns: ColumnsType<Record<string, unknown>> = fields
 			.filter((e) => !['id', 'body', 'timestamp'].includes(e.name))
-			.map((field) => {
-				const hasVariants = hasMultipleVariants(
-					field.name || '',
-					fields,
-					allAvailableKeys,
-				);
-				const variants = fieldVariantsByName[field.name] || [];
-				const { title, hasUnselectedConflict } = getColumnTitleWithTooltip(
-					field,
-					hasVariants,
-					variants,
-					fields,
-					allAvailableKeys,
-				);
-				return {
-					title,
-					dataIndex: field.name,
-					accessorKey: field.name,
-					id: getUniqueColumnKey(field),
-					key: getUniqueColumnKey(field),
-					// Store metadata for header enhancement (will be rendered via custom header component)
-					...(hasUnselectedConflict && { _hasUnselectedConflict: true }),
-					render: (cellField): ColumnTypeRender<Record<string, unknown>> => ({
-						props: {
-							style: isListViewPanel
-								? defaultListViewPanelStyle
-								: getDefaultCellStyle(isDarkMode),
-						},
-						children: (
-							<Typography.Paragraph
-								ellipsis={{ rows: linesPerRow }}
-								className={cx('paragraph', fontSize)}
-							>
-								{cellField}
-							</Typography.Paragraph>
-						),
-					}),
-				};
-			});
+			.map(({ name }) => ({
+				title: name,
+				dataIndex: name,
+				accessorKey: name,
+				id: name.toLowerCase().replace(/\./g, '_'),
+				key: name,
+				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
+					props: {
+						style: isListViewPanel
+							? defaultListViewPanelStyle
+							: getDefaultCellStyle(isDarkMode),
+					},
+					children: (
+						<Typography.Paragraph
+							ellipsis={{ rows: linesPerRow }}
+							className={cx('paragraph', fontSize)}
+						>
+							{field}
+						</Typography.Paragraph>
+					),
+				}),
+			}));
 
 		if (isListViewPanel) {
 			return [...fieldColumns];
@@ -204,7 +177,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 		fontSize,
 		formatTimezoneAdjustedTimestamp,
 		bodyColumnStyle,
-		allAvailableKeys,
 	]);
 
 	return { columns, dataSource: flattenLogData };

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -314,23 +314,6 @@
 								background-color: var(--bg-ink-200);
 								cursor: pointer;
 							}
-							.name-wrapper {
-								display: flex;
-								justify-content: space-between;
-								align-items: center;
-								gap: 8px;
-								width: 100%;
-								min-width: 0;
-								.name {
-									flex: 1;
-									min-width: 0;
-									overflow: hidden;
-									text-overflow: ellipsis;
-									white-space: nowrap;
-								}
-
-								cursor: pointer;
-							}
 						}
 
 						&::-webkit-scrollbar {
@@ -419,20 +402,12 @@
 								cursor: pointer;
 							}
 
-							.name-wrapper {
-								display: flex;
-								justify-content: space-between;
-								align-items: center;
-								width: calc(100% - 26px);
-								gap: 8px;
-								min-width: 0;
-								.name {
-									flex: 1;
-									min-width: 0;
-									white-space: nowrap;
-									overflow: hidden;
-									text-overflow: ellipsis;
-								}
+							.name {
+								flex: 1;
+								overflow: hidden;
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
 
 								cursor: pointer;
 							}

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -6,14 +6,8 @@ import './LogsFormatOptionsMenu.styles.scss';
 import { Button, Input, InputNumber, Popover, Tooltip, Typography } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
-import FieldVariantBadges from 'components/FieldVariantBadges/FieldVariantBadges';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
-import {
-	getNamesWithVariants,
-	getUniqueColumnKey,
-	hasMultipleVariants,
-} from 'container/OptionsMenu/utils';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import {
 	Check,
@@ -32,7 +26,6 @@ interface LogsFormatOptionsMenuProps {
 	config: OptionsMenuConfig;
 }
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function OptionsMenu({
 	items,
 	selectedOptionFormat,
@@ -57,11 +50,6 @@ function OptionsMenu({
 	const listRef = useRef<HTMLDivElement>(null);
 	const initialMouseEnterRef = useRef<boolean>(false);
 
-	// Detect which column names have multiple variants in dropdown options
-	const namesWithVariantsInOptions = getNamesWithVariants(
-		addColumn?.options || [],
-	);
-
 	const onChange = useCallback(
 		(key: LogViewMode) => {
 			if (!format) return;
@@ -313,46 +301,33 @@ function OptionsMenu({
 						)}
 
 						<div className="column-format-new-options" ref={listRef}>
-							{addColumn?.options?.map((option, index) => {
-								const { label, value, fieldDataType, fieldContext } = option;
-								return (
-									<div
-										className={cx('column-name', value === selectedValue && 'selected')}
-										key={value}
-										onMouseEnter={(): void => {
-											if (!initialMouseEnterRef.current) {
-												setSelectedValue(value as string | null);
-											}
-
-											initialMouseEnterRef.current = true;
-										}}
-										onMouseMove={(): void => {
-											// this is added to handle the mouse move explicit event and not the re-rendered on mouse enter event
+							{addColumn?.options?.map(({ label, value }, index) => (
+								<div
+									className={cx('column-name', value === selectedValue && 'selected')}
+									key={value}
+									onMouseEnter={(): void => {
+										if (!initialMouseEnterRef.current) {
 											setSelectedValue(value as string | null);
-										}}
-										onClick={(eve): void => {
-											eve.stopPropagation();
-											handleColumnSelection(index, addColumn?.options || []);
-										}}
-									>
-										<div className="name-wrapper">
-											<Tooltip placement="left" title={label}>
-												<span className="name">{label}</span>
-											</Tooltip>
-											{fieldDataType &&
-												typeof label === 'string' &&
-												namesWithVariantsInOptions.has(label) && (
-													<span className="field-variant-badges">
-														<FieldVariantBadges
-															fieldDataType={fieldDataType}
-															fieldContext={fieldContext}
-														/>
-													</span>
-												)}
-										</div>
+										}
+
+										initialMouseEnterRef.current = true;
+									}}
+									onMouseMove={(): void => {
+										// this is added to handle the mouse move explicit event and not the re-rendered on mouse enter event
+										setSelectedValue(value as string | null);
+									}}
+									onClick={(eve): void => {
+										eve.stopPropagation();
+										handleColumnSelection(index, addColumn?.options || []);
+									}}
+								>
+									<div className="name">
+										<Tooltip placement="left" title={label}>
+											{label}
+										</Tooltip>
 									</div>
-								);
-							})}
+								</div>
+							))}
 						</div>
 					</div>
 				</div>
@@ -441,38 +416,22 @@ function OptionsMenu({
 									)}
 
 									<div className="column-format">
-										{addColumn?.value?.map((column) => {
-											const uniqueKey = getUniqueColumnKey(column);
-											const showBadge = hasMultipleVariants(
-												column.name || '',
-												addColumn?.value || [],
-												addColumn?.allAvailableKeys,
-											);
-											return (
-												<div className="column-name" key={uniqueKey}>
-													<Tooltip placement="left" title={column.name}>
-														<div className="name-wrapper">
-															<span className="name">{column.name}</span>
-															{showBadge && (
-																<span className="field-variant-badges">
-																	<FieldVariantBadges
-																		fieldDataType={column.fieldDataType}
-																		fieldContext={column.fieldContext}
-																	/>
-																</span>
-															)}
-														</div>
+										{addColumn?.value?.map(({ name }) => (
+											<div className="column-name" key={name}>
+												<div className="name">
+													<Tooltip placement="left" title={name}>
+														{name}
 													</Tooltip>
-													{addColumn?.value?.length > 1 && (
-														<X
-															className="delete-btn"
-															size={14}
-															onClick={(): void => addColumn.onRemove(uniqueKey)}
-														/>
-													)}
 												</div>
-											);
-										})}
+												{addColumn?.value?.length > 1 && (
+													<X
+														className="delete-btn"
+														size={14}
+														onClick={(): void => addColumn.onRemove(name)}
+													/>
+												)}
+											</div>
+										))}
 										{addColumn && addColumn?.value?.length === 0 && (
 											<div className="column-name no-columns-selected">
 												No columns selected

frontend/src/components/LogsFormatOptionsMenu/__tests__/LogsFormatOptionsMenu.badges.test.tsx

@@ -1,198 +0,0 @@
-import { TelemetryFieldKey } from 'api/v5/v5';
-import {
-	mockAllAvailableKeys,
-	mockConflictingFieldsByContext,
-	mockConflictingFieldsByDatatype,
-} from 'container/OptionsMenu/__tests__/mockData';
-import { FontSize } from 'container/OptionsMenu/types';
-import { getOptionsFromKeys } from 'container/OptionsMenu/utils';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import LogsFormatOptionsMenu from '../LogsFormatOptionsMenu';
-
-const mockUpdateFormatting = jest.fn();
-const mockUpdateColumns = jest.fn();
-
-jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
-	usePreferenceSync: (): any => ({
-		preferences: {
-			columns: [],
-			formatting: {
-				maxLines: 2,
-				format: 'table',
-				fontSize: 'small',
-				version: 1,
-			},
-		},
-		loading: false,
-		error: null,
-		updateColumns: mockUpdateColumns,
-		updateFormatting: mockUpdateFormatting,
-	}),
-}));
-
-describe('LogsFormatOptionsMenu - Badge Display', () => {
-	const FORMAT_BUTTON_TEST_ID = 'periscope-btn-format-options';
-	const HTTP_STATUS_CODE = 'http.status_code';
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	function setup(configOverrides = {}): any {
-		const items = [
-			{ key: 'raw', label: 'Raw', data: { title: 'max lines per row' } },
-			{ key: 'list', label: 'Default' },
-			{ key: 'table', label: 'Column', data: { title: 'columns' } },
-		];
-
-		const formatOnChange = jest.fn();
-		const maxLinesOnChange = jest.fn();
-		const fontSizeOnChange = jest.fn();
-		const onSelect = jest.fn();
-		const onRemove = jest.fn();
-		const onSearch = jest.fn();
-		const onFocus = jest.fn();
-		const onBlur = jest.fn();
-
-		const defaultConfig = {
-			format: { value: 'table', onChange: formatOnChange },
-			maxLines: { value: 2, onChange: maxLinesOnChange },
-			fontSize: { value: FontSize.SMALL, onChange: fontSizeOnChange },
-			addColumn: {
-				isFetching: false,
-				value: [],
-				options: [],
-				onFocus,
-				onBlur,
-				onSearch,
-				onSelect,
-				onRemove,
-				allAvailableKeys: mockAllAvailableKeys,
-				...configOverrides,
-			},
-		};
-
-		const { getByTestId } = render(
-			<LogsFormatOptionsMenu
-				items={items}
-				selectedOptionFormat="table"
-				config={defaultConfig}
-			/>,
-		);
-
-		return {
-			getByTestId,
-			formatOnChange,
-			maxLinesOnChange,
-			fontSizeOnChange,
-			onSelect,
-			onRemove,
-			onSearch,
-			onFocus,
-			onBlur,
-		};
-	}
-
-	it('shows badges in dropdown options when searching for conflicting attributes', () => {
-		const options = getOptionsFromKeys(mockConflictingFieldsByDatatype, []);
-
-		expect(options).toBeDefined();
-		expect(options).toHaveLength(2);
-		expect(options?.[0]?.hasMultipleVariants).toBe(true);
-		expect(options?.[1]?.hasMultipleVariants).toBe(true);
-		expect(options?.[0]?.fieldDataType).toBe('string');
-		expect(options?.[1]?.fieldDataType).toBe('number');
-	});
-
-	it('shows badges in selected columns list after selecting conflicting attribute', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const selectedColumns: TelemetryFieldKey[] = [
-			mockConflictingFieldsByDatatype[0], // Only string variant selected
-		];
-
-		const { getByTestId } = setup({
-			value: selectedColumns,
-		});
-
-		// Open the popover menu
-		const formatButton = getByTestId(FORMAT_BUTTON_TEST_ID);
-		await user.click(formatButton);
-
-		// Wait for selected columns section to appear
-		await waitFor(() => {
-			expect(screen.getByText(HTTP_STATUS_CODE)).toBeInTheDocument();
-		});
-
-		// Badge should appear even though only one variant is selected
-		// because allAvailableKeys contains the conflicting variant
-		const datatypeBadge = screen.queryByText('string');
-		expect(datatypeBadge).toBeInTheDocument();
-	});
-
-	it('shows context badge only for attribute/resource conflicting fields', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const selectedColumns: TelemetryFieldKey[] = [
-			mockConflictingFieldsByContext[0], // resource variant
-		];
-
-		const { getByTestId } = setup({
-			value: selectedColumns,
-		});
-
-		// Open the popover menu
-		const formatButton = getByTestId(FORMAT_BUTTON_TEST_ID);
-		await user.click(formatButton);
-
-		// Wait for selected columns section
-		await waitFor(() => {
-			expect(screen.getByText('service.name')).toBeInTheDocument();
-		});
-
-		// Context badge should appear for resource
-		const contextBadge = screen.queryByText('resource');
-		expect(contextBadge).toBeInTheDocument();
-	});
-
-	it('shows datatype badge for conflicting fields', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const selectedColumns: TelemetryFieldKey[] = [
-			{
-				name: HTTP_STATUS_CODE,
-				fieldDataType: 'string',
-				fieldContext: 'span', // span context
-				signal: 'traces',
-			},
-		];
-
-		const { getByTestId } = setup({
-			value: selectedColumns,
-			allAvailableKeys: [
-				...mockAllAvailableKeys,
-				{
-					name: HTTP_STATUS_CODE,
-					fieldDataType: 'number',
-					fieldContext: 'span',
-					signal: 'traces',
-				},
-			],
-		});
-
-		// Open the popover menu
-		const formatButton = getByTestId(FORMAT_BUTTON_TEST_ID);
-		await user.click(formatButton);
-
-		// Wait for selected columns section
-		await waitFor(() => {
-			expect(screen.getByText(HTTP_STATUS_CODE)).toBeInTheDocument();
-		});
-
-		// Datatype badge should appear
-		const datatypeBadge = screen.queryByText('string');
-		expect(datatypeBadge).toBeInTheDocument();
-
-		// Context badge should NOT appear for span context
-		const contextBadge = screen.queryByText('span');
-		expect(contextBadge).not.toBeInTheDocument();
-	});
-});

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

@@ -300,7 +300,7 @@ function QueryAddOns({
 	);
 
 	return (
-		<div className="query-add-ons">
+		<div className="query-add-ons" data-testid="query-add-ons">
 			{selectedViews.length > 0 && (
 				<div className="selected-add-ons-content">
 					{selectedViews.find((view) => view.key === 'group_by') && (

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

@@ -43,7 +43,10 @@ function QueryAggregationOptions({
 	};
 
 	return (
-		<div className="query-aggregation-container">
+		<div
+			className="query-aggregation-container"
+			data-testid="query-aggregation-container"
+		>
 			<div className="aggregation-container">
 				<QueryAggregationSelect
 					onChange={onChange}

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

@@ -114,9 +114,9 @@ function QuerySearch({
 	const [isFocused, setIsFocused] = useState(false);
 	const editorRef = useRef<EditorView | null>(null);
 
-	const handleQueryValidation = useCallback((newQuery: string): void => {
+	const handleQueryValidation = useCallback((newExpression: string): void => {
 		try {
-			const validationResponse = validateQuery(newQuery);
+			const validationResponse = validateQuery(newExpression);
 			setValidation(validationResponse);
 		} catch (error) {
 			setValidation({
@@ -127,7 +127,7 @@ function QuerySearch({
 		}
 	}, []);
 
-	const getCurrentQuery = useCallback(
+	const getCurrentExpression = useCallback(
 		(): string => editorRef.current?.state.doc.toString() || '',
 		[],
 	);
@@ -167,19 +167,14 @@ function QuerySearch({
 		() => {
 			if (!isEditorReady) return;
 
-			const newQuery = queryData.filter?.expression || '';
-			const currentQuery = getCurrentQuery();
+			const newExpression = queryData.filter?.expression || '';
+			const currentExpression = getCurrentExpression();
 
-			/* eslint-disable-next-line sonarjs/no-collapsible-if */
-			if (newQuery !== currentQuery && !isFocused) {
-				// Prevent clearing a non-empty editor when queryData becomes empty temporarily
-				// Only update if newQuery has a value, or if both are empty (initial state)
-				if (newQuery || !currentQuery) {
-					updateEditorValue(newQuery, { skipOnChange: true });
-
-					if (newQuery) {
-						handleQueryValidation(newQuery);
-					}
+			// Do not update codemirror editor if the expression is the same
+			if (newExpression !== currentExpression && !isFocused) {
+				updateEditorValue(newExpression, { skipOnChange: true });
+				if (newExpression) {
+					handleQueryValidation(newExpression);
 				}
 			}
 		},
@@ -613,8 +608,8 @@ function QuerySearch({
 	};
 
 	const handleBlur = (): void => {
-		const currentQuery = getCurrentQuery();
-		handleQueryValidation(currentQuery);
+		const currentExpression = getCurrentExpression();
+		handleQueryValidation(currentExpression);
 		setIsFocused(false);
 	};
 
@@ -633,11 +628,11 @@ function QuerySearch({
 
 	const handleExampleClick = (exampleQuery: string): void => {
 		// If there's an existing query, append the example with AND
-		const currentQuery = getCurrentQuery();
-		const newQuery = currentQuery
-			? `${currentQuery} AND ${exampleQuery}`
+		const currentExpression = getCurrentExpression();
+		const newExpression = currentExpression
+			? `${currentExpression} AND ${exampleQuery}`
 			: exampleQuery;
-		updateEditorValue(newQuery);
+		updateEditorValue(newExpression);
 	};
 
 	// Helper function to render a badge for the current context mode
@@ -673,9 +668,9 @@ function QuerySearch({
 		if (word?.from === word?.to && !context.explicit) return null;
 
 		// Get current query from editor
-		const currentQuery = editorRef.current?.state.doc.toString() || '';
+		const currentExpression = getCurrentExpression();
 		// Get the query context at the cursor position
-		const queryContext = getQueryContextAtCursor(currentQuery, cursorPos.ch);
+		const queryContext = getQueryContextAtCursor(currentExpression, cursorPos.ch);
 
 		// Define autocomplete options based on the context
 		let options: {
@@ -1171,8 +1166,8 @@ function QuerySearch({
 
 		if (queryContext.isInParenthesis) {
 			// Different suggestions based on the context within parenthesis or bracket
-			const currentQuery = editorRef.current?.state.doc.toString() || '';
-			const curChar = currentQuery.charAt(cursorPos.ch - 1) || '';
+			const currentExpression = getCurrentExpression();
+			const curChar = currentExpression.charAt(cursorPos.ch - 1) || '';
 
 			if (curChar === '(' || curChar === '[') {
 				// Right after opening parenthesis/bracket
@@ -1321,7 +1316,7 @@ function QuerySearch({
 						style={{
 							position: 'absolute',
 							top: 8,
-							right: validation.isValid === false && getCurrentQuery() ? 40 : 8, // Move left when error shown
+							right: validation.isValid === false && getCurrentExpression() ? 40 : 8, // Move left when error shown
 							cursor: 'help',
 							zIndex: 10,
 							transition: 'right 0.2s ease',
@@ -1383,7 +1378,7 @@ function QuerySearch({
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
-											onRun(getCurrentQuery());
+											onRun(getCurrentExpression());
 										} else {
 											handleRunQuery();
 										}
@@ -1409,7 +1404,7 @@ function QuerySearch({
 					onBlur={handleBlur}
 				/>
 
-				{getCurrentQuery() && validation.isValid === false && !isFocused && (
+				{getCurrentExpression() && validation.isValid === false && !isFocused && (
 					<div
 						className={cx('query-status-container', {
 							hasErrors: validation.errors.length > 0,

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable import/named */
+import { EditorView } from '@uiw/react-codemirror';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import { initialQueriesMap } from 'constants/queryBuilder';
@@ -151,8 +152,6 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		>;
 		mockedGetKeys.mockClear();
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<QuerySearch
 				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
@@ -171,8 +170,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
 
 		// Focus and type into the editor
-		await user.click(editor);
-		await user.type(editor, SAMPLE_KEY_TYPING);
+		await userEvent.click(editor);
+		await userEvent.type(editor, SAMPLE_KEY_TYPING);
 
 		// Wait for debounced API call (300ms debounce + some buffer)
 		await waitFor(() => expect(mockedGetKeys).toHaveBeenCalled(), {
@@ -187,8 +186,6 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		>;
 		mockedGetValues.mockClear();
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<QuerySearch
 				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
@@ -204,8 +201,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		});
 
 		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
-		await user.click(editor);
-		await user.type(editor, SAMPLE_VALUE_TYPING_INCOMPLETE);
+		await userEvent.click(editor);
+		await userEvent.type(editor, SAMPLE_VALUE_TYPING_INCOMPLETE);
 
 		// Wait for debounced API call (300ms debounce + some buffer)
 		await waitFor(() => expect(mockedGetValues).toHaveBeenCalled(), {
@@ -241,7 +238,6 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 
 	it('calls provided onRun on Mod-Enter', async () => {
 		const onRun = jest.fn() as jest.MockedFunction<(q: string) => void>;
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		render(
 			<QuerySearch
@@ -259,8 +255,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		});
 
 		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
-		await user.click(editor);
-		await user.type(editor, SAMPLE_STATUS_QUERY);
+		await userEvent.click(editor);
+		await userEvent.type(editor, SAMPLE_STATUS_QUERY);
 
 		// Use fireEvent for keyboard shortcuts as userEvent might not work well with CodeMirror
 		const modKey = navigator.platform.includes('Mac') ? 'metaKey' : 'ctrlKey';
@@ -280,8 +276,6 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		>;
 		mockedHandleRunQuery.mockClear();
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<QuerySearch
 				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
@@ -297,8 +291,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		});
 
 		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
-		await user.click(editor);
-		await user.type(editor, SAMPLE_VALUE_TYPING_COMPLETE);
+		await userEvent.click(editor);
+		await userEvent.type(editor, SAMPLE_VALUE_TYPING_COMPLETE);
 
 		// Use fireEvent for keyboard shortcuts as userEvent might not work well with CodeMirror
 		const modKey = navigator.platform.includes('Mac') ? 'metaKey' : 'ctrlKey';
@@ -348,4 +342,73 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 			{ timeout: 3000 },
 		);
 	});
+
+	it('handles queryData.filter.expression changes without triggering onChange', async () => {
+		// Spy on CodeMirror's EditorView.dispatch, which is invoked when updateEditorValue
+		// applies a programmatic change to the editor.
+		const dispatchSpy = jest.spyOn(EditorView.prototype, 'dispatch');
+		const initialExpression = "service.name = 'frontend'";
+		const updatedExpression = "service.name = 'backend'";
+
+		const onChange = jest.fn() as jest.MockedFunction<(v: string) => void>;
+
+		const initialQueryData = {
+			...initialQueriesMap.logs.builder.queryData[0],
+			filter: {
+				expression: initialExpression,
+			},
+		};
+
+		const { rerender } = render(
+			<QuerySearch
+				onChange={onChange}
+				queryData={initialQueryData}
+				dataSource={DataSource.LOGS}
+			/>,
+		);
+
+		// Wait for CodeMirror to initialize with the initial expression
+		await waitFor(
+			() => {
+				const editorContent = document.querySelector(
+					CM_EDITOR_SELECTOR,
+				) as HTMLElement;
+				expect(editorContent).toBeInTheDocument();
+				const textContent = editorContent.textContent || '';
+				expect(textContent).toBe(initialExpression);
+			},
+			{ timeout: 3000 },
+		);
+
+		// Ensure the editor is explicitly blurred (not focused)
+		// Blur the actual CodeMirror editor container so that QuerySearch's onBlur handler runs.
+		// Note: In jsdom + CodeMirror we can't reliably assert the DOM text content changes when
+		// the expression is updated programmatically, but we can assert that:
+		// 1) The component continues to render, and
+		// 2) No onChange is fired for programmatic updates.
+
+		const updatedQueryData = {
+			...initialQueryData,
+			filter: {
+				expression: updatedExpression,
+			},
+		};
+
+		// Re-render with updated queryData.filter.expression
+		rerender(
+			<QuerySearch
+				onChange={onChange}
+				queryData={updatedQueryData}
+				dataSource={DataSource.LOGS}
+			/>,
+		);
+
+		// updateEditorValue should have resulted in a dispatch call + onChange should not have been called
+		await waitFor(() => {
+			expect(dispatchSpy).toHaveBeenCalled();
+			expect(onChange).not.toHaveBeenCalled();
+		});
+
+		dispatchSpy.mockRestore();
+	});
 });

frontend/src/components/QueryBuilderV2/utils.ts

@@ -163,6 +163,10 @@ function formatSingleValueForFilter(
 		if (trimmed === 'true' || trimmed === 'false') {
 			return trimmed === 'true';
 		}
+
+		if (isQuoted(value)) {
+			return unquote(value);
+		}
 	}
 
 	// Return non-string values as-is, or string values that couldn't be converted

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

@@ -1,3 +1,4 @@
+import userEvent from '@testing-library/user-event';
 import { FiltersType, QuickFiltersSource } from 'components/QuickFilters/types';
 import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -5,7 +6,7 @@ import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQue
 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 { render, screen, waitFor } from 'tests/test-utils';
 import { SuccessResponse } from 'types/api';
 import { IAttributeValuesResponse } from 'types/api/queryBuilder/getAttributesValues';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -41,13 +42,15 @@ interface MockFilterConfig {
 	type: FiltersType;
 }
 
+const SERVICE_NAME_KEY = 'service.name';
+
 const createMockFilter = (
 	overrides: Partial<MockFilterConfig> = {},
 ): MockFilterConfig => ({
 	// eslint-disable-next-line sonarjs/no-duplicate-string
 	title: 'Service Name',
 	attributeKey: {
-		key: 'service.name',
+		key: SERVICE_NAME_KEY,
 		dataType: DataTypes.String,
 		type: 'resource',
 	},
@@ -68,7 +71,7 @@ const createMockQueryBuilderData = (hasActiveFilters = false): any => ({
 							? [
 									{
 										key: {
-											key: 'service.name',
+											key: SERVICE_NAME_KEY,
 											dataType: DataTypes.String,
 											type: 'resource',
 										},
@@ -188,4 +191,222 @@ describe('CheckboxFilter - User Flows', () => {
 			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
 		});
 	});
+
+	it('should update query filters when a checkbox is clicked', async () => {
+		const redirectWithQueryBuilderData = jest.fn();
+
+		// Start with no active filters so clicking a checkbox creates one
+		mockUseQueryBuilder.mockReturnValue({
+			...createMockQueryBuilderData(false),
+			redirectWithQueryBuilderData,
+		} as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: true });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		// Wait for checkboxes to render
+		await waitFor(() => {
+			expect(screen.getAllByRole('checkbox')).toHaveLength(4);
+		});
+
+		const checkboxes = screen.getAllByRole('checkbox');
+
+		// User unchecks the first value (`mq-kafka`)
+		await userEvent.click(checkboxes[0]);
+
+		// Composite query params (query builder data) should be updated via redirectWithQueryBuilderData
+		expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
+
+		const [updatedQuery] = redirectWithQueryBuilderData.mock.calls[0];
+		const updatedFilters = updatedQuery.builder.queryData[0].filters;
+
+		expect(updatedFilters.items).toHaveLength(1);
+		expect(updatedFilters.items[0].key.key).toBe(SERVICE_NAME_KEY);
+		// When unchecking from an "all selected" state, we use a NOT_IN filter for that value
+		expect(updatedFilters.items[0].op).toBe('not in');
+		expect(updatedFilters.items[0].value).toBe('mq-kafka');
+	});
+
+	it('should set an IN filter with only the clicked value when using Only', async () => {
+		const redirectWithQueryBuilderData = jest.fn();
+
+		// Existing filter: service.name IN ['mq-kafka', 'otel-demo']
+		mockUseQueryBuilder.mockReturnValue({
+			lastUsedQuery: 0,
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							filters: {
+								items: [
+									{
+										key: {
+											key: SERVICE_NAME_KEY,
+											dataType: DataTypes.String,
+											type: 'resource',
+										},
+										op: 'in',
+										value: ['mq-kafka', 'otel-demo'],
+									},
+								],
+								op: 'AND',
+							},
+						},
+					],
+				},
+			},
+			redirectWithQueryBuilderData,
+		} as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: true });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		// Wait for values to render
+		await waitFor(() => {
+			expect(screen.getByText('mq-kafka')).toBeInTheDocument();
+		});
+
+		// Click on the value label to trigger the "Only" behavior
+		await userEvent.click(screen.getByText('mq-kafka'));
+
+		expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
+		const [updatedQuery] = redirectWithQueryBuilderData.mock.calls[0];
+		const updatedFilters = updatedQuery.builder.queryData[0].filters;
+
+		expect(updatedFilters.items).toHaveLength(1);
+		expect(updatedFilters.items[0].key.key).toBe(SERVICE_NAME_KEY);
+		expect(updatedFilters.items[0].op).toBe('in');
+		expect(updatedFilters.items[0].value).toBe('mq-kafka');
+	});
+
+	it('should clear filters for the attribute when using All', async () => {
+		const redirectWithQueryBuilderData = jest.fn();
+
+		// Existing filter: service.name IN ['mq-kafka']
+		mockUseQueryBuilder.mockReturnValue({
+			lastUsedQuery: 0,
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							filters: {
+								items: [
+									{
+										key: {
+											key: SERVICE_NAME_KEY,
+											dataType: DataTypes.String,
+											type: 'resource',
+										},
+										op: 'in',
+										value: ['mq-kafka'],
+									},
+								],
+								op: 'AND',
+							},
+						},
+					],
+				},
+			},
+			redirectWithQueryBuilderData,
+		} as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: true });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('mq-kafka')).toBeInTheDocument();
+		});
+
+		// Only one value is selected, so clicking it should switch to "All" (no filter for this key)
+		await userEvent.click(screen.getByText('mq-kafka'));
+
+		expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
+		const [updatedQuery] = redirectWithQueryBuilderData.mock.calls[0];
+		const updatedFilters = updatedQuery.builder.queryData[0].filters;
+
+		const filtersForServiceName = updatedFilters.items.filter(
+			(item: any) => item.key?.key === SERVICE_NAME_KEY,
+		);
+
+		expect(filtersForServiceName).toHaveLength(0);
+	});
+
+	it('should extend an existing IN filter when checking an additional value', async () => {
+		const redirectWithQueryBuilderData = jest.fn();
+
+		// Existing filter: service.name IN 'mq-kafka'
+		mockUseQueryBuilder.mockReturnValue({
+			lastUsedQuery: 0,
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							filters: {
+								items: [
+									{
+										key: {
+											key: SERVICE_NAME_KEY,
+											dataType: DataTypes.String,
+											type: 'resource',
+										},
+										op: 'in',
+										value: 'mq-kafka',
+									},
+								],
+								op: 'AND',
+							},
+						},
+					],
+				},
+			},
+			redirectWithQueryBuilderData,
+		} as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: true });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		// Wait for checkboxes to render
+		await waitFor(() => {
+			expect(screen.getAllByRole('checkbox')).toHaveLength(4);
+		});
+
+		const checkboxes = screen.getAllByRole('checkbox');
+
+		// First checkbox corresponds to 'mq-kafka' (already selected),
+		// second will be 'otel-demo' which we now select additionally.
+		await userEvent.click(checkboxes[1]);
+
+		expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
+		const [updatedQuery] = redirectWithQueryBuilderData.mock.calls[0];
+		const updatedFilters = updatedQuery.builder.queryData[0].filters;
+		const [filterForServiceName] = updatedFilters.items;
+
+		expect(filterForServiceName.key.key).toBe(SERVICE_NAME_KEY);
+		expect(filterForServiceName.op).toBe('in');
+		expect(filterForServiceName.value).toEqual(['mq-kafka', 'otel-demo']);
+	});
 });

frontend/src/components/ResizeTable/ResizeTable.tsx

@@ -1,18 +1,13 @@
 /* eslint-disable react/jsx-props-no-spreading */
 
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Table, Tooltip } from 'antd';
+import { Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import cx from 'classnames';
-import {
-	ColumnTitleIcon,
-	ColumnTitleWrapper,
-} from 'container/OptionsMenu/styles';
 import { dragColumnParams } from 'hooks/useDragColumns/configs';
 import { getColumnWidth, RowData } from 'lib/query/createTableColumnsFromQuery';
 import { debounce, set } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import React, {
+import {
 	SyntheticEvent,
 	useCallback,
 	useEffect,
@@ -76,48 +71,20 @@ function ResizeTable({
 
 	const mergedColumns = useMemo(
 		() =>
-			columnsData.map((col, index) => {
-				const columnRecord = col as Record<string, unknown>;
-				const hasUnselectedConflict = columnRecord._hasUnselectedConflict === true;
-				const titleText = col?.title?.toString();
-
-				// Render tooltip icon when there's a conflict, regardless of drag functionality
-				// Only wrap in DragSpanStyle when drag is enabled
-				const tooltipIcon = hasUnselectedConflict ? (
-					<Tooltip title="The same column with a different type or context exists">
-						<ColumnTitleIcon>
-							<InfoCircleOutlined />
-						</ColumnTitleIcon>
-					</Tooltip>
-				) : null;
-
-				const titleWithWrapper = (
-					<ColumnTitleWrapper>
-						{titleText}
-						{tooltipIcon}
-					</ColumnTitleWrapper>
-				);
-
-				let titleElement: React.ReactNode = titleText;
-				if (hasUnselectedConflict || onDragColumn) {
-					if (onDragColumn) {
-						titleElement = (
-							<DragSpanStyle className="dragHandler">{titleWithWrapper}</DragSpanStyle>
-						);
-					} else {
-						titleElement = titleWithWrapper;
-					}
-				}
-
-				return {
-					...col,
-					title: titleElement,
-					onHeaderCell: (column: ColumnsType<unknown>[number]): unknown => ({
-						width: column.width,
-						onResize: handleResize(index),
-					}),
-				};
-			}) as ColumnsType<RowData>,
+			columnsData.map((col, index) => ({
+				...col,
+				...(onDragColumn && {
+					title: (
+						<DragSpanStyle className="dragHandler">
+							{col?.title?.toString() || ''}
+						</DragSpanStyle>
+					),
+				}),
+				onHeaderCell: (column: ColumnsType<unknown>[number]): unknown => ({
+					width: column.width,
+					onResize: handleResize(index),
+				}),
+			})) as ColumnsType<any>,
 		[columnsData, onDragColumn, handleResize],
 	);
 

frontend/src/components/ValueGraph/__tests__/ValueGraph.test.tsx

@@ -0,0 +1,205 @@
+import { screen } from '@testing-library/react';
+import { render } from 'tests/test-utils';
+
+import ValueGraph from '../index';
+import { getBackgroundColorAndThresholdCheck } from '../utils';
+
+// Mock the utils module
+jest.mock('../utils', () => ({
+	getBackgroundColorAndThresholdCheck: jest.fn(() => ({
+		threshold: {} as any,
+		isConflictingThresholds: false,
+	})),
+}));
+
+const mockGetBackgroundColorAndThresholdCheck = getBackgroundColorAndThresholdCheck as jest.MockedFunction<
+	typeof getBackgroundColorAndThresholdCheck
+>;
+
+const TEST_ID_VALUE_GRAPH_TEXT = 'value-graph-text';
+const TEST_ID_VALUE_GRAPH_PREFIX_UNIT = 'value-graph-prefix-unit';
+const TEST_ID_VALUE_GRAPH_SUFFIX_UNIT = 'value-graph-suffix-unit';
+
+describe('ValueGraph', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders the numeric value correctly', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="42" rawValue={42} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('42');
+	});
+
+	it('renders value with suffix unit', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="42ms" rawValue={42} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('42');
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_SUFFIX_UNIT)).toHaveTextContent('ms');
+	});
+
+	it('renders value with prefix unit', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="$100" rawValue={100} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('100');
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_PREFIX_UNIT)).toHaveTextContent('$');
+	});
+
+	it('renders value with both prefix and suffix units', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="$100USD" rawValue={100} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('100');
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_PREFIX_UNIT)).toHaveTextContent('$');
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_SUFFIX_UNIT)).toHaveTextContent('USD');
+	});
+
+	it('renders value with K suffix', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="1.5K" rawValue={1500} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1.5K');
+	});
+
+	it('applies text color when threshold format is Text', () => {
+		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
+			threshold: {
+				thresholdFormat: 'Text',
+				thresholdColor: 'red',
+			} as any,
+			isConflictingThresholds: false,
+		});
+
+		const { getByTestId } = render(
+			<ValueGraph value="42" rawValue={42} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveStyle({ color: 'red' });
+	});
+
+	it('applies background color when threshold format is Background', () => {
+		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
+			threshold: {
+				thresholdFormat: 'Background',
+				thresholdColor: 'blue',
+			} as any,
+			isConflictingThresholds: false,
+		});
+
+		const { container } = render(
+			<ValueGraph value="42" rawValue={42} thresholds={[]} />,
+		);
+
+		const containerElement = container.querySelector('.value-graph-container');
+		expect(containerElement).toHaveStyle({ backgroundColor: 'blue' });
+	});
+
+	it('displays conflicting thresholds indicator when multiple thresholds match', () => {
+		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
+			threshold: {
+				thresholdFormat: 'Text',
+				thresholdColor: 'red',
+			} as any,
+			isConflictingThresholds: true,
+		});
+
+		const { getByTestId } = render(
+			<ValueGraph value="42" rawValue={42} thresholds={[]} />,
+		);
+
+		expect(getByTestId('conflicting-thresholds')).toBeInTheDocument();
+	});
+
+	it('does not display conflicting thresholds indicator when no conflict', () => {
+		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
+			threshold: {} as any,
+			isConflictingThresholds: false,
+		});
+
+		render(<ValueGraph value="42" rawValue={42} thresholds={[]} />);
+
+		expect(
+			screen.queryByTestId('conflicting-thresholds'),
+		).not.toBeInTheDocument();
+	});
+
+	it('applies text color to units when threshold format is Text', () => {
+		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
+			threshold: {
+				thresholdFormat: 'Text',
+				thresholdColor: 'green',
+			} as any,
+			isConflictingThresholds: false,
+		});
+
+		render(<ValueGraph value="42ms" rawValue={42} thresholds={[]} />);
+
+		const unitElement = screen.getByText('ms');
+		expect(unitElement).toHaveStyle({ color: 'green' });
+	});
+
+	it('renders decimal values correctly', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="42.5" rawValue={42.5} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('42.5');
+	});
+
+	it('handles values with M suffix', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="1.2M" rawValue={1200000} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1.2M');
+	});
+
+	it('handles values with B suffix', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="2.3B" rawValue={2300000000} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('2.3B');
+	});
+
+	it('handles scientific notation values', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="1e-9" rawValue={1e-9} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1e-9');
+	});
+
+	it('handles scientific notation with suffix unit', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="1e-9%" rawValue={1e-9} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1e-9');
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_SUFFIX_UNIT)).toHaveTextContent('%');
+	});
+
+	it('handles scientific notation with uppercase E', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="1E-9" rawValue={1e-9} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1E-9');
+	});
+
+	it('handles scientific notation with positive exponent', () => {
+		const { getByTestId } = render(
+			<ValueGraph value="1e+9" rawValue={1e9} thresholds={[]} />,
+		);
+
+		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1e+9');
+	});
+});

frontend/src/components/ValueGraph/index.tsx

@@ -3,11 +3,39 @@ import './ValueGraph.styles.scss';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';
 
+function Unit({
+	type,
+	unit,
+	threshold,
+	fontSize,
+}: {
+	type: 'prefix' | 'suffix';
+	unit: string;
+	threshold: ThresholdProps;
+	fontSize: string;
+}): JSX.Element {
+	return (
+		<Typography.Text
+			className="value-graph-unit"
+			data-testid={`value-graph-${type}-unit`}
+			style={{
+				color:
+					threshold.thresholdFormat === 'Text'
+						? threshold.thresholdColor
+						: undefined,
+				fontSize: `calc(${fontSize} * 0.7)`,
+			}}
+		>
+			{unit}
+		</Typography.Text>
+	);
+}
+
 function ValueGraph({
 	value,
 	rawValue,
@@ -17,10 +45,16 @@ function ValueGraph({
 	const containerRef = useRef<HTMLDivElement>(null);
 	const [fontSize, setFontSize] = useState('2.5vw');
 
-	// Parse value to separate number and unit (assuming unit is at the end)
-	const matches = value.match(/([\d.]+[KMB]?)(.*)$/);
-	const numericValue = matches?.[1] || value;
-	const unit = matches?.[2]?.trim() || '';
+	const { numericValue, prefixUnit, suffixUnit } = useMemo(() => {
+		const matches = value.match(
+			/^([^\d.]*)?([\d.]+(?:[eE][+-]?[\d]+)?[KMB]?)([^\d.]*)?$/,
+		);
+		return {
+			numericValue: matches?.[2] || value,
+			prefixUnit: matches?.[1]?.trim() || '',
+			suffixUnit: matches?.[3]?.trim() || '',
+		};
+	}, [value]);
 
 	// Adjust font size based on container size
 	useEffect(() => {
@@ -65,8 +99,17 @@ function ValueGraph({
 			}}
 		>
 			<div className="value-text-container">
+				{prefixUnit && (
+					<Unit
+						type="prefix"
+						unit={prefixUnit}
+						threshold={threshold}
+						fontSize={fontSize}
+					/>
+				)}
 				<Typography.Text
 					className="value-graph-text"
+					data-testid="value-graph-text"
 					style={{
 						color:
 							threshold.thresholdFormat === 'Text'
@@ -77,19 +120,13 @@ function ValueGraph({
 				>
 					{numericValue}
 				</Typography.Text>
-				{unit && (
-					<Typography.Text
-						className="value-graph-unit"
-						style={{
-							color:
-								threshold.thresholdFormat === 'Text'
-									? threshold.thresholdColor
-									: undefined,
-							fontSize: `calc(${fontSize} * 0.7)`,
-						}}
-					>
-						{unit}
-					</Typography.Text>
+				{suffixUnit && (
+					<Unit
+						type="suffix"
+						unit={suffixUnit}
+						threshold={threshold}
+						fontSize={fontSize}
+					/>
 				)}
 			</div>
 			{isConflictingThresholds && (

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -0,0 +1,208 @@
+/**
+ * src/components/cmdKPalette/__test__/cmdkPalette.test.tsx
+ */
+import '@testing-library/jest-dom/extend-expect';
+
+// ---- Mocks (must run BEFORE importing the component) ----
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import { CmdKPalette } from '../cmdKPalette';
+
+const HOME_LABEL = 'Go to Home';
+
+beforeAll(() => {
+	Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+		configurable: true,
+		value: jest.fn(),
+	});
+});
+
+afterAll(() => {
+	// restore
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore
+	delete (HTMLElement.prototype as any).scrollIntoView;
+});
+
+// mock history.push / replace / go / location
+jest.mock('lib/history', () => {
+	const location = { pathname: '/', search: '', hash: '' };
+
+	const stack: { pathname: string; search: string }[] = [
+		{ pathname: '/', search: '' },
+	];
+
+	const push = jest.fn((path: string) => {
+		const [rawPath, rawQuery] = path.split('?');
+		const pathname = rawPath || '/';
+		const search = path.includes('?') ? `?${rawQuery || ''}` : '';
+
+		location.pathname = pathname;
+		location.search = search;
+
+		stack.push({ pathname, search });
+		return undefined;
+	});
+
+	const replace = jest.fn((path: string) => {
+		const [rawPath, rawQuery] = path.split('?');
+		const pathname = rawPath || '/';
+		const search = path.includes('?') ? `?${rawQuery || ''}` : '';
+
+		location.pathname = pathname;
+		location.search = search;
+
+		if (stack.length > 0) {
+			stack[stack.length - 1] = { pathname, search };
+		} else {
+			stack.push({ pathname, search });
+		}
+		return undefined;
+	});
+
+	const listen = jest.fn();
+	const go = jest.fn((n: number) => {
+		if (n < 0 && stack.length > 1) {
+			stack.pop();
+		}
+		const top = stack[stack.length - 1] || { pathname: '/', search: '' };
+		location.pathname = top.pathname;
+		location.search = top.search;
+	});
+
+	return {
+		push,
+		replace,
+		listen,
+		go,
+		location,
+		__stack: stack,
+	};
+});
+
+// Mock ResizeObserver for Jest/jsdom
+class ResizeObserver {
+	// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, class-methods-use-this
+	observe() {}
+
+	// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, class-methods-use-this
+	unobserve() {}
+
+	// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, class-methods-use-this
+	disconnect() {}
+}
+
+(global as any).ResizeObserver = ResizeObserver;
+
+// mock cmdK provider hook (open state + setter)
+const mockSetOpen = jest.fn();
+jest.mock('providers/cmdKProvider', (): unknown => ({
+	useCmdK: (): {
+		open: boolean;
+		setOpen: jest.Mock;
+		openCmdK: jest.Mock;
+		closeCmdK: jest.Mock;
+	} => ({
+		open: true,
+		setOpen: mockSetOpen,
+		openCmdK: jest.fn(),
+		closeCmdK: jest.fn(),
+	}),
+}));
+
+// mock notifications hook
+jest.mock('hooks/useNotifications', (): unknown => ({
+	useNotifications: (): { notifications: [] } => ({ notifications: [] }),
+}));
+
+// mock theme hook
+jest.mock('hooks/useDarkMode', (): unknown => ({
+	useThemeMode: (): {
+		setAutoSwitch: jest.Mock;
+		setTheme: jest.Mock;
+		theme: string;
+	} => ({
+		setAutoSwitch: jest.fn(),
+		setTheme: jest.fn(),
+		theme: 'dark',
+	}),
+}));
+
+// mock updateUserPreference API and react-query mutation
+jest.mock('api/v1/user/preferences/name/update', (): jest.Mock => jest.fn());
+jest.mock('react-query', (): unknown => {
+	const actual = jest.requireActual('react-query');
+	return {
+		...actual,
+		useMutation: (): { mutate: jest.Mock } => ({ mutate: jest.fn() }),
+	};
+});
+
+// mock other side-effecty modules
+jest.mock('api/common/logEvent', () => jest.fn());
+jest.mock('api/browser/localstorage/set', () => jest.fn());
+jest.mock('utils/error', () => ({ showErrorNotification: jest.fn() }));
+
+// ---- Tests ----
+describe('CmdKPalette', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	test('renders navigation and settings groups and items', () => {
+		render(<CmdKPalette userRole="ADMIN" />);
+
+		expect(screen.getByText('Navigation')).toBeInTheDocument();
+		expect(screen.getByText('Settings')).toBeInTheDocument();
+
+		expect(screen.getByText(HOME_LABEL)).toBeInTheDocument();
+		expect(screen.getByText('Go to Dashboards')).toBeInTheDocument();
+		expect(screen.getByText('Open Sidebar')).toBeInTheDocument();
+		expect(screen.getByText('Switch to Dark Mode')).toBeInTheDocument();
+	});
+
+	test('clicking a navigation item calls history.push with correct route', async () => {
+		render(<CmdKPalette userRole="ADMIN" />);
+
+		const homeItem = screen.getByText(HOME_LABEL);
+		await userEvent.click(homeItem);
+
+		expect(history.push).toHaveBeenCalledWith(ROUTES.HOME);
+	});
+
+	test('role-based filtering (basic smoke)', () => {
+		render(<CmdKPalette userRole="VIEWER" />);
+
+		// VIEWER still sees basic navigation items
+		expect(screen.getByText(HOME_LABEL)).toBeInTheDocument();
+	});
+
+	test('keyboard shortcut opens palette via setOpen', () => {
+		render(<CmdKPalette userRole="ADMIN" />);
+
+		const event = new KeyboardEvent('keydown', { key: 'k', ctrlKey: true });
+		window.dispatchEvent(event);
+
+		expect(mockSetOpen).toHaveBeenCalledWith(true);
+	});
+
+	test('items render with icons when provided', () => {
+		render(<CmdKPalette userRole="ADMIN" />);
+
+		const iconHolders = document.querySelectorAll('.cmd-item-icon');
+		expect(iconHolders.length).toBeGreaterThan(0);
+		expect(screen.getByText(HOME_LABEL)).toBeInTheDocument();
+	});
+
+	test('closing the palette via handleInvoke sets open to false', async () => {
+		render(<CmdKPalette userRole="ADMIN" />);
+
+		const dashItem = screen.getByText('Go to Dashboards');
+		await userEvent.click(dashItem);
+
+		// last call from handleInvoke should set open to false
+		expect(mockSetOpen).toHaveBeenCalledWith(false);
+	});
+});

frontend/src/components/cmdKPalette/cmdKPalette.scss

@@ -0,0 +1,55 @@
+/* Overlay stays below content */
+[data-slot='dialog-overlay'] {
+	z-index: 50;
+}
+
+/* Dialog content always above overlay */
+[data-slot='dialog-content'] {
+	position: fixed;
+	z-index: 60;
+}
+
+.cmdk-section-heading [cmdk-group-heading] {
+	text-transform: uppercase;
+	color: var(--bg-slate-100);
+}
+
+/* Hide scrollbar but keep scroll */
+.cmdk-list-scroll {
+	scrollbar-width: none; /* Firefox */
+}
+
+.cmdk-list-scroll::-webkit-scrollbar {
+	display: none; /* Chrome, Safari, Edge */
+}
+
+.cmdk-list-scroll {
+	-webkit-overflow-scrolling: touch;
+}
+
+.cmdk-input-wrapper {
+	margin-left: 8px;
+}
+
+.cmdk-item-light:hover {
+	cursor: pointer;
+	background-color: var(--bg-vanilla-200) !important;
+}
+
+.cmdk-item-light[data-selected='true'] {
+	background-color: var(--bg-vanilla-300) !important;
+	color: var(--bg-ink-500);
+}
+
+.cmdk-item {
+	cursor: pointer;
+}
+
+[cmdk-item] svg {
+	width: auto;
+	height: auto;
+}
+
+.cmd-item-icon {
+	margin-right: 8px;
+}

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -0,0 +1,336 @@
+import './cmdKPalette.scss';
+
+import {
+	CommandDialog,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandShortcut,
+} from '@signozhq/command';
+import setLocalStorageApi from 'api/browser/localstorage/set';
+import logEvent from 'api/common/logEvent';
+import updateUserPreference from 'api/v1/user/preferences/name/update';
+import { AxiosError } from 'axios';
+import ROUTES from 'constants/routes';
+import { USER_PREFERENCES } from 'constants/userPreferences';
+import { useThemeMode } from 'hooks/useDarkMode';
+import { THEME_MODE } from 'hooks/useDarkMode/constant';
+import { useNotifications } from 'hooks/useNotifications';
+import history from 'lib/history';
+import {
+	BellDot,
+	BugIcon,
+	DraftingCompass,
+	Expand,
+	HardDrive,
+	Home,
+	LayoutGrid,
+	ListMinus,
+	ScrollText,
+	Settings,
+} from 'lucide-react';
+import React, { useEffect } from 'react';
+import { useMutation } from 'react-query';
+import { UserPreference } from 'types/api/preferences/preference';
+import { showErrorNotification } from 'utils/error';
+
+import { useAppContext } from '../../providers/App/App';
+import { useCmdK } from '../../providers/cmdKProvider';
+
+type CmdAction = {
+	id: string;
+	name: string;
+	shortcut?: string[];
+	keywords?: string;
+	section?: string;
+	icon?: React.ReactNode;
+	roles?: UserRole[];
+	perform: () => void;
+};
+
+type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
+export function CmdKPalette({
+	userRole,
+}: {
+	userRole: UserRole;
+}): JSX.Element | null {
+	const { open, setOpen } = useCmdK();
+
+	const { updateUserPreferenceInContext } = useAppContext();
+	const { notifications } = useNotifications();
+	const { setAutoSwitch, setTheme, theme } = useThemeMode();
+
+	const { mutate: updateUserPreferenceMutation } = useMutation(
+		updateUserPreference,
+		{
+			onError: (error) => {
+				showErrorNotification(notifications, error as AxiosError);
+			},
+		},
+	);
+
+	// toggle palette with ⌘/Ctrl+K
+	function handleGlobalCmdK(
+		e: KeyboardEvent,
+		setOpen: React.Dispatch<React.SetStateAction<boolean>>,
+	): void {
+		if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+			e.preventDefault();
+			setOpen(true);
+		}
+	}
+
+	const cmdKEffect = (): void | (() => void) => {
+		const listener = (e: KeyboardEvent): void => {
+			handleGlobalCmdK(e, setOpen);
+		};
+
+		window.addEventListener('keydown', listener);
+
+		return (): void => {
+			window.removeEventListener('keydown', listener);
+			setOpen(false);
+		};
+	};
+
+	useEffect(cmdKEffect, [setOpen]);
+
+	function handleThemeChange(value: string): void {
+		logEvent('Account Settings: Theme Changed', { theme: value });
+		if (value === 'auto') {
+			setAutoSwitch(true);
+		} else {
+			setAutoSwitch(false);
+			setTheme(value);
+		}
+	}
+
+	function onClickHandler(key: string): void {
+		history.push(key);
+	}
+
+	function handleOpenSidebar(): void {
+		setLocalStorageApi(USER_PREFERENCES.SIDENAV_PINNED, 'true');
+		const save = { name: USER_PREFERENCES.SIDENAV_PINNED, value: true };
+		updateUserPreferenceInContext(save as UserPreference);
+		updateUserPreferenceMutation({
+			name: USER_PREFERENCES.SIDENAV_PINNED,
+			value: true,
+		});
+	}
+
+	function handleCloseSidebar(): void {
+		setLocalStorageApi(USER_PREFERENCES.SIDENAV_PINNED, 'false');
+		const save = { name: USER_PREFERENCES.SIDENAV_PINNED, value: false };
+		updateUserPreferenceInContext(save as UserPreference);
+		updateUserPreferenceMutation({
+			name: USER_PREFERENCES.SIDENAV_PINNED,
+			value: false,
+		});
+	}
+
+	const actions: CmdAction[] = [
+		{
+			id: 'home',
+			name: 'Go to Home',
+			shortcut: ['shift + h'],
+			keywords: 'home',
+			section: 'Navigation',
+			icon: <Home size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => onClickHandler(ROUTES.HOME),
+		},
+		{
+			id: 'dashboards',
+			name: 'Go to Dashboards',
+			shortcut: ['shift + d'],
+			keywords: 'dashboards',
+			section: 'Navigation',
+			icon: <LayoutGrid size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => onClickHandler(ROUTES.ALL_DASHBOARD),
+		},
+		{
+			id: 'services',
+			name: 'Go to Services',
+			shortcut: ['shift + s'],
+			keywords: 'services monitoring',
+			section: 'Navigation',
+			icon: <HardDrive size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => onClickHandler(ROUTES.APPLICATION),
+		},
+		{
+			id: 'traces',
+			name: 'Go to Traces',
+			shortcut: ['shift + t'],
+			keywords: 'traces',
+			section: 'Navigation',
+			icon: <DraftingCompass size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => onClickHandler(ROUTES.TRACES_EXPLORER),
+		},
+		{
+			id: 'logs',
+			name: 'Go to Logs',
+			shortcut: ['shift + l'],
+			keywords: 'logs',
+			section: 'Navigation',
+			icon: <ScrollText size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => onClickHandler(ROUTES.LOGS),
+		},
+		{
+			id: 'alerts',
+			name: 'Go to Alerts',
+			shortcut: ['shift + a'],
+			keywords: 'alerts',
+			section: 'Navigation',
+			icon: <BellDot size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => onClickHandler(ROUTES.LIST_ALL_ALERT),
+		},
+		{
+			id: 'exceptions',
+			name: 'Go to Exceptions',
+			shortcut: ['shift + e'],
+			keywords: 'exceptions errors',
+			section: 'Navigation',
+			icon: <BugIcon size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => onClickHandler(ROUTES.ALL_ERROR),
+		},
+		{
+			id: 'messaging-queues',
+			name: 'Go to Messaging Queues',
+			shortcut: ['shift + m'],
+			keywords: 'messaging queues mq',
+			section: 'Navigation',
+			icon: <ListMinus size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => onClickHandler(ROUTES.MESSAGING_QUEUES_OVERVIEW),
+		},
+		{
+			id: 'my-settings',
+			name: 'Go to Account Settings',
+			keywords: 'account settings',
+			section: 'Navigation',
+			icon: <Settings size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => onClickHandler(ROUTES.MY_SETTINGS),
+		},
+
+		// Settings
+		{
+			id: 'open-sidebar',
+			name: 'Open Sidebar',
+			keywords: 'sidebar navigation menu expand',
+			section: 'Settings',
+			icon: <Expand size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => handleOpenSidebar(),
+		},
+		{
+			id: 'collapse-sidebar',
+			name: 'Collapse Sidebar',
+			keywords: 'sidebar navigation menu collapse',
+			section: 'Settings',
+			icon: <Expand size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => handleCloseSidebar(),
+		},
+		{
+			id: 'dark-mode',
+			name: 'Switch to Dark Mode',
+			keywords: 'theme dark mode appearance',
+			section: 'Settings',
+			icon: <Expand size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => handleThemeChange(THEME_MODE.DARK),
+		},
+		{
+			id: 'light-mode',
+			name: 'Switch to Light Mode [Beta]',
+			keywords: 'theme light mode appearance',
+			section: 'Settings',
+			icon: <Expand size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => handleThemeChange(THEME_MODE.LIGHT),
+		},
+		{
+			id: 'system-theme',
+			name: 'Switch to System Theme',
+			keywords: 'system theme appearance',
+			section: 'Settings',
+			icon: <Expand size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'AUTHOR', 'VIEWER'],
+			perform: (): void => handleThemeChange(THEME_MODE.SYSTEM),
+		},
+	];
+
+	// RBAC filter: show action if no roles set OR current user role is included
+	const permitted = actions.filter(
+		(a) => !a.roles || a.roles.includes(userRole),
+	);
+
+	// group permitted actions by section
+	const grouped: [string, CmdAction[]][] = ((): [string, CmdAction[]][] => {
+		const map = new Map<string, CmdAction[]>();
+
+		permitted.forEach((a) => {
+			const section = a.section ?? 'Other';
+			const existing = map.get(section);
+
+			if (existing) {
+				existing.push(a);
+			} else {
+				map.set(section, [a]);
+			}
+		});
+
+		return Array.from(map.entries());
+	})();
+
+	const handleInvoke = (action: CmdAction): void => {
+		try {
+			action.perform();
+		} catch (e) {
+			console.error('Error invoking action', e);
+		} finally {
+			setOpen(false);
+		}
+	};
+
+	return (
+		<CommandDialog open={open} onOpenChange={setOpen} position="top" offset={110}>
+			<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
+			<CommandList className="cmdk-list-scroll">
+				<CommandEmpty>No results</CommandEmpty>
+				{grouped.map(([section, items]) => (
+					<CommandGroup
+						key={section}
+						heading={section}
+						className="cmdk-section-heading"
+					>
+						{items.map((it) => (
+							<CommandItem
+								key={it.id}
+								onSelect={(): void => handleInvoke(it)}
+								value={it.name}
+								className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
+							>
+								<span className="cmd-item-icon">{it.icon}</span>
+								{it.name}
+								{it.shortcut && it.shortcut.length > 0 && (
+									<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
+								)}
+							</CommandItem>
+						))}
+					</CommandGroup>
+				))}
+			</CommandList>
+		</CommandDialog>
+	);
+}

frontend/src/container/AppLayout/index.tsx

@@ -35,7 +35,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import useTabVisibility from 'hooks/useTabFocus';
-import { useKBar } from 'kbar';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
@@ -186,19 +185,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
-	const { query, disabled } = useKBar((state) => ({
-		disabled: state.disabled,
-	}));
-
-	// disable the kbar command palette when not logged in
-	useEffect(() => {
-		if (isLoggedIn) {
-			query.disable(false);
-		} else {
-			query.disable(true);
-		}
-	}, [isLoggedIn, query, disabled]);
-
 	const changelogForTenant = isCloudUserVal
 		? DeploymentType.CLOUD_ONLY
 		: DeploymentType.OSS_ONLY;

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -393,15 +393,21 @@ function ExplorerOptions({
 			backwardCompatibleOptions = omit(options, 'version');
 		}
 
+		// Use the correct default columns based on the current data source
+		const defaultColumns =
+			sourcepage === DataSource.TRACES
+				? defaultTraceSelectedColumns
+				: defaultLogsSelectedColumns;
+
 		if (extraData.selectColumns?.length) {
 			handleOptionsChange({
 				...backwardCompatibleOptions,
 				selectColumns: extraData.selectColumns,
 			});
-		} else if (!isEqual(defaultTraceSelectedColumns, options.selectColumns)) {
+		} else if (!isEqual(defaultColumns, options.selectColumns)) {
 			handleOptionsChange({
 				...backwardCompatibleOptions,
-				selectColumns: defaultTraceSelectedColumns,
+				selectColumns: defaultColumns,
 			});
 		}
 	};

frontend/src/container/GridCardLayout/WidgetHeader/__tests__/WidgetHeader.test.tsx

@@ -0,0 +1,469 @@
+import { render as rtlRender, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { RowData } from 'lib/query/createTableColumnsFromQuery';
+import { AppContext } from 'providers/App/App';
+import { IAppContext } from 'providers/App/types';
+import React, { MutableRefObject } from 'react';
+import { QueryClient, QueryClientProvider, UseQueryResult } from 'react-query';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { SuccessResponse, Warning } from 'types/api';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { ROLES } from 'types/roles';
+
+import { MenuItemKeys } from '../contants';
+import WidgetHeader from '../index';
+
+const TEST_WIDGET_TITLE = 'Test Widget';
+const TABLE_WIDGET_TITLE = 'Table Widget';
+const WIDGET_HEADER_SEARCH = 'widget-header-search';
+const WIDGET_HEADER_SEARCH_INPUT = 'widget-header-search-input';
+const TEST_WIDGET_TITLE_RESOLVED = 'Test Widget Title';
+
+const mockStore = configureStore([thunk]);
+const createMockStore = (): ReturnType<typeof mockStore> =>
+	mockStore({
+		app: {
+			role: 'ADMIN',
+			user: {
+				userId: 'test-user-id',
+				email: 'test@signoz.io',
+				name: 'TestUser',
+			},
+			isLoggedIn: true,
+			org: [],
+		},
+		globalTime: {
+			minTime: '2023-01-01T00:00:00Z',
+			maxTime: '2023-01-02T00:00:00Z',
+		},
+	});
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			refetchOnWindowFocus: false,
+			retry: false,
+		},
+	},
+});
+
+const createMockAppContext = (): Partial<IAppContext> => ({
+	user: {
+		accessJwt: '',
+		refreshJwt: '',
+		id: '',
+		email: '',
+		displayName: '',
+		createdAt: 0,
+		organization: '',
+		orgId: '',
+		role: 'ADMIN' as ROLES,
+	},
+});
+
+const render = (ui: React.ReactElement): ReturnType<typeof rtlRender> =>
+	rtlRender(
+		<MemoryRouter>
+			<QueryClientProvider client={queryClient}>
+				<Provider store={createMockStore()}>
+					<AppContext.Provider value={createMockAppContext() as IAppContext}>
+						{ui}
+					</AppContext.Provider>
+				</Provider>
+			</QueryClientProvider>
+		</MemoryRouter>,
+	);
+
+jest.mock('hooks/queryBuilder/useCreateAlerts', () => ({
+	__esModule: true,
+	default: jest.fn(() => jest.fn()),
+}));
+
+jest.mock('hooks/dashboard/useGetResolvedText', () => {
+	// eslint-disable-next-line sonarjs/no-duplicate-string
+	const TEST_WIDGET_TITLE_RESOLVED = 'Test Widget Title';
+	return {
+		__esModule: true,
+		default: jest.fn(() => ({
+			truncatedText: TEST_WIDGET_TITLE_RESOLVED,
+			fullText: TEST_WIDGET_TITLE_RESOLVED,
+		})),
+	};
+});
+
+jest.mock('lucide-react', () => ({
+	CircleX: (): JSX.Element => <svg data-testid="lucide-circle-x" />,
+	TriangleAlert: (): JSX.Element => <svg data-testid="lucide-triangle-alert" />,
+	X: (): JSX.Element => <svg data-testid="lucide-x" />,
+}));
+jest.mock('antd', () => ({
+	...jest.requireActual('antd'),
+	Spin: (): JSX.Element => <div data-testid="antd-spin" />,
+}));
+
+const mockWidget: Widgets = {
+	id: 'test-widget-id',
+	title: TEST_WIDGET_TITLE,
+	description: 'Test Description',
+	panelTypes: PANEL_TYPES.TIME_SERIES,
+	query: {
+		builder: {
+			queryData: [],
+			queryFormulas: [],
+			queryTraceOperator: [],
+		},
+		promql: [],
+		clickhouse_sql: [],
+		id: 'query-id',
+		queryType: 'builder' as EQueryType,
+	},
+	timePreferance: 'GLOBAL_TIME',
+	opacity: '',
+	nullZeroValues: '',
+	yAxisUnit: '',
+	fillSpans: false,
+	softMin: null,
+	softMax: null,
+	selectedLogFields: [],
+	selectedTracesFields: [],
+};
+
+const mockQueryResponse = ({
+	data: {
+		payload: {
+			data: {
+				result: [],
+				resultType: '',
+			},
+		},
+		statusCode: 200,
+		message: 'success',
+		error: null,
+	},
+	isLoading: false,
+	isError: false,
+	error: null,
+	isFetching: false,
+} as unknown) as UseQueryResult<
+	SuccessResponse<MetricRangePayloadProps, unknown> & {
+		warning?: Warning;
+	},
+	Error
+>;
+
+describe('WidgetHeader', () => {
+	const mockOnView = jest.fn();
+	const mockSetSearchTerm = jest.fn();
+	const tableProcessedDataRef: MutableRefObject<RowData[]> = {
+		current: [
+			{
+				timestamp: 1234567890,
+				key: 'key1',
+				col1: 'val1',
+				col2: 'val2',
+			},
+		],
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders widget header with title', () => {
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		expect(screen.getByText(TEST_WIDGET_TITLE_RESOLVED)).toBeInTheDocument();
+	});
+
+	it('returns null for empty widget', () => {
+		const emptyWidget = {
+			...mockWidget,
+			id: PANEL_TYPES.EMPTY_WIDGET,
+		};
+
+		const { container } = render(
+			<WidgetHeader
+				title="Empty Widget"
+				widget={emptyWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		expect(container.innerHTML).toBe('');
+	});
+
+	it('shows search input for table panels', async () => {
+		const tableWidget = {
+			...mockWidget,
+			panelTypes: PANEL_TYPES.TABLE,
+		};
+
+		render(
+			<WidgetHeader
+				title={TABLE_WIDGET_TITLE}
+				widget={tableWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		const searchIcon = screen.getByTestId(WIDGET_HEADER_SEARCH);
+		expect(searchIcon).toBeInTheDocument();
+
+		await userEvent.click(searchIcon);
+
+		expect(screen.getByTestId(WIDGET_HEADER_SEARCH_INPUT)).toBeInTheDocument();
+	});
+
+	it('handles search input changes and closing', async () => {
+		const tableWidget = {
+			...mockWidget,
+			panelTypes: PANEL_TYPES.TABLE,
+		};
+
+		render(
+			<WidgetHeader
+				title={TABLE_WIDGET_TITLE}
+				widget={tableWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		const searchIcon = screen.getByTestId(`${WIDGET_HEADER_SEARCH}`);
+		await userEvent.click(searchIcon);
+
+		const searchInput = screen.getByTestId(WIDGET_HEADER_SEARCH_INPUT);
+		await userEvent.type(searchInput, 'test search');
+		expect(mockSetSearchTerm).toHaveBeenCalledWith('test search');
+
+		const closeButton = screen
+			.getByTestId(WIDGET_HEADER_SEARCH_INPUT)
+			.parentElement?.querySelector('.search-header-icons');
+		if (closeButton) {
+			await userEvent.click(closeButton);
+			expect(mockSetSearchTerm).toHaveBeenCalledWith('');
+		}
+	});
+
+	it('shows error icon when query has error', () => {
+		const errorResponse = {
+			...mockQueryResponse,
+			isError: true as const,
+			error: { message: 'Test error' } as Error,
+			data: undefined,
+		} as UseQueryResult<
+			SuccessResponse<MetricRangePayloadProps, unknown> & {
+				warning?: Warning;
+			},
+			Error
+		>;
+
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={errorResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		// check if CircleX icon is rendered
+		const circleXIcon = screen.getByTestId('lucide-circle-x');
+		expect(circleXIcon).toBeInTheDocument();
+	});
+
+	it('shows warning icon when query has warning', () => {
+		const warningData = mockQueryResponse.data
+			? {
+					...mockQueryResponse.data,
+					warning: {
+						code: 'WARNING_CODE',
+						message: 'Test warning',
+						url: 'https://example.com',
+						warnings: [{ message: 'Test warning' }],
+					} as Warning,
+			  }
+			: undefined;
+
+		const warningResponse = {
+			...mockQueryResponse,
+			data: warningData,
+		} as UseQueryResult<
+			SuccessResponse<MetricRangePayloadProps, unknown> & {
+				warning?: Warning;
+			},
+			Error
+		>;
+
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={warningResponse}
+				isWarning
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		const triangleAlertIcon = screen.getByTestId('lucide-triangle-alert');
+		expect(triangleAlertIcon).toBeInTheDocument();
+	});
+
+	it('shows spinner when fetching response', () => {
+		const fetchingResponse = {
+			...mockQueryResponse,
+			isFetching: true,
+			isLoading: true,
+		} as UseQueryResult<
+			SuccessResponse<MetricRangePayloadProps, unknown> & {
+				warning?: Warning;
+			},
+			Error
+		>;
+
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={fetchingResponse}
+				isWarning={false}
+				isFetchingResponse
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		const antSpin = screen.getByTestId('antd-spin');
+		expect(antSpin).toBeInTheDocument();
+	});
+
+	it('renders menu options icon', () => {
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+				headerMenuList={[MenuItemKeys.View]}
+			/>,
+		);
+
+		const moreOptionsIcon = screen.getByTestId('widget-header-options');
+		expect(moreOptionsIcon).toBeInTheDocument();
+	});
+
+	it('shows search icon for table panels', () => {
+		const tableWidget = {
+			...mockWidget,
+			panelTypes: PANEL_TYPES.TABLE,
+		};
+
+		render(
+			<WidgetHeader
+				title={TABLE_WIDGET_TITLE}
+				widget={tableWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		const searchIcon = screen.getByTestId(WIDGET_HEADER_SEARCH);
+		expect(searchIcon).toBeInTheDocument();
+	});
+
+	it('does not show search icon for non-table panels', () => {
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+			/>,
+		);
+
+		const searchIcon = screen.queryByTestId(WIDGET_HEADER_SEARCH);
+		expect(searchIcon).not.toBeInTheDocument();
+	});
+
+	it('renders threshold when provided', () => {
+		const threshold = <div data-testid="threshold">Threshold Component</div>;
+
+		render(
+			<WidgetHeader
+				title={TEST_WIDGET_TITLE}
+				widget={mockWidget}
+				onView={mockOnView}
+				parentHover={false}
+				queryResponse={mockQueryResponse}
+				isWarning={false}
+				isFetchingResponse={false}
+				tableProcessedDataRef={tableProcessedDataRef}
+				setSearchTerm={mockSetSearchTerm}
+				threshold={threshold}
+			/>,
+		);
+
+		expect(screen.getByTestId('threshold')).toBeInTheDocument();
+	});
+});

frontend/src/container/GridCardLayout/WidgetHeader/index.tsx

@@ -35,6 +35,7 @@ import { SuccessResponse, Warning } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { buildAbsolutePath } from 'utils/app';
 
 import { errorTooltipPosition } from './config';
 import { MENUITEM_KEYS_VS_LABELS, MenuItemKeys } from './contants';
@@ -87,7 +88,10 @@ function WidgetHeader({
 			QueryParams.compositeQuery,
 			encodeURIComponent(JSON.stringify(widget.query)),
 		);
-		const generatedUrl = `${window.location.pathname}/new?${urlQuery}`;
+		const generatedUrl = buildAbsolutePath({
+			relativePath: 'new',
+			urlQueryString: urlQuery.toString(),
+		});
 		safeNavigate(generatedUrl);
 	}, [safeNavigate, urlQuery, widget.id, widget.panelTypes, widget.query]);
 
@@ -240,6 +244,7 @@ function WidgetHeader({
 							onClick={(e): void => {
 								e.stopPropagation();
 								e.preventDefault();
+								setSearchTerm('');
 								setShowGlobalSearch(false);
 							}}
 							className="search-header-icons"

frontend/src/container/LogExplorerQuerySection/LogExplorerQuerySection.test.tsx

@@ -0,0 +1,366 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
+import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+import { cleanup, render, screen, waitFor } from 'tests/test-utils';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query, QueryState } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
+import { explorerViewToPanelType } from 'utils/explorerUtils';
+
+import LogExplorerQuerySection from './index';
+
+const CM_EDITOR_SELECTOR = '.cm-editor .cm-content';
+const QUERY_AGGREGATION_TEST_ID = 'query-aggregation-container';
+const QUERY_ADDON_TEST_ID = 'query-add-ons';
+
+// Mock DOM APIs that CodeMirror needs
+beforeAll(() => {
+	// Mock getClientRects and getBoundingClientRect for Range objects
+	const mockRect: DOMRect = {
+		width: 100,
+		height: 20,
+		top: 0,
+		left: 0,
+		right: 100,
+		bottom: 20,
+		x: 0,
+		y: 0,
+		toJSON: (): DOMRect => mockRect,
+	} as DOMRect;
+
+	// Create a minimal Range mock with only what CodeMirror actually uses
+	const createMockRange = (): Range => {
+		let startContainer: Node = document.createTextNode('');
+		let endContainer: Node = document.createTextNode('');
+		let startOffset = 0;
+		let endOffset = 0;
+
+		const rectList = {
+			length: 1,
+			item: (index: number): DOMRect | null => (index === 0 ? mockRect : null),
+			0: mockRect,
+		};
+
+		const mockRange = {
+			// CodeMirror uses these for text measurement
+			getClientRects: (): DOMRectList => (rectList as unknown) as DOMRectList,
+			getBoundingClientRect: (): DOMRect => mockRect,
+			// CodeMirror calls these to set up text ranges
+			setStart: (node: Node, offset: number): void => {
+				startContainer = node;
+				startOffset = offset;
+			},
+			setEnd: (node: Node, offset: number): void => {
+				endContainer = node;
+				endOffset = offset;
+			},
+			// Minimal Range properties (TypeScript requires these)
+			get startContainer(): Node {
+				return startContainer;
+			},
+			get endContainer(): Node {
+				return endContainer;
+			},
+			get startOffset(): number {
+				return startOffset;
+			},
+			get endOffset(): number {
+				return endOffset;
+			},
+			get collapsed(): boolean {
+				return startContainer === endContainer && startOffset === endOffset;
+			},
+			commonAncestorContainer: document.body,
+		};
+		return (mockRange as unknown) as Range;
+	};
+
+	// Mock document.createRange to return a new Range instance each time
+	document.createRange = (): Range => createMockRange();
+
+	// Mock getBoundingClientRect for elements
+	Element.prototype.getBoundingClientRect = (): DOMRect => mockRect;
+});
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: (): { selectedDashboard: undefined } => ({
+		selectedDashboard: undefined,
+	}),
+}));
+
+jest.mock('api/querySuggestions/getKeySuggestions', () => ({
+	getKeySuggestions: jest.fn().mockResolvedValue({
+		data: {
+			data: { keys: {} },
+		},
+	}),
+}));
+
+jest.mock('api/querySuggestions/getValueSuggestion', () => ({
+	getValueSuggestions: jest.fn().mockResolvedValue({
+		data: { data: { values: { stringValues: [], numberValues: [] } } },
+	}),
+}));
+
+// Mock the hooks
+jest.mock('hooks/queryBuilder/useGetPanelTypesQueryParam');
+jest.mock('hooks/queryBuilder/useShareBuilderUrl');
+
+const mockUseGetPanelTypesQueryParam = jest.mocked(useGetPanelTypesQueryParam);
+const mockUseShareBuilderUrl = jest.mocked(useShareBuilderUrl);
+
+const mockUpdateAllQueriesOperators = jest.fn() as jest.MockedFunction<
+	(query: Query, panelType: PANEL_TYPES, dataSource: DataSource) => Query
+>;
+
+const mockResetQuery = jest.fn() as jest.MockedFunction<
+	(newCurrentQuery?: QueryState) => void
+>;
+
+const mockRedirectWithQueryBuilderData = jest.fn() as jest.MockedFunction<
+	(query: Query) => void
+>;
+
+// Create a mock query that we'll use to verify persistence
+const createMockQuery = (filterExpression?: string): Query => ({
+	id: 'test-query-id',
+	queryType: EQueryType.QUERY_BUILDER,
+	builder: {
+		queryData: [
+			{
+				aggregateAttribute: {
+					id: 'body--string----false',
+					dataType: DataTypes.String,
+					key: 'body',
+					type: '',
+				},
+				aggregateOperator: 'count',
+				dataSource: DataSource.LOGS,
+				disabled: false,
+				expression: 'A',
+				filters: {
+					items: [],
+					op: 'AND',
+				},
+				filter: filterExpression
+					? {
+							expression: filterExpression,
+					  }
+					: undefined,
+				functions: [],
+				groupBy: [
+					{
+						key: 'cloud.account.id',
+						type: 'tag',
+					},
+				],
+				having: [],
+				legend: '',
+				limit: null,
+				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+				pageSize: 0,
+				queryName: 'A',
+				reduceTo: 'avg',
+				stepInterval: 60,
+			},
+		],
+		queryFormulas: [],
+		queryTraceOperator: [],
+	},
+	clickhouse_sql: [],
+	promql: [],
+});
+
+// Helper function to verify CodeMirror content
+const verifyCodeMirrorContent = async (
+	expectedFilterExpression: string,
+): Promise<void> => {
+	await waitFor(
+		() => {
+			const editorContent = document.querySelector(
+				CM_EDITOR_SELECTOR,
+			) as HTMLElement;
+			expect(editorContent).toBeInTheDocument();
+			const textContent = editorContent.textContent || '';
+			expect(textContent).toBe(expectedFilterExpression);
+		},
+		{ timeout: 3000 },
+	);
+};
+
+const VIEWS_TO_TEST = [
+	ExplorerViews.LIST,
+	ExplorerViews.TIMESERIES,
+	ExplorerViews.TABLE,
+];
+
+describe('LogExplorerQuerySection', () => {
+	let mockQuery: Query;
+	let mockQueryBuilderContext: Partial<QueryBuilderContextType>;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+
+		mockQuery = createMockQuery();
+
+		// Mock the return value of updateAllQueriesOperators to return the same query
+		mockUpdateAllQueriesOperators.mockReturnValue(mockQuery);
+
+		// Setup query builder context mock
+		mockQueryBuilderContext = {
+			currentQuery: mockQuery,
+			updateAllQueriesOperators: mockUpdateAllQueriesOperators,
+			resetQuery: mockResetQuery,
+			redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
+			panelType: PANEL_TYPES.LIST,
+			initialDataSource: DataSource.LOGS,
+			addNewBuilderQuery: jest.fn() as jest.MockedFunction<() => void>,
+			addNewFormula: jest.fn() as jest.MockedFunction<() => void>,
+			handleSetConfig: jest.fn() as jest.MockedFunction<
+				(panelType: PANEL_TYPES, dataSource: DataSource | null) => void
+			>,
+			addTraceOperator: jest.fn() as jest.MockedFunction<() => void>,
+		};
+
+		// Mock useGetPanelTypesQueryParam
+		mockUseGetPanelTypesQueryParam.mockReturnValue(PANEL_TYPES.LIST);
+
+		// Mock useShareBuilderUrl
+		mockUseShareBuilderUrl.mockImplementation(() => {});
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should maintain query state across multiple view changes', () => {
+		const { rerender } = render(
+			<LogExplorerQuerySection selectedView={ExplorerViews.LIST} />,
+			undefined,
+			{
+				queryBuilderOverrides: mockQueryBuilderContext as QueryBuilderContextType,
+			},
+		);
+
+		const initialQuery = mockQueryBuilderContext.currentQuery;
+
+		VIEWS_TO_TEST.forEach((view) => {
+			rerender(<LogExplorerQuerySection selectedView={view} />);
+			expect(mockQueryBuilderContext.currentQuery).toEqual(initialQuery);
+		});
+	});
+
+	it('should persist filter expressions across view changes', async () => {
+		// Test with a more complex filter expression
+		const complexFilter =
+			"(service.name = 'api-gateway' OR service.name = 'backend') AND http.status_code IN [500, 502, 503] AND NOT error = 'timeout'";
+		const queryWithComplexFilter = createMockQuery(complexFilter);
+
+		const contextWithComplexFilter: Partial<QueryBuilderContextType> = {
+			...mockQueryBuilderContext,
+			currentQuery: queryWithComplexFilter,
+		};
+
+		const { rerender } = render(
+			<LogExplorerQuerySection selectedView={ExplorerViews.LIST} />,
+			undefined,
+			{
+				queryBuilderOverrides: contextWithComplexFilter as QueryBuilderContextType,
+			},
+		);
+
+		VIEWS_TO_TEST.forEach(async (view) => {
+			rerender(<LogExplorerQuerySection selectedView={view} />);
+			await verifyCodeMirrorContent(complexFilter);
+		});
+	});
+
+	it('should render QueryAggregation and QueryAddOns when switching from LIST to TIMESERIES or TABLE view', async () => {
+		// Helper function to verify components are rendered
+		const verifyComponentsRendered = async (): Promise<void> => {
+			await waitFor(
+				() => {
+					expect(screen.getByTestId(QUERY_AGGREGATION_TEST_ID)).toBeInTheDocument();
+				},
+				{ timeout: 3000 },
+			);
+			await waitFor(
+				() => {
+					expect(screen.getByTestId(QUERY_ADDON_TEST_ID)).toBeInTheDocument();
+				},
+				{ timeout: 3000 },
+			);
+		};
+
+		// Start with LIST view - QueryAggregation and QueryAddOns should NOT be rendered
+		mockUseGetPanelTypesQueryParam.mockReturnValue(PANEL_TYPES.LIST);
+		const contextWithList: Partial<QueryBuilderContextType> = {
+			...mockQueryBuilderContext,
+			panelType: PANEL_TYPES.LIST,
+		};
+
+		render(
+			<LogExplorerQuerySection selectedView={ExplorerViews.LIST} />,
+			undefined,
+			{
+				queryBuilderOverrides: contextWithList as QueryBuilderContextType,
+			},
+		);
+
+		// Verify QueryAggregation is NOT rendered in LIST view
+		expect(
+			screen.queryByTestId(QUERY_AGGREGATION_TEST_ID),
+		).not.toBeInTheDocument();
+
+		// Verify QueryAddOns is NOT rendered in LIST view (check for one of the add-on tabs)
+		expect(screen.queryByTestId(QUERY_ADDON_TEST_ID)).not.toBeInTheDocument();
+
+		cleanup();
+
+		// Switch to TIMESERIES view
+		const timeseriesPanelType = explorerViewToPanelType[ExplorerViews.TIMESERIES];
+		mockUseGetPanelTypesQueryParam.mockReturnValue(timeseriesPanelType);
+		const contextWithTimeseries: Partial<QueryBuilderContextType> = {
+			...mockQueryBuilderContext,
+			panelType: timeseriesPanelType,
+		};
+
+		render(
+			<LogExplorerQuerySection selectedView={ExplorerViews.TIMESERIES} />,
+			undefined,
+			{
+				queryBuilderOverrides: contextWithTimeseries as QueryBuilderContextType,
+			},
+		);
+
+		// Verify QueryAggregation and QueryAddOns are rendered
+		await verifyComponentsRendered();
+
+		cleanup();
+
+		// Switch to TABLE view
+		const tablePanelType = explorerViewToPanelType[ExplorerViews.TABLE];
+		mockUseGetPanelTypesQueryParam.mockReturnValue(tablePanelType);
+		const contextWithTable: Partial<QueryBuilderContextType> = {
+			...mockQueryBuilderContext,
+			panelType: tablePanelType,
+		};
+
+		render(
+			<LogExplorerQuerySection selectedView={ExplorerViews.TABLE} />,
+			undefined,
+			{
+				queryBuilderOverrides: contextWithTable as QueryBuilderContextType,
+			},
+		);
+
+		// Verify QueryAggregation and QueryAddOns are still rendered in TABLE view
+		await verifyComponentsRendered();
+	});
+});

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -1,14 +1,8 @@
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tooltip } from 'antd';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import { useTableView } from 'components/Logs/TableView/useTableView';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import {
-	ColumnTitleIcon,
-	ColumnTitleWrapper,
-} from 'container/OptionsMenu/styles';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -133,12 +127,6 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 						.filter((column) => column.key)
 						.map((column) => {
 							const isDragColumn = column.key !== 'expand';
-							const columnRecord = column as Record<string, unknown>;
-							const hasUnselectedConflict =
-								columnRecord._hasUnselectedConflict === true;
-							const titleText = (column.title as string).replace(/^\w/, (c) =>
-								c.toUpperCase(),
-							);
 
 							return (
 								<TableHeaderCellStyled
@@ -151,16 +139,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 									{...(isDragColumn && { className: `dragHandler ${column.key}` })}
 									columnKey={column.key as string}
 								>
-									<ColumnTitleWrapper>
-										{titleText}
-										{hasUnselectedConflict && (
-											<Tooltip title="The same column with a different type or context exists">
-												<ColumnTitleIcon>
-													<InfoCircleOutlined />
-												</ColumnTitleIcon>
-											</Tooltip>
-										)}
-									</ColumnTitleWrapper>
+									{(column.title as string).replace(/^\w/, (c) => c.toUpperCase())}
 								</TableHeaderCellStyled>
 							);
 						})}

frontend/src/container/LogsExplorerList/index.tsx

@@ -60,7 +60,7 @@ function LogsExplorerList({
 		onSetActiveLog,
 	} = useActiveLog();
 
-	const { options, config } = useOptionsMenu({
+	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator:
@@ -147,7 +147,6 @@ function LogsExplorerList({
 						fontSize: options.fontSize,
 						appendTo: 'end',
 						activeLogIndex,
-						allAvailableKeys: config.addColumn?.allAvailableKeys,
 					}}
 					infitiyTableProps={{ onEndReached }}
 				/>
@@ -196,7 +195,6 @@ function LogsExplorerList({
 		onEndReached,
 		getItemContent,
 		selectedFields,
-		config.addColumn?.allAvailableKeys,
 	]);
 
 	const isTraceToLogsNavigation = useMemo(() => {

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -7,11 +7,9 @@ import { ResizeTable } from 'components/ResizeTable';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import Controls from 'container/Controls';
-import { extractTelemetryFieldKeys } from 'container/OptionsMenu/utils';
 import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
 import { tableStyles } from 'container/TracesExplorer/ListView/styles';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import { useLogsData } from 'hooks/useLogsData';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { FlatLogData } from 'lib/logs/flatLogData';
@@ -29,7 +27,6 @@ import { UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
 
 import { getLogPanelColumnsList } from './utils';
 
@@ -62,31 +59,14 @@ function LogsPanelComponent({
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
-	// Fetch available keys to detect variants
-
-	const { data: keysData } = useGetQueryKeySuggestions(
-		{
-			searchText: '',
-			signal: DataSource.LOGS,
-		},
-		{
-			queryKey: [DataSource.LOGS, LogsAggregatorOperator.NOOP, ''],
-		},
-	);
-
-	// Extract all available keys from API response
-	const allAvailableKeys = useMemo(() => extractTelemetryFieldKeys(keysData), [
-		keysData,
-	]);
-
 	const columns = useMemo(
 		() =>
 			getLogPanelColumnsList(
 				widget.selectedLogFields,
 				formatTimezoneAdjustedTimestamp,
-				allAvailableKeys,
 			),
-		[widget.selectedLogFields, formatTimezoneAdjustedTimestamp, allAvailableKeys],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[widget.selectedLogFields],
 	);
 
 	const dataLength =

frontend/src/container/LogsPanelTable/__tests__/LogsPanelTable.headers.test.tsx

@@ -1,107 +0,0 @@
-import { mockAllAvailableKeys } from 'container/OptionsMenu/__tests__/mockData';
-import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import { renderColumnHeader } from 'tests/columnHeaderHelpers';
-import { IField } from 'types/api/logs/fields';
-
-import { getLogPanelColumnsList } from '../utils';
-
-const COLUMN_UNDEFINED_ERROR = 'statusCodeColumn is undefined';
-
-// Mock the timezone formatter
-const mockFormatTimezoneAdjustedTimestamp = jest.fn(
-	(input: TimestampInput): string => {
-		if (typeof input === 'string') {
-			return new Date(input).toISOString();
-		}
-		if (typeof input === 'number') {
-			return new Date(input / 1e6).toISOString();
-		}
-		return new Date(input).toISOString();
-	},
-);
-
-describe('getLogPanelColumnsList - Column Headers', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('shows tooltip icon when conflicting variant exists in allAvailableKeys', () => {
-		// Even with single variant selected, tooltip should appear if conflicting variant exists
-		const selectedLogFields: IField[] = [
-			{
-				// eslint-disable-next-line sonarjs/no-duplicate-string
-				name: 'http.status_code',
-				dataType: 'string',
-				type: 'attribute',
-			} as IField,
-		];
-
-		const columns = getLogPanelColumnsList(
-			selectedLogFields,
-			mockFormatTimezoneAdjustedTimestamp,
-			mockAllAvailableKeys, // Contains number variant
-		);
-
-		const statusCodeColumn = columns.find(
-			(col) => 'dataIndex' in col && col.dataIndex === 'http.status_code',
-		);
-
-		expect(statusCodeColumn).toBeDefined();
-		expect(statusCodeColumn?.title).toBeDefined();
-
-		// Verify that _hasUnselectedConflict metadata is set correctly
-		const columnRecord = statusCodeColumn as Record<string, unknown>;
-		expect(columnRecord._hasUnselectedConflict).toBe(true);
-
-		if (!statusCodeColumn) {
-			throw new Error(COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(statusCodeColumn);
-		expect(container.textContent).toContain('http.status_code (string)');
-
-		// Tooltip icon should appear
-		// eslint-disable-next-line sonarjs/no-duplicate-string
-		const tooltipIcon = container.querySelector('.anticon-info-circle');
-		expect(tooltipIcon).toBeInTheDocument();
-	});
-
-	it('hides tooltip icon when all conflicting variants are selected', () => {
-		const selectedLogFields: IField[] = [
-			{
-				name: 'http.status_code',
-				dataType: 'string',
-				type: 'attribute',
-			} as IField,
-			{
-				name: 'http.status_code',
-				dataType: 'number',
-				type: 'attribute',
-			} as IField,
-		];
-
-		const columns = getLogPanelColumnsList(
-			selectedLogFields,
-			mockFormatTimezoneAdjustedTimestamp,
-			mockAllAvailableKeys,
-		);
-
-		const statusCodeColumn = columns.find(
-			(col) => 'dataIndex' in col && col.dataIndex === 'http.status_code',
-		);
-
-		expect(statusCodeColumn).toBeDefined();
-
-		// Verify that _hasUnselectedConflict metadata is NOT set when all variants are selected
-		const columnRecord = statusCodeColumn as Record<string, unknown>;
-		expect(columnRecord._hasUnselectedConflict).toBeUndefined();
-
-		if (!statusCodeColumn) {
-			throw new Error(COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(statusCodeColumn);
-		const tooltipIcon = container.querySelector('.anticon-info-circle');
-		expect(tooltipIcon).not.toBeInTheDocument();
-	});
-});

frontend/src/container/LogsPanelTable/utils.tsx

@@ -1,12 +1,5 @@
 import { ColumnsType } from 'antd/es/table';
 import { Typography } from 'antd/lib';
-import { TelemetryFieldKey } from 'api/v5/v5';
-import {
-	getColumnTitleWithTooltip,
-	getFieldVariantsByName,
-	getUniqueColumnKey,
-	hasMultipleVariants,
-} from 'container/OptionsMenu/utils';
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
 // import Typography from 'antd/es/typography/Typography';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
@@ -20,35 +13,17 @@ export const getLogPanelColumnsList = (
 		input: TimestampInput,
 		format?: string,
 	) => string,
-	allAvailableKeys?: TelemetryFieldKey[],
 ): ColumnsType<RowData> => {
 	const initialColumns: ColumnsType<RowData> = [];
 
-	// Group fields by name to analyze variants
-	const fieldVariantsByName = getFieldVariantsByName(selectedLogFields || []);
-
 	const columns: ColumnsType<RowData> =
 		selectedLogFields?.map((field: IField) => {
 			const { name } = field;
-			const hasVariants = hasMultipleVariants(
-				name,
-				selectedLogFields || [],
-				allAvailableKeys,
-			);
-			const variants = fieldVariantsByName[name] || [];
-			const { title, hasUnselectedConflict } = getColumnTitleWithTooltip(
-				field,
-				hasVariants,
-				variants,
-				selectedLogFields || [],
-				allAvailableKeys,
-			);
 
 			return {
-				title,
+				title: name,
 				dataIndex: name,
-				key: getUniqueColumnKey(field),
-				...(hasUnselectedConflict && { _hasUnselectedConflict: true }),
+				key: name,
 				width: name === 'body' ? 350 : 100,
 				render: (value: ReactNode): JSX.Element => {
 					if (name === 'timestamp') {

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

@@ -1,27 +1,16 @@
 import { Checkbox, Empty } from 'antd';
-import { TelemetryFieldKey } from 'api/v5/v5';
 import { AxiosResponse } from 'axios';
-import FieldVariantBadges from 'components/FieldVariantBadges/FieldVariantBadges';
 import Spinner from 'components/Spinner';
 import { EXCLUDED_COLUMNS } from 'container/OptionsMenu/constants';
-import {
-	getUniqueColumnKey,
-	getVariantCounts,
-} from 'container/OptionsMenu/utils';
-import {
-	QueryKeyDataSuggestionsProps,
-	QueryKeySuggestionsResponseProps,
-} from 'types/api/querySuggestions/types';
+import { QueryKeySuggestionsResponseProps } from 'types/api/querySuggestions/types';
 import { DataSource } from 'types/common/queryBuilder';
 
 type ExplorerAttributeColumnsProps = {
 	isLoading: boolean;
 	data: AxiosResponse<QueryKeySuggestionsResponseProps> | undefined;
 	searchText: string;
-	isAttributeKeySelected: (
-		attributeKey: QueryKeyDataSuggestionsProps,
-	) => boolean;
-	handleCheckboxChange: (attributeKey: QueryKeyDataSuggestionsProps) => void;
+	isAttributeKeySelected: (key: string) => boolean;
+	handleCheckboxChange: (key: string) => void;
 	dataSource: DataSource;
 };
 
@@ -49,12 +38,6 @@ function ExplorerAttributeColumns({
 					attributeKey.name.toLowerCase().includes(searchText.toLowerCase()) &&
 					!EXCLUDED_COLUMNS[dataSource].includes(attributeKey.name),
 			) || [];
-
-	// Detect which column names have multiple variants
-	const nameCounts = getVariantCounts(
-		filteredAttributeKeys as TelemetryFieldKey[],
-	);
-
 	if (filteredAttributeKeys.length === 0) {
 		return (
 			<div className="attribute-columns">
@@ -65,26 +48,16 @@ function ExplorerAttributeColumns({
 
 	return (
 		<div className="attribute-columns">
-			{filteredAttributeKeys.map((attributeKey) => {
-				const hasVariants = nameCounts[attributeKey.name] > 1;
-				return (
-					<Checkbox
-						checked={isAttributeKeySelected(attributeKey)}
-						onChange={(): void => handleCheckboxChange(attributeKey)}
-						key={getUniqueColumnKey(attributeKey)}
-					>
-						<span className="attribute-column-label-wrapper">
-							<span>{attributeKey.name}</span>
-							{hasVariants && (
-								<FieldVariantBadges
-									fieldDataType={attributeKey.fieldDataType}
-									fieldContext={attributeKey.fieldContext}
-								/>
-							)}
-						</span>
-					</Checkbox>
-				);
-			})}
+			{filteredAttributeKeys.map((attributeKey: any) => (
+				<Checkbox
+					checked={isAttributeKeySelected(attributeKey.name)}
+					onChange={(): void => handleCheckboxChange(attributeKey.name)}
+					style={{ padding: 0 }}
+					key={attributeKey.name}
+				>
+					{attributeKey.name}
+				</Checkbox>
+			))}
 		</div>
 	);
 }

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.styles.scss

@@ -60,13 +60,6 @@
 					font-family: Inter;
 					font-size: 12px;
 					cursor: grab;
-
-					.column-name-wrapper,
-					.badges-container {
-						display: flex;
-						align-items: center;
-						gap: 4px;
-					}
 				}
 
 				.lucide-trash2 {
@@ -121,16 +114,6 @@
 				flex-direction: column;
 				height: 160px;
 				overflow: scroll;
-
-				.ant-checkbox-wrapper {
-					padding: 0 !important;
-
-					.attribute-column-label-wrapper {
-						display: flex;
-						align-items: center;
-						gap: 8px;
-					}
-				}
 			}
 
 			.attribute-columns::-webkit-scrollbar {

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

@@ -6,13 +6,8 @@ import './ExplorerColumnsRenderer.styles.scss';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Divider, Dropdown, Input, Tooltip, Typography } from 'antd';
 import { MenuProps } from 'antd/lib';
-import { FieldDataType, TelemetryFieldKey } from 'api/v5/v5';
-import FieldVariantBadges from 'components/FieldVariantBadges/FieldVariantBadges';
+import { FieldDataType } from 'api/v5/v5';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import {
-	getUniqueColumnKey,
-	getVariantCounts,
-} from 'container/OptionsMenu/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -31,7 +26,6 @@ import {
 	Droppable,
 	DropResult,
 } from 'react-beautiful-dnd';
-import { IField } from 'types/api/logs/fields';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { WidgetGraphProps } from '../types';
@@ -88,87 +82,64 @@ function ExplorerColumnsRenderer({
 		},
 	);
 
-	const isAttributeKeySelected = (attribute: any): boolean => {
-		const uniqueKey = getUniqueColumnKey(attribute);
-
+	const isAttributeKeySelected = (key: string): boolean => {
 		if (initialDataSource === DataSource.LOGS && selectedLogFields) {
-			return selectedLogFields.some(
-				(field) => getUniqueColumnKey(field) === uniqueKey,
-			);
+			return selectedLogFields.some((field) => field.name === key);
 		}
 		if (initialDataSource === DataSource.TRACES && selectedTracesFields) {
-			return selectedTracesFields.some(
-				(field) => getUniqueColumnKey(field) === uniqueKey,
-			);
+			return selectedTracesFields.some((field) => field.name === key);
 		}
 		return false;
 	};
 
-	const handleCheckboxChange = (attribute: any): void => {
-		const uniqueKey = getUniqueColumnKey(attribute);
-
+	const handleCheckboxChange = (key: string): void => {
 		if (
 			initialDataSource === DataSource.LOGS &&
 			setSelectedLogFields !== undefined
 		) {
 			if (selectedLogFields) {
-				if (isAttributeKeySelected(attribute)) {
+				if (isAttributeKeySelected(key)) {
 					setSelectedLogFields(
-						selectedLogFields.filter(
-							(field) => getUniqueColumnKey(field) !== uniqueKey,
-						),
+						selectedLogFields.filter((field) => field.name !== key),
 					);
 				} else {
 					setSelectedLogFields([
 						...selectedLogFields,
-						{
-							name: attribute.name,
-							dataType: attribute.fieldDataType || 'string',
-							type: attribute.fieldContext || '',
-							fieldDataType: attribute.fieldDataType || 'string',
-							fieldContext: attribute.fieldContext || '',
-						} as IField & { fieldDataType: string; fieldContext: string },
+						{ dataType: 'string', name: key, type: '' },
 					]);
 				}
 			} else {
-				setSelectedLogFields([
-					{
-						name: attribute.name,
-						dataType: attribute.fieldDataType || 'string',
-						type: attribute.fieldContext || '',
-						fieldDataType: attribute.fieldDataType || 'string',
-						fieldContext: attribute.fieldContext || '',
-					} as IField & { fieldDataType: string; fieldContext: string },
-				]);
+				setSelectedLogFields([{ dataType: 'string', name: key, type: '' }]);
 			}
 		} else if (
 			initialDataSource === DataSource.TRACES &&
 			setSelectedTracesFields !== undefined
 		) {
+			const selectedField = Object.values(data?.data?.data?.keys || {})
+				?.flat()
+				?.find((attributeKey) => attributeKey.name === key);
+
 			if (selectedTracesFields) {
-				if (isAttributeKeySelected(attribute)) {
+				if (isAttributeKeySelected(key)) {
 					setSelectedTracesFields(
-						selectedTracesFields.filter(
-							(field) => getUniqueColumnKey(field) !== uniqueKey,
-						),
+						selectedTracesFields.filter((field) => field.name !== key),
 					);
-				} else {
+				} else if (selectedField) {
 					setSelectedTracesFields([
 						...selectedTracesFields,
 						{
-							...attribute,
-							fieldDataType: attribute.fieldDataType as FieldDataType,
+							...selectedField,
+							fieldDataType: selectedField.fieldDataType as FieldDataType,
 						},
 					]);
 				}
-			} else {
+			} else if (selectedField)
 				setSelectedTracesFields([
 					{
-						...attribute,
-						fieldDataType: attribute.fieldDataType as FieldDataType,
+						...selectedField,
+						fieldDataType: selectedField.fieldDataType as FieldDataType,
 					},
 				]);
-			}
 		}
 		setOpen(false);
 	};
@@ -218,18 +189,14 @@ function ExplorerColumnsRenderer({
 		},
 	];
 
-	const removeSelectedLogField = (field: any): void => {
-		const uniqueKey = getUniqueColumnKey(field);
-
+	const removeSelectedLogField = (name: string): void => {
 		if (
 			initialDataSource === DataSource.LOGS &&
 			setSelectedLogFields &&
 			selectedLogFields
 		) {
 			setSelectedLogFields(
-				selectedLogFields.filter(
-					(field) => getUniqueColumnKey(field) !== uniqueKey,
-				),
+				selectedLogFields.filter((field) => field.name !== name),
 			);
 		}
 		if (
@@ -238,9 +205,7 @@ function ExplorerColumnsRenderer({
 			selectedTracesFields
 		) {
 			setSelectedTracesFields(
-				selectedTracesFields.filter(
-					(field) => getUniqueColumnKey(field) !== uniqueKey,
-				),
+				selectedTracesFields.filter((field) => field.name !== name),
 			);
 		}
 	};
@@ -283,11 +248,6 @@ function ExplorerColumnsRenderer({
 
 	const isDarkMode = useIsDarkMode();
 
-	// Detect which column names have multiple variants from API data
-	const allAttributeKeys =
-		Object.values(data?.data?.data?.keys || {})?.flat() || [];
-	const nameCounts = getVariantCounts(allAttributeKeys as TelemetryFieldKey[]);
-
 	return (
 		<div className="explorer-columns-renderer">
 			<div className="title">
@@ -311,7 +271,7 @@ function ExplorerColumnsRenderer({
 								>
 									{initialDataSource === DataSource.LOGS &&
 										selectedLogFields &&
-										selectedLogFields.map((field: TelemetryFieldKey, index) => (
+										selectedLogFields.map((field, index) => (
 											// eslint-disable-next-line react/no-array-index-key
 											<Draggable key={index} draggableId={index.toString()} index={index}>
 												{(dragProvided): JSX.Element => (
@@ -323,22 +283,12 @@ function ExplorerColumnsRenderer({
 													>
 														<div className="explorer-column-title">
 															<GripVertical size={12} color="#5A5A5A" />
-															<span className="column-name-wrapper">
-																{field.name}
-																{nameCounts[field.name] > 1 && (
-																	<span className="badges-container">
-																		<FieldVariantBadges
-																			fieldDataType={field.fieldDataType}
-																			fieldContext={field.fieldContext}
-																		/>
-																	</span>
-																)}
-															</span>
+															{field.name}
 														</div>
 														<Trash2
 															size={12}
 															color="red"
-															onClick={(): void => removeSelectedLogField(field)}
+															onClick={(): void => removeSelectedLogField(field.name)}
 															data-testid="trash-icon"
 														/>
 													</div>
@@ -359,22 +309,14 @@ function ExplorerColumnsRenderer({
 													>
 														<div className="explorer-column-title">
 															<GripVertical size={12} color="#5A5A5A" />
-															<span className="column-name-wrapper">
-																{field?.name || field?.key}
-																{nameCounts[field?.name || ''] > 1 && (
-																	<span className="badges-container">
-																		<FieldVariantBadges
-																			fieldDataType={field.fieldDataType}
-																			fieldContext={field.fieldContext}
-																		/>
-																	</span>
-																)}
-															</span>
+															{field?.name || (field as any)?.key}
 														</div>
 														<Trash2
 															size={12}
 															color="red"
-															onClick={(): void => removeSelectedLogField(field)}
+															onClick={(): void =>
+																removeSelectedLogField(field?.name || (field as any)?.key)
+															}
 															data-testid="trash-icon"
 														/>
 													</div>

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

@@ -222,13 +222,7 @@ describe('ExplorerColumnsRenderer', () => {
 			await userEvent.click(checkbox);
 
 			expect(mockSetSelectedLogFields).toHaveBeenCalledWith([
-				{
-					dataType: 'string',
-					fieldContext: '',
-					fieldDataType: 'string',
-					name: 'attribute1',
-					type: '',
-				},
+				{ dataType: 'string', name: 'attribute1', type: '' },
 			]);
 		});
 
@@ -332,21 +326,9 @@ describe('ExplorerColumnsRenderer', () => {
 					data: {
 						data: {
 							keys: {
-								trace_attribute1: [
-									{
-										name: 'trace_attribute1',
-										fieldDataType: DataTypes.String,
-										fieldContext: '',
-										signal: 'traces',
-									},
-								],
-								trace_attribute2: [
-									{
-										name: 'trace_attribute2',
-										fieldDataType: DataTypes.String,
-										fieldContext: '',
-										signal: 'traces',
-									},
+								attributeKeys: [
+									{ name: 'trace_attribute1', dataType: 'string', type: 'tag' },
+									{ name: 'trace_attribute2', dataType: 'string', type: 'tag' },
 								],
 							},
 						},
@@ -374,12 +356,7 @@ describe('ExplorerColumnsRenderer', () => {
 			await userEvent.click(checkbox);
 
 			expect(mockSetSelectedTracesFields).toHaveBeenCalledWith([
-				{
-					name: 'trace_attribute1',
-					fieldDataType: DataTypes.String,
-					fieldContext: '',
-					signal: 'traces',
-				},
+				{ name: 'trace_attribute1', dataType: 'string', type: 'tag' },
 			]);
 		});
 

frontend/src/container/NewWidget/index.tsx

@@ -501,7 +501,7 @@ function NewWidget({
 								stackedBarChart: selectedWidget?.stackedBarChart || false,
 								yAxisUnit: selectedWidget?.yAxisUnit,
 								decimalPrecision:
-									selectedWidget?.decimalPrecision || PrecisionOptionsEnum.TWO,
+									selectedWidget?.decimalPrecision ?? PrecisionOptionsEnum.TWO,
 								panelTypes: graphType,
 								query: adjustedQueryForV5,
 								thresholds: selectedWidget?.thresholds,
@@ -532,7 +532,7 @@ function NewWidget({
 								stackedBarChart: selectedWidget?.stackedBarChart || false,
 								yAxisUnit: selectedWidget?.yAxisUnit,
 								decimalPrecision:
-									selectedWidget?.decimalPrecision || PrecisionOptionsEnum.TWO,
+									selectedWidget?.decimalPrecision ?? PrecisionOptionsEnum.TWO,
 								panelTypes: graphType,
 								query: adjustedQueryForV5,
 								thresholds: selectedWidget?.thresholds,

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

@@ -516,6 +516,8 @@
 			"falcon",
 			"fastapi",
 			"flask",
+			"celery",
+			"gunicorn",
 			"monitor python application",
 			"monitor python backend",
 			"opentelemetry python",
@@ -540,134 +542,33 @@
 		],
 		"id": "python",
 		"question": {
-			"desc": "Which Python framework do you use?",
+			"desc": "What is your Environment?",
 			"type": "select",
-			"entityID": "framework",
+			"entityID": "environment",
 			"options": [
 				{
-					"key": "flask",
-					"label": "Flask",
-					"imgUrl": "/Logos/flask.svg",
-					"link": "https://signoz.io/docs/instrumentation/opentelemetry-flask/",
-					"question": {
-						"desc": "What is your Environment?",
-						"type": "select",
-						"entityID": "environment",
-						"options": [
-							{
-								"key": "vm",
-								"label": "VM",
-								"imgUrl": "/Logos/vm.svg",
-								"link": "https://signoz.io/docs/instrumentation/opentelemetry-flask/"
-							},
-							{
-								"key": "k8s",
-								"label": "Kubernetes",
-								"imgUrl": "/Logos/kubernetes.svg",
-								"link": "https://signoz.io/docs/instrumentation/opentelemetry-flask/"
-							}
-						]
-					}
+					"key": "vm",
+					"label": "VM",
+					"imgUrl": "/Logos/vm.svg",
+					"link": "https://signoz.io/docs/instrumentation/opentelemetry-python/"
 				},
 				{
-					"key": "django",
-					"label": "Django",
-					"imgUrl": "/Logos/django.svg",
-					"link": "https://signoz.io/docs/instrumentation/opentelemetry-django/",
-					"question": {
-						"desc": "What is your Environment?",
-						"type": "select",
-						"entityID": "environment",
-						"options": [
-							{
-								"key": "vm",
-								"label": "VM",
-								"imgUrl": "/Logos/vm.svg",
-								"link": "https://signoz.io/docs/instrumentation/opentelemetry-django/"
-							},
-							{
-								"key": "k8s",
-								"label": "Kubernetes",
-								"imgUrl": "/Logos/kubernetes.svg",
-								"link": "https://signoz.io/docs/instrumentation/opentelemetry-django/"
-							}
-						]
-					}
+					"key": "k8s",
+					"label": "Kubernetes",
+					"imgUrl": "/Logos/kubernetes.svg",
+					"link": "https://signoz.io/docs/instrumentation/opentelemetry-python/"
 				},
 				{
-					"key": "fastapi",
-					"label": "FastAPI",
-					"imgUrl": "/Logos/fastapi.svg",
-					"link": "https://signoz.io/docs/instrumentation/opentelemetry-fastapi/",
-					"question": {
-						"desc": "What is your Environment?",
-						"type": "select",
-						"entityID": "environment",
-						"options": [
-							{
-								"key": "vm",
-								"label": "VM",
-								"imgUrl": "/Logos/vm.svg",
-								"link": "https://signoz.io/docs/instrumentation/opentelemetry-fastapi/"
-							},
-							{
-								"key": "k8s",
-								"label": "Kubernetes",
-								"imgUrl": "/Logos/kubernetes.svg",
-								"link": "https://signoz.io/docs/instrumentation/opentelemetry-fastapi/"
-							}
-						]
-					}
+					"key": "windows",
+					"label": "Windows",
+					"imgUrl": "/Logos/windows.svg",
+					"link": "https://signoz.io/docs/instrumentation/opentelemetry-python/"
 				},
 				{
-					"key": "falcon",
-					"label": "Falcon",
-					"imgUrl": "/Logos/falcon.svg",
-					"link": "https://signoz.io/docs/instrumentation/opentelemetry-falcon/",
-					"question": {
-						"desc": "What is your Environment?",
-						"type": "select",
-						"entityID": "environment",
-						"options": [
-							{
-								"key": "vm",
-								"label": "VM",
-								"imgUrl": "/Logos/vm.svg",
-								"link": "https://signoz.io/docs/instrumentation/opentelemetry-falcon/"
-							},
-							{
-								"key": "k8s",
-								"label": "Kubernetes",
-								"imgUrl": "/Logos/kubernetes.svg",
-								"link": "https://signoz.io/docs/instrumentation/opentelemetry-falcon/"
-							}
-						]
-					}
-				},
-				{
-					"key": "others",
-					"label": "Others",
-					"imgUrl": "/Logos/python-others.svg",
-					"link": "https://signoz.io/docs/instrumentation/opentelemetry-python/",
-					"question": {
-						"desc": "What is your Environment?",
-						"type": "select",
-						"entityID": "environment",
-						"options": [
-							{
-								"key": "vm",
-								"label": "VM",
-								"imgUrl": "/Logos/vm.svg",
-								"link": "https://signoz.io/docs/instrumentation/opentelemetry-python/"
-							},
-							{
-								"key": "k8s",
-								"label": "Kubernetes",
-								"imgUrl": "/Logos/kubernetes.svg",
-								"link": "https://signoz.io/docs/instrumentation/opentelemetry-python/"
-							}
-						]
-					}
+					"key": "docker",
+					"label": "Docker",
+					"imgUrl": "/Logos/docker.svg",
+					"link": "https://signoz.io/docs/instrumentation/opentelemetry-python/"
 				}
 			]
 		}
@@ -5422,7 +5323,7 @@
 		"imgUrl": "/Logos/logs.svg",
 		"tags": [
 			"Frontend Monitoring",
-			"logs"	
+			"logs"
 		],
 		"module": "logs",
 		"relatedSearchKeywords": [
@@ -5541,4 +5442,4 @@
 		],
 		"link": "https://signoz.io/docs/userguide/envoy-metrics/"
 	}
-]
+]

frontend/src/container/OptionsMenu/AddColumnField/__tests__/AddColumnField.test.tsx

@@ -1,139 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { TelemetryFieldKey } from 'api/v5/v5';
-
-import {
-	mockAllAvailableKeys,
-	mockConflictingFieldsByContext,
-	mockConflictingFieldsByDatatype,
-	mockNonConflictingField,
-} from '../../__tests__/mockData';
-import AddColumnField from '../index';
-
-describe('AddColumnField - Badge Display', () => {
-	const defaultConfig = {
-		isFetching: false,
-		options: [],
-		value: [],
-		onSelect: jest.fn(),
-		onFocus: jest.fn(),
-		onBlur: jest.fn(),
-		onSearch: jest.fn(),
-		onRemove: jest.fn(),
-		allAvailableKeys: mockAllAvailableKeys,
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('shows badge for single selected conflicting field (different datatype)', () => {
-		const selectedColumns: TelemetryFieldKey[] = [
-			mockConflictingFieldsByDatatype[0], // Only string variant selected
-		];
-
-		render(
-			<AddColumnField
-				config={{
-					...defaultConfig,
-					value: selectedColumns,
-				}}
-			/>,
-		);
-
-		// Badge should appear even though only one variant is selected
-		// because allAvailableKeys contains the conflicting variant
-		const badgeContainer = screen.queryByText('http.status_code')?.closest('div');
-		expect(badgeContainer).toBeInTheDocument();
-
-		// Check for datatype badge
-		const datatypeBadge = screen.queryByText('string');
-		expect(datatypeBadge).toBeInTheDocument();
-	});
-
-	it('shows badges for multiple conflicting fields selected', () => {
-		const selectedColumns: TelemetryFieldKey[] = [
-			...mockConflictingFieldsByDatatype, // Both string and number variants
-		];
-
-		render(
-			<AddColumnField
-				config={{
-					...defaultConfig,
-					value: selectedColumns,
-				}}
-			/>,
-		);
-
-		// Both variants should show badges
-		const stringBadge = screen.getByText('string');
-		const numberBadge = screen.getByText('number');
-		expect(stringBadge).toBeInTheDocument();
-		expect(numberBadge).toBeInTheDocument();
-	});
-
-	it('shows badges when all conflicting variants are selected', () => {
-		const selectedColumns: TelemetryFieldKey[] = [
-			...mockConflictingFieldsByDatatype, // All variants selected
-		];
-
-		render(
-			<AddColumnField
-				config={{
-					...defaultConfig,
-					value: selectedColumns,
-				}}
-			/>,
-		);
-
-		// Both variants should appear as separate items in the list
-		const fieldNames = screen.getAllByText('http.status_code');
-		expect(fieldNames).toHaveLength(2); // One for each variant
-
-		// Badges should still be visible when all variants are selected
-		const stringBadge = screen.getByText('string');
-		const numberBadge = screen.getByText('number');
-		expect(stringBadge).toBeInTheDocument();
-		expect(numberBadge).toBeInTheDocument();
-	});
-
-	it('does not show badge for non-conflicting field', () => {
-		const selectedColumns: TelemetryFieldKey[] = [...mockNonConflictingField];
-
-		render(
-			<AddColumnField
-				config={{
-					...defaultConfig,
-					value: selectedColumns,
-				}}
-			/>,
-		);
-
-		// Field name should be visible
-		expect(screen.getByText('trace_id')).toBeInTheDocument();
-
-		// But no badge should appear (no conflicting variants)
-		const badgeContainer = document.querySelector(
-			'.field-variant-badges-container',
-		);
-		expect(badgeContainer).not.toBeInTheDocument();
-	});
-
-	it('shows context badge for attribute/resource conflicting fields', () => {
-		const selectedColumns: TelemetryFieldKey[] = [
-			mockConflictingFieldsByContext[0], // resource variant
-		];
-
-		render(
-			<AddColumnField
-				config={{
-					...defaultConfig,
-					value: selectedColumns,
-				}}
-			/>,
-		);
-
-		// Context badge should appear for resource
-		const contextBadge = screen.queryByText('resource');
-		expect(contextBadge).toBeInTheDocument();
-	});
-});

frontend/src/container/OptionsMenu/AddColumnField/index.tsx

@@ -1,39 +1,18 @@
 import { SearchOutlined } from '@ant-design/icons';
-import { Input, Spin } from 'antd';
-import { BaseOptionType } from 'antd/es/select';
-import FieldVariantBadges from 'components/FieldVariantBadges/FieldVariantBadges';
+import { Input, Spin, Typography } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useTranslation } from 'react-i18next';
 
 import { FieldTitle } from '../styles';
 import { OptionsMenuConfig } from '../types';
-import { getUniqueColumnKey, hasMultipleVariants } from '../utils';
 import {
 	AddColumnItem,
 	AddColumnSelect,
 	AddColumnWrapper,
 	DeleteOutlinedIcon,
-	Name,
-	NameWrapper,
-	OptionContent,
 	SearchIconWrapper,
 } from './styles';
 
-function OptionRenderer(option: BaseOptionType): JSX.Element {
-	const { label, data } = option;
-	return (
-		<OptionContent>
-			<span className="option-label">{label}</span>
-			{data?.hasMultipleVariants && (
-				<FieldVariantBadges
-					fieldDataType={data?.fieldDataType}
-					fieldContext={data?.fieldContext}
-				/>
-			)}
-		</OptionContent>
-	);
-}
-
 function AddColumnField({ config }: AddColumnFieldProps): JSX.Element | null {
 	const { t } = useTranslation(['trace']);
 	const isDarkMode = useIsDarkMode();
@@ -57,35 +36,18 @@ function AddColumnField({ config }: AddColumnFieldProps): JSX.Element | null {
 					onFocus={config.onFocus}
 					onBlur={config.onBlur}
 					notFoundContent={config.isFetching ? <Spin size="small" /> : null}
-					optionRender={OptionRenderer}
 				/>
 				<SearchIconWrapper $isDarkMode={isDarkMode}>
 					<SearchOutlined />
 				</SearchIconWrapper>
 			</Input.Group>
 
-			{config.value?.map((column) => {
-				const uniqueKey = getUniqueColumnKey(column);
-				const showBadge = hasMultipleVariants(
-					column.name || '',
-					config.value || [],
-					config.allAvailableKeys,
-				);
-				return (
-					<AddColumnItem key={uniqueKey}>
-						<NameWrapper>
-							<Name>{column.name}</Name>
-							{showBadge && (
-								<FieldVariantBadges
-									fieldDataType={column.fieldDataType}
-									fieldContext={column.fieldContext}
-								/>
-							)}
-						</NameWrapper>
-						<DeleteOutlinedIcon onClick={(): void => config.onRemove(uniqueKey)} />
-					</AddColumnItem>
-				);
-			})}
+			{config.value?.map(({ name }) => (
+				<AddColumnItem direction="horizontal" key={name}>
+					<Typography>{name}</Typography>
+					<DeleteOutlinedIcon onClick={(): void => config.onRemove(name)} />
+				</AddColumnItem>
+			))}
 		</AddColumnWrapper>
 	);
 }

frontend/src/container/OptionsMenu/AddColumnField/styles.ts

@@ -28,7 +28,7 @@ export const AddColumnWrapper = styled(Space)`
 	width: 100%;
 `;
 
-export const AddColumnItem = styled.div`
+export const AddColumnItem = styled(Space)`
 	width: 100%;
 	display: flex;
 	justify-content: space-between;
@@ -37,35 +37,3 @@ export const AddColumnItem = styled.div`
 export const DeleteOutlinedIcon = styled(DeleteOutlined)`
 	color: red;
 `;
-
-export const OptionContent = styled.div`
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-	gap: 8px;
-	min-width: 0;
-
-	.option-label {
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-`;
-export const NameWrapper = styled.span`
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: calc(100% - 26px);
-	gap: 8px;
-	min-width: 0;
-`;
-export const Name = styled.span`
-	flex: 1;
-	min-width: 0;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-`;

frontend/src/container/OptionsMenu/__tests__/mockData.ts

@@ -1,111 +0,0 @@
-import { TelemetryFieldKey } from 'api/v5/v5';
-import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
-import { QueryKeySuggestionsResponseProps } from 'types/api/querySuggestions/types';
-
-const HTTP_STATUS_CODE = 'http.status_code';
-const SERVICE_NAME = 'service.name';
-
-// Conflicting fields: same name, different datatype
-export const mockConflictingFieldsByDatatype: TelemetryFieldKey[] = [
-	{
-		name: HTTP_STATUS_CODE,
-		fieldDataType: QUERY_BUILDER_KEY_TYPES.STRING,
-		fieldContext: 'attribute',
-		signal: 'traces',
-	},
-	{
-		name: HTTP_STATUS_CODE,
-		fieldDataType: QUERY_BUILDER_KEY_TYPES.NUMBER,
-		fieldContext: 'attribute',
-		signal: 'traces',
-	},
-];
-
-// Conflicting fields: same name, different context
-export const mockConflictingFieldsByContext: TelemetryFieldKey[] = [
-	{
-		name: SERVICE_NAME,
-		fieldDataType: QUERY_BUILDER_KEY_TYPES.STRING,
-		fieldContext: 'resource',
-		signal: 'traces',
-	},
-	{
-		name: SERVICE_NAME,
-		fieldDataType: QUERY_BUILDER_KEY_TYPES.STRING,
-		fieldContext: 'attribute',
-		signal: 'traces',
-	},
-];
-
-// Non-conflicting field (single variant)
-export const mockNonConflictingField: TelemetryFieldKey[] = [
-	{
-		name: 'trace_id',
-		fieldDataType: QUERY_BUILDER_KEY_TYPES.STRING,
-		fieldContext: 'attribute',
-		signal: 'traces',
-	},
-];
-
-// Mock API response structure for conflicting fields by datatype
-export const mockQueryKeySuggestionsResponseByDatatype: QueryKeySuggestionsResponseProps = {
-	status: 'success',
-	data: {
-		complete: true,
-		keys: {
-			[HTTP_STATUS_CODE]: [
-				{
-					name: HTTP_STATUS_CODE,
-					fieldDataType: QUERY_BUILDER_KEY_TYPES.STRING,
-					fieldContext: 'attribute',
-					signal: 'traces',
-					label: HTTP_STATUS_CODE,
-					type: 'attribute',
-				},
-				{
-					name: HTTP_STATUS_CODE,
-					fieldDataType: QUERY_BUILDER_KEY_TYPES.NUMBER,
-					fieldContext: 'attribute',
-					signal: 'traces',
-					label: HTTP_STATUS_CODE,
-					type: 'attribute',
-				},
-			],
-		},
-	},
-};
-
-// Mock API response structure for conflicting fields by context
-export const mockQueryKeySuggestionsResponseByContext: QueryKeySuggestionsResponseProps = {
-	status: 'success',
-	data: {
-		complete: true,
-		keys: {
-			[SERVICE_NAME]: [
-				{
-					name: SERVICE_NAME,
-					fieldDataType: QUERY_BUILDER_KEY_TYPES.STRING,
-					fieldContext: 'resource',
-					signal: 'traces',
-					label: SERVICE_NAME,
-					type: 'resource',
-				},
-				{
-					name: SERVICE_NAME,
-					fieldDataType: QUERY_BUILDER_KEY_TYPES.STRING,
-					fieldContext: 'attribute',
-					signal: 'traces',
-					label: SERVICE_NAME,
-					type: 'attribute',
-				},
-			],
-		},
-	},
-};
-
-// All available keys (for allAvailableKeys prop)
-export const mockAllAvailableKeys: TelemetryFieldKey[] = [
-	...mockConflictingFieldsByDatatype,
-	...mockConflictingFieldsByContext,
-	...mockNonConflictingField,
-];

frontend/src/container/OptionsMenu/styles.ts

@@ -10,22 +10,10 @@ export const OptionsContainer = styled(Card)`
 `;
 
 export const OptionsContentWrapper = styled(Space)`
-	width: 21rem;
+	min-width: 11rem;
 	padding: 0.25rem 0.5rem;
 `;
 
 export const FieldTitle = styled(Typography.Text)`
 	font-size: 0.75rem;
 `;
-
-export const ColumnTitleWrapper = styled.span`
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	word-break: break-word;
-`;
-
-export const ColumnTitleIcon = styled.span`
-	font-size: 12px;
-	color: var(--bg-vanilla-400);
-`;

frontend/src/container/OptionsMenu/types.ts

@@ -38,6 +38,5 @@ export type OptionsMenuConfig = {
 		isFetching: boolean;
 		value: TelemetryFieldKey[];
 		onRemove: (key: string) => void;
-		allAvailableKeys?: TelemetryFieldKey[];
 	};
 };

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -36,7 +36,7 @@ import {
 	OptionsMenuConfig,
 	OptionsQuery,
 } from './types';
-import { getOptionsFromKeys, getUniqueColumnKey } from './utils';
+import { getOptionsFromKeys } from './utils';
 
 interface UseOptionsMenuProps {
 	storageKey?: string;
@@ -170,7 +170,7 @@ const useOptionsMenu = ({
 			...initialQueryParamsV5,
 			searchText: debouncedSearchText,
 		},
-		{ queryKey: [debouncedSearchText, isFocused] },
+		{ queryKey: [debouncedSearchText, isFocused], enabled: isFocused },
 	);
 
 	// const {
@@ -186,7 +186,7 @@ const useOptionsMenu = ({
 
 	const searchedAttributeKeys: TelemetryFieldKey[] = useMemo(() => {
 		const searchedAttributesDataList = Object.values(
-			searchedAttributesDataV5?.data?.data?.keys || {},
+			searchedAttributesDataV5?.data.data.keys || {},
 		).flat();
 		if (searchedAttributesDataList.length) {
 			if (dataSource === DataSource.LOGS) {
@@ -230,7 +230,7 @@ const useOptionsMenu = ({
 		}
 
 		return [];
-	}, [dataSource, searchedAttributesDataV5?.data?.data?.keys]);
+	}, [dataSource, searchedAttributesDataV5?.data.data.keys]);
 
 	const initialOptionsQuery: OptionsQuery = useMemo(() => {
 		let defaultColumns: TelemetryFieldKey[] = defaultOptionsQuery.selectColumns;
@@ -262,7 +262,7 @@ const useOptionsMenu = ({
 	}, [dataSource, initialOptions, initialSelectedColumns]);
 
 	const selectedColumnKeys = useMemo(
-		() => preferences?.columns?.map((col) => getUniqueColumnKey(col)) || [],
+		() => preferences?.columns?.map(({ name }) => name) || [],
 		[preferences?.columns],
 	);
 
@@ -287,14 +287,16 @@ const useOptionsMenu = ({
 
 	const handleSelectColumns = useCallback(
 		(value: string) => {
-			// value is now the unique key (name::dataType::context)
-			const column = searchedAttributeKeys.find(
-				(key) => getUniqueColumnKey(key) === value,
-			);
+			const newSelectedColumnKeys = [...new Set([...selectedColumnKeys, value])];
+			const newSelectedColumns = newSelectedColumnKeys.reduce((acc, key) => {
+				const column = [
+					...searchedAttributeKeys,
+					...(preferences?.columns || []),
+				].find(({ name }) => name === key);
 
-			if (!column) return;
-
-			const newSelectedColumns = [...(preferences?.columns || []), column];
+				if (!column) return acc;
+				return [...acc, column];
+			}, [] as TelemetryFieldKey[]);
 
 			const optionsData: OptionsQuery = {
 				...defaultOptionsQuery,
@@ -309,6 +311,7 @@ const useOptionsMenu = ({
 		},
 		[
 			searchedAttributeKeys,
+			selectedColumnKeys,
 			preferences,
 			handleRedirectWithOptionsData,
 			updateColumns,
@@ -317,9 +320,8 @@ const useOptionsMenu = ({
 
 	const handleRemoveSelectedColumn = useCallback(
 		(columnKey: string) => {
-			// columnKey is now the unique key (name::dataType::context)
 			const newSelectedColumns = preferences?.columns?.filter(
-				(col) => getUniqueColumnKey(col) !== columnKey,
+				({ name }) => name !== columnKey,
 			);
 
 			if (!newSelectedColumns?.length && dataSource !== DataSource.LOGS) {
@@ -430,7 +432,6 @@ const useOptionsMenu = ({
 					preferences?.columns.filter((item) => has(item, 'name')) ||
 					defaultOptionsQuery.selectColumns.filter((item) => has(item, 'name')),
 				options: optionsFromAttributeKeys || [],
-				allAvailableKeys: searchedAttributeKeys,
 				onFocus: handleFocus,
 				onBlur: handleBlur,
 				onSelect: handleSelectColumns,
@@ -454,7 +455,6 @@ const useOptionsMenu = ({
 			isSearchedAttributesFetchingV5,
 			preferences,
 			optionsFromAttributeKeys,
-			searchedAttributeKeys,
 			handleSelectColumns,
 			handleRemoveSelectedColumn,
 			handleSearchAttribute,

frontend/src/container/OptionsMenu/utils.ts

@@ -0,0 +1,16 @@
+import { SelectProps } from 'antd';
+import { TelemetryFieldKey } from 'api/v5/v5';
+
+export const getOptionsFromKeys = (
+	keys: TelemetryFieldKey[],
+	selectedKeys: (string | undefined)[],
+): SelectProps['options'] => {
+	const options = keys.map(({ name }) => ({
+		label: name,
+		value: name,
+	}));
+
+	return options.filter(
+		({ value }) => !selectedKeys.find((key) => key === value),
+	);
+};

frontend/src/container/OptionsMenu/utils.tsx

@@ -1,294 +0,0 @@
-import { SelectProps } from 'antd';
-import { DefaultOptionType } from 'antd/es/select';
-import { TelemetryFieldKey } from 'api/v5/v5';
-import { AxiosResponse } from 'axios';
-import {
-	QueryKeyDataSuggestionsProps,
-	QueryKeySuggestionsResponseProps,
-} from 'types/api/querySuggestions/types';
-
-/**
- * Extracts all available keys from API response and transforms them into TelemetryFieldKey format
- * @param keysData - The response data from useGetQueryKeySuggestions hook
- * @returns Array of TelemetryFieldKey objects
- */
-export const extractTelemetryFieldKeys = (
-	keysData?: AxiosResponse<QueryKeySuggestionsResponseProps>,
-): TelemetryFieldKey[] => {
-	const keysList = Object.values(keysData?.data?.data?.keys || {})?.flat() || [];
-	return keysList.map((key) => ({
-		name: key.name,
-		fieldDataType: key.fieldDataType,
-		fieldContext: key.fieldContext,
-		signal: key.signal,
-	})) as TelemetryFieldKey[];
-};
-
-/**
- * Creates a unique key for a column by combining context, name, and dataType
- * Format: fieldContext::name::fieldDataType
- * Example: "attribute::http.status_code::number"
- */
-export const getUniqueColumnKey = (
-	column: TelemetryFieldKey | QueryKeyDataSuggestionsProps,
-): string => {
-	const name = column.name || '';
-	const dataType =
-		('fieldDataType' in column && column.fieldDataType) ||
-		('dataType' in column && column.dataType) ||
-		'string';
-	const context =
-		column.fieldContext || ('type' in column && column.type) || 'attribute';
-	return `${context}::${name}::${dataType}`;
-};
-
-/**
- * Parses a unique column key back into its components
- * Format: fieldContext::name::fieldDataType
- */
-export const parseColumnKey = (
-	key: string,
-): { name: string; fieldDataType: string; fieldContext: string } => {
-	const parts = key.split('::');
-	const fieldContext = parts[0] || 'attribute';
-	const name = parts[1] || '';
-	const fieldDataType = parts[2] || 'string';
-	return { name, fieldDataType, fieldContext };
-};
-
-/**
- * Creates a count map of how many variants each attribute name has
- * Used to determine which columns should display badges
- */
-export const getVariantCounts = <T extends { name?: string }>(
-	items: T[],
-): Record<string, number> => {
-	if (!items || !items.length) return {};
-	return items.reduce((acc: Record<string, number>, item: T) => {
-		const name = item?.name || '';
-		if (name) {
-			acc[name] = (acc[name] || 0) + 1;
-		}
-		return acc;
-	}, {} as Record<string, number>);
-};
-
-/**
- * Extracts a Set of column names that have multiple variants from options
- * Useful when options already have hasMultipleVariants flag
- */
-export const getNamesWithVariants = (
-	options: SelectProps['options'],
-): Set<string> => {
-	if (!options || !Array.isArray(options)) return new Set();
-	const names = options
-		.filter((opt) => {
-			if (!opt) return false;
-			const option = opt as DefaultOptionType & {
-				hasMultipleVariants?: boolean;
-			};
-			return option?.hasMultipleVariants;
-		})
-		.map((opt) => {
-			if (!opt) return '';
-			const value = String(opt.value || '');
-			return parseColumnKey(value).name;
-		});
-	return new Set(names);
-};
-
-/**
- * Groups fields by their name to analyze variants
- * Returns a map of field name to array of fields with that name
- */
-export const getFieldVariantsByName = <T extends { name?: string }>(
-	fields: T[],
-): Record<string, T[]> =>
-	fields.reduce((acc, field) => {
-		const name = field.name || '';
-		if (!acc[name]) {
-			acc[name] = [];
-		}
-		acc[name].push(field);
-		return acc;
-	}, {} as Record<string, T[]>);
-
-/**
- * Determines the column title based on variant analysis
- * Shows context if dataTypes are same but contexts differ
- * Shows dataType if dataTypes differ
- */
-export const getColumnTitle = <
-	T extends Partial<QueryKeyDataSuggestionsProps> | Partial<TelemetryFieldKey>
->(
-	field: T,
-	hasVariants: boolean,
-	variants: T[],
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-): string => {
-	const name = field.name || '';
-	if (!hasVariants) return name;
-
-	// Extract data types from variants (support both fieldDataType and dataType)
-	const uniqueDataTypes = new Set(
-		variants
-			.map(
-				(v) =>
-					('fieldDataType' in v && v.fieldDataType) ||
-					('dataType' in v && v.dataType),
-			)
-			.filter(Boolean),
-	);
-
-	// Extract contexts from variants (support both fieldContext and type)
-	const uniqueContexts = new Set(
-		variants
-			.map(
-				(v) => ('fieldContext' in v && v.fieldContext) || ('type' in v && v.type),
-			)
-			.filter(Boolean),
-	);
-
-	// Same dataType but different contexts - show context
-	if (
-		uniqueDataTypes.size === 1 &&
-		uniqueContexts.size > 1 &&
-		(field.fieldContext || ('type' in field && field.type))
-	) {
-		return `${name} (${field.fieldContext || ('type' in field && field.type)})`;
-	}
-
-	// Different dataTypes - show dataType
-	const dataType =
-		('fieldDataType' in field && field.fieldDataType) ||
-		('dataType' in field && field.dataType);
-	if (dataType) {
-		return `${name} (${dataType})`;
-	}
-
-	return name;
-};
-
-/**
- * Checks if another field with the same name but different unique key exists in availableKeys
- * and if any of those conflicting fields are NOT already selected
- * This indicates a conflicted column scenario where user might not be aware of other variants
- */
-const hasUnselectedConflictingField = <
-	T extends Partial<QueryKeyDataSuggestionsProps> | Partial<TelemetryFieldKey>
->(
-	field: T,
-	availableKeys?: TelemetryFieldKey[],
-	selectedColumns?: TelemetryFieldKey[],
-): boolean => {
-	if (!availableKeys || availableKeys.length === 0) return false;
-
-	const fieldName = field.name || '';
-	const fieldUniqueKey = getUniqueColumnKey(field as TelemetryFieldKey);
-
-	// Find all conflicting fields (same name, different unique key)
-	const conflictingFields = availableKeys.filter(
-		(key) => key.name === fieldName && getUniqueColumnKey(key) !== fieldUniqueKey,
-	);
-
-	// If no conflicting fields exist, no conflict
-	if (conflictingFields.length === 0) return false;
-
-	// If no selected columns provided, assume conflict exists
-	if (!selectedColumns || selectedColumns.length === 0) return true;
-
-	// Check if all conflicting fields are already selected
-	const selectedUniqueKeys = new Set(
-		selectedColumns.map((col) => getUniqueColumnKey(col)),
-	);
-
-	// Return true if any conflicting field is NOT selected
-	return conflictingFields.some(
-		(conflictingField) =>
-			!selectedUniqueKeys.has(getUniqueColumnKey(conflictingField)),
-	);
-};
-
-/**
- * Returns column title as string and metadata for tooltip icon
- * Shows tooltip only when another field with the same name but different type/context exists
- * and is NOT already selected (better UX - no need to show tooltip if all variants are visible)
- *
- * Returns an object with:
- * - title: string
- * - hasUnselectedConflict: boolean
- */
-export const getColumnTitleWithTooltip = <
-	T extends Partial<QueryKeyDataSuggestionsProps> | Partial<TelemetryFieldKey>
->(
-	field: T,
-	hasVariants: boolean,
-	variants: T[],
-	selectedColumns: TelemetryFieldKey[],
-	availableKeys?: TelemetryFieldKey[],
-): { title: string; hasUnselectedConflict: boolean } => {
-	const title = getColumnTitle(field, hasVariants, variants);
-	const hasUnselectedConflict = hasUnselectedConflictingField(
-		field,
-		availableKeys,
-		selectedColumns,
-	);
-
-	return { title, hasUnselectedConflict };
-};
-
-export const getOptionsFromKeys = (
-	keys: TelemetryFieldKey[],
-	selectedKeys: (string | undefined)[],
-): SelectProps['options'] => {
-	// Detect which attribute names have multiple variants
-	const nameCounts = keys.reduce((acc, key) => {
-		const name = key.name || '';
-		acc[name] = (acc[name] || 0) + 1;
-		return acc;
-	}, {} as Record<string, number>);
-
-	const options = keys.map((key) => ({
-		label: key.name,
-		value: getUniqueColumnKey(key),
-		// Store additional data for rendering
-		fieldDataType: key.fieldDataType,
-		fieldContext: key.fieldContext,
-		signal: key.signal,
-		hasMultipleVariants: nameCounts[key.name || ''] > 1,
-	}));
-
-	return options.filter(
-		({ value }) => !selectedKeys.find((selectedKey) => selectedKey === value),
-	);
-};
-
-/**
- * Determines if a column name has multiple variants
- * Checks both selected columns and available keys (from search) to detect conflicts
- * Reuses getVariantCounts for consistency
- */
-export const hasMultipleVariants = (
-	columnName: string,
-	selectedColumns: TelemetryFieldKey[],
-	availableKeys?: TelemetryFieldKey[],
-): boolean => {
-	// Combine selected columns with available keys (if provided)
-	const allKeys = availableKeys
-		? [...selectedColumns, ...availableKeys]
-		: selectedColumns;
-
-	// Deduplicate by unique key to avoid counting same variant twice
-	const uniqueKeysMap = new Map<string, TelemetryFieldKey>();
-	allKeys.forEach((key) => {
-		const uniqueKey = getUniqueColumnKey(key);
-		if (!uniqueKeysMap.has(uniqueKey)) {
-			uniqueKeysMap.set(uniqueKey, key);
-		}
-	});
-
-	const deduplicatedKeys = Array.from(uniqueKeysMap.values());
-	const variantCounts = getVariantCounts(deduplicatedKeys);
-
-	return variantCounts[columnName] > 1;
-};

frontend/src/container/PanelWrapper/__tests__/__snapshots__/ValuePanelWrapper.test.tsx.snap

@@ -49,12 +49,14 @@ exports[`Value panel wrappper tests should render tooltip when there are conflic
       >
         <span
           class="ant-typography value-graph-text css-dev-only-do-not-override-2i2tap"
+          data-testid="value-graph-text"
           style="color: Blue; font-size: 16px;"
         >
           295.43
         </span>
         <span
           class="ant-typography value-graph-unit css-dev-only-do-not-override-2i2tap"
+          data-testid="value-graph-suffix-unit"
           style="color: Blue; font-size: calc(16px * 0.7);"
         >
           ms

frontend/src/container/SideNav/SideNav.tsx

@@ -68,6 +68,7 @@ import { USER_ROLES } from 'types/roles';
 import { checkVersionState } from 'utils/app';
 import { showErrorNotification } from 'utils/error';
 
+import { useCmdK } from '../../providers/cmdKProvider';
 import { routeConfig } from './config';
 import { getQueryString } from './helper';
 import {
@@ -120,6 +121,7 @@ function SortableFilter({ item }: { item: SidebarItem }): JSX.Element {
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
+	const { openCmdK } = useCmdK();
 	const { pathname, search } = useLocation();
 	const { currentVersion, latestVersion, isCurrentVersionError } = useSelector<
 		AppState,
@@ -637,6 +639,8 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			} else {
 				history.push(settingsRoute);
 			}
+		} else if (item.key === 'quick-search') {
+			openCmdK();
 		} else if (item) {
 			onClickHandler(item?.key as string, event);
 		}

frontend/src/container/SideNav/menuItems.tsx

@@ -26,6 +26,7 @@ import {
 	Receipt,
 	Route,
 	ScrollText,
+	Search,
 	Settings,
 	Slack,
 	Unplug,
@@ -188,6 +189,12 @@ export const primaryMenuItems: SidebarItem[] = [
 		icon: <Home size={16} />,
 		itemKey: 'home',
 	},
+	{
+		key: 'quick-search',
+		label: 'Search',
+		icon: <Search size={16} />,
+		itemKey: 'quick-search',
+	},
 	{
 		key: ROUTES.LIST_ALL_ALERT,
 		label: 'Alerts',

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

@@ -3,6 +3,7 @@ import { Tooltip, Typography } from 'antd';
 import AttributeWithExpandablePopover from './AttributeWithExpandablePopover';
 
 const EXPANDABLE_ATTRIBUTE_KEYS = ['exception.stacktrace', 'exception.message'];
+const ATTRIBUTE_LENGTH_THRESHOLD = 100;
 
 interface EventAttributeProps {
 	attributeKey: string;
@@ -15,7 +16,11 @@ function EventAttribute({
 	attributeValue,
 	onExpand,
 }: EventAttributeProps): JSX.Element {
-	if (EXPANDABLE_ATTRIBUTE_KEYS.includes(attributeKey)) {
+	const shouldExpand =
+		EXPANDABLE_ATTRIBUTE_KEYS.includes(attributeKey) ||
+		attributeValue.length > ATTRIBUTE_LENGTH_THRESHOLD;
+
+	if (shouldExpand) {
 		return (
 			<AttributeWithExpandablePopover
 				attributeKey={attributeKey}

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.styles.scss

@@ -51,9 +51,12 @@
 		padding: 10px 12px;
 
 		.item {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
+			&,
+			.attribute-container {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+			}
 
 			.span-name-wrapper {
 				display: flex;
@@ -413,6 +416,7 @@
 				text-transform: uppercase;
 			}
 
+			.attribute-container .wrapper,
 			.value-wrapper {
 				display: flex;
 				align-items: center;

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx

@@ -4,6 +4,7 @@ import {
 	Button,
 	Checkbox,
 	Input,
+	Modal,
 	Select,
 	Skeleton,
 	Tabs,
@@ -52,6 +53,7 @@ import { formatEpochTimestamp } from 'utils/timeUtils';
 
 import Attributes from './Attributes/Attributes';
 import { RelatedSignalsViews } from './constants';
+import EventAttribute from './Events/components/EventAttribute';
 import Events from './Events/Events';
 import LinkedSpans from './LinkedSpans/LinkedSpans';
 import SpanRelatedSignals from './SpanRelatedSignals/SpanRelatedSignals';
@@ -166,11 +168,27 @@ function SpanDetailsDrawer(props: ISpanDetailsDrawerProps): JSX.Element {
 		setShouldUpdateUserPreference,
 	] = useState<boolean>(false);
 
+	const [statusMessageModalContent, setStatusMessageModalContent] = useState<{
+		title: string;
+		content: string;
+	} | null>(null);
+
 	const handleTimeRangeChange = useCallback((value: number): void => {
 		setShouldFetchSpanPercentilesData(true);
 		setSelectedTimeRange(value);
 	}, []);
 
+	const showStatusMessageModal = useCallback(
+		(title: string, content: string): void => {
+			setStatusMessageModalContent({ title, content });
+		},
+		[],
+	);
+
+	const handleStatusMessageModalCancel = useCallback((): void => {
+		setStatusMessageModalContent(null);
+	}, []);
+
 	const color = generateColor(
 		selectedSpan?.serviceName || '',
 		themeColors.traceDetailColors,
@@ -868,14 +886,11 @@ function SpanDetailsDrawer(props: ISpanDetailsDrawerProps): JSX.Element {
 
 						{selectedSpan.statusMessage && (
 							<div className="item">
-								<Typography.Text className="attribute-key">
-									status message
-								</Typography.Text>
-								<div className="value-wrapper">
-									<Typography.Text className="attribute-value">
-										{selectedSpan.statusMessage}
-									</Typography.Text>
-								</div>
+								<EventAttribute
+									attributeKey="status message"
+									attributeValue={selectedSpan.statusMessage}
+									onExpand={showStatusMessageModal}
+								/>
 							</div>
 						)}
 						<div className="item">
@@ -936,6 +951,19 @@ function SpanDetailsDrawer(props: ISpanDetailsDrawerProps): JSX.Element {
 					key={activeDrawerView}
 				/>
 			)}
+
+			<Modal
+				title={statusMessageModalContent?.title}
+				open={!!statusMessageModalContent}
+				onCancel={handleStatusMessageModalCancel}
+				footer={null}
+				width="80vw"
+				centered
+			>
+				<pre className="attribute-with-expandable-popover__full-view">
+					{statusMessageModalContent?.content}
+				</pre>
+			</Modal>
 		</>
 	);
 }

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

@@ -29,6 +29,8 @@ import {
 	mockEmptyLogsResponse,
 	mockSpan,
 	mockSpanLogsResponse,
+	mockSpanWithLongStatusMessage,
+	mockSpanWithShortStatusMessage,
 } from './mockData';
 
 // Get typed mocks
@@ -128,6 +130,39 @@ jest.mock('lib/uPlotLib/utils/generateColor', () => ({
 	generateColor: jest.fn().mockReturnValue('#1f77b4'),
 }));
 
+jest.mock(
+	'container/SpanDetailsDrawer/Events/components/AttributeWithExpandablePopover',
+	() =>
+		// eslint-disable-next-line func-names, @typescript-eslint/explicit-function-return-type, react/display-name
+		function ({
+			attributeKey,
+			attributeValue,
+			onExpand,
+		}: {
+			attributeKey: string;
+			attributeValue: string;
+			onExpand: (title: string, content: string) => void;
+		}) {
+			return (
+				<div className="attribute-container" key={attributeKey}>
+					<div className="attribute-key">{attributeKey}</div>
+					<div className="wrapper">
+						<div className="attribute-value">{attributeValue}</div>
+						<div data-testid="popover-content">
+							<pre>{attributeValue}</pre>
+							<button
+								type="button"
+								onClick={(): void => onExpand(attributeKey, attributeValue)}
+							>
+								Expand
+							</button>
+						</div>
+					</div>
+				</div>
+			);
+		},
+);
+
 // Mock getSpanPercentiles API
 jest.mock('api/trace/getSpanPercentiles', () => ({
 	__esModule: true,
@@ -1153,3 +1188,112 @@ describe('SpanDetailsDrawer - Search Visibility User Flows', () => {
 		expect(searchInput).toHaveFocus();
 	});
 });
+
+describe('SpanDetailsDrawer - Status Message Truncation User Flows', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockSafeNavigate.mockClear();
+		mockWindowOpen.mockClear();
+		mockUpdateAllQueriesOperators.mockClear();
+
+		(GetMetricQueryRange as jest.Mock).mockImplementation(() =>
+			Promise.resolve(mockEmptyLogsResponse),
+		);
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('should display expandable popover with Expand button for long status message', () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithLongStatusMessage}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// User sees status message label
+		expect(screen.getByText('status message')).toBeInTheDocument();
+
+		// User sees the status message value (appears in both original element and popover preview)
+		const statusMessageElements = screen.getAllByText(
+			mockSpanWithLongStatusMessage.statusMessage,
+		);
+		expect(statusMessageElements.length).toBeGreaterThan(0);
+
+		// User sees Expand button in popover (popover is mocked to render immediately)
+		const expandButton = screen.getByRole('button', { name: /expand/i });
+		expect(expandButton).toBeInTheDocument();
+	});
+
+	it('should open modal with full status message when user clicks Expand button', async () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithLongStatusMessage}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// User clicks the Expand button (popover is mocked to render immediately)
+		const expandButton = screen.getByRole('button', { name: /expand/i });
+		await fireEvent.click(expandButton);
+
+		// User sees modal with the full status message content
+		await waitFor(() => {
+			// Modal should be visible with the title
+			const modalTitle = document.querySelector('.ant-modal-title');
+			expect(modalTitle).toBeInTheDocument();
+			expect(modalTitle?.textContent).toBe('status message');
+			// Modal content should contain the full message in a pre tag
+			const preElement = document.querySelector(
+				'.attribute-with-expandable-popover__full-view',
+			);
+			expect(preElement).toBeInTheDocument();
+			expect(preElement?.textContent).toBe(
+				mockSpanWithLongStatusMessage.statusMessage,
+			);
+		});
+	});
+
+	it('should display short status message as simple text without popover', () => {
+		render(
+			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
+				<SpanDetailsDrawer
+					isSpanDetailsDocked={false}
+					setIsSpanDetailsDocked={jest.fn()}
+					selectedSpan={mockSpanWithShortStatusMessage}
+					traceStartTime={1640995200000}
+					traceEndTime={1640995260000}
+				/>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// User sees status message label and value
+		expect(screen.getByText('status message')).toBeInTheDocument();
+		expect(
+			screen.getByText(mockSpanWithShortStatusMessage.statusMessage),
+		).toBeInTheDocument();
+
+		// User hovers over the status message value
+		const statusMessageValue = screen.getByText(
+			mockSpanWithShortStatusMessage.statusMessage,
+		);
+		fireEvent.mouseEnter(statusMessageValue);
+
+		// No Expand button should appear (no expandable popover for short messages)
+		expect(
+			screen.queryByRole('button', { name: /expand/i }),
+		).not.toBeInTheDocument();
+	});
+});

frontend/src/container/SpanDetailsDrawer/__tests__/mockData.ts

@@ -35,6 +35,19 @@ export const mockSpan: Span = {
 	level: 0,
 };
 
+// Mock span with long status message (> 100 characters) for testing truncation
+export const mockSpanWithLongStatusMessage: Span = {
+	...mockSpan,
+	statusMessage:
+		'Error: Connection timeout occurred while trying to reach the database server. The connection pool was exhausted and all retry attempts failed after 30 seconds.',
+};
+
+// Mock span with short status message (<= 100 characters)
+export const mockSpanWithShortStatusMessage: Span = {
+	...mockSpan,
+	statusMessage: 'Connection successful',
+};
+
 // Mock logs with proper relationships
 export const mockSpanLogs: ILog[] = [
 	{

frontend/src/container/TracesExplorer/ListView/__tests__/getListColumns.test.tsx

@@ -1,161 +0,0 @@
-import { TelemetryFieldKey } from 'api/v5/v5';
-import {
-	mockAllAvailableKeys,
-	mockConflictingFieldsByContext,
-	mockConflictingFieldsByDatatype,
-} from 'container/OptionsMenu/__tests__/mockData';
-import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import { renderColumnHeader } from 'tests/columnHeaderHelpers';
-
-import { getListColumns } from '../utils';
-
-const COLUMN_UNDEFINED_ERROR = 'statusCodeColumn is undefined';
-const SERVICE_NAME_COLUMN_UNDEFINED_ERROR = 'serviceNameColumn is undefined';
-
-// Mock the timezone formatter
-const mockFormatTimezoneAdjustedTimestamp = jest.fn(
-	(input: TimestampInput): string => {
-		if (typeof input === 'string') {
-			return new Date(input).toISOString();
-		}
-		if (typeof input === 'number') {
-			return new Date(input / 1e6).toISOString();
-		}
-		return new Date(input).toISOString();
-	},
-);
-
-describe('getListColumns - Column Headers and Tooltips', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('shows datatype in column header for conflicting fields', () => {
-		const selectedColumns: TelemetryFieldKey[] = [
-			mockConflictingFieldsByDatatype[0], // string variant
-		];
-
-		const columns = getListColumns(
-			selectedColumns,
-			mockFormatTimezoneAdjustedTimestamp,
-			mockAllAvailableKeys,
-		);
-
-		const statusCodeColumn = columns.find(
-			// eslint-disable-next-line sonarjs/no-duplicate-string
-			(col) => 'dataIndex' in col && col.dataIndex === 'http.status_code',
-		);
-
-		expect(statusCodeColumn).toBeDefined();
-		expect(statusCodeColumn?.title).toBeDefined();
-
-		if (!statusCodeColumn) {
-			throw new Error(COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(statusCodeColumn);
-		expect(container.textContent).toContain('http.status_code (string)');
-		expect(container.textContent).toContain('string');
-	});
-
-	it('shows tooltip icon when unselected conflicting variant exists', () => {
-		const selectedColumns: TelemetryFieldKey[] = [
-			mockConflictingFieldsByDatatype[0], // Only string variant selected
-		];
-
-		const columns = getListColumns(
-			selectedColumns,
-			mockFormatTimezoneAdjustedTimestamp,
-			mockAllAvailableKeys, // Contains number variant
-		);
-
-		const statusCodeColumn = columns.find(
-			(col) => 'dataIndex' in col && col.dataIndex === 'http.status_code',
-		);
-
-		expect(statusCodeColumn).toBeDefined();
-
-		// Verify that _hasUnselectedConflict metadata is set correctly
-		const columnRecord = statusCodeColumn as Record<string, unknown>;
-		expect(columnRecord._hasUnselectedConflict).toBe(true);
-
-		if (!statusCodeColumn) {
-			throw new Error(COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(statusCodeColumn);
-		const tooltipIcon = container.querySelector('.anticon-info-circle');
-		expect(tooltipIcon).toBeInTheDocument();
-	});
-
-	it('hides tooltip icon when all conflicting variants are selected', () => {
-		const selectedColumns: TelemetryFieldKey[] = [
-			...mockConflictingFieldsByDatatype, // Both variants selected
-		];
-
-		const columns = getListColumns(
-			selectedColumns,
-			mockFormatTimezoneAdjustedTimestamp,
-			mockAllAvailableKeys,
-		);
-
-		const statusCodeColumn = columns.find(
-			(col) => 'dataIndex' in col && col.dataIndex === 'http.status_code',
-		);
-
-		expect(statusCodeColumn).toBeDefined();
-
-		// Verify that _hasUnselectedConflict metadata is NOT set when all variants are selected
-		const columnRecord = statusCodeColumn as Record<string, unknown>;
-		expect(columnRecord._hasUnselectedConflict).toBeUndefined();
-
-		if (!statusCodeColumn) {
-			throw new Error(COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(statusCodeColumn);
-		const tooltipIcon = container.querySelector('.anticon-info-circle');
-		expect(tooltipIcon).not.toBeInTheDocument();
-	});
-
-	it('shows context in header for attribute/resource conflicting fields', () => {
-		// When same datatype but different contexts, it shows context
-		const selectedColumns: TelemetryFieldKey[] = [
-			...mockConflictingFieldsByContext, // Both resource and attribute variants
-		];
-
-		const columns = getListColumns(
-			selectedColumns,
-			mockFormatTimezoneAdjustedTimestamp,
-			mockAllAvailableKeys,
-		);
-
-		const serviceNameColumn = columns.find(
-			(col) => 'dataIndex' in col && col.dataIndex === 'service.name',
-		);
-
-		expect(serviceNameColumn).toBeDefined();
-
-		if (!serviceNameColumn) {
-			throw new Error(SERVICE_NAME_COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(serviceNameColumn);
-		expect(container.textContent).toContain('service.name (resource)');
-		expect(container.textContent).toContain('resource');
-	});
-
-	it('includes timestamp column in initial columns', () => {
-		const columns = getListColumns(
-			[],
-			mockFormatTimezoneAdjustedTimestamp,
-			mockAllAvailableKeys,
-		);
-
-		const timestampColumn = columns.find(
-			(col) => 'dataIndex' in col && col.dataIndex === 'date',
-		);
-		expect(timestampColumn).toBeDefined();
-		expect(timestampColumn?.title).toBe('Timestamp');
-	});
-});

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

@@ -186,15 +186,9 @@ function ListView({
 		const updatedColumns = getListColumns(
 			options?.selectColumns || [],
 			formatTimezoneAdjustedTimestamp,
-			config.addColumn?.allAvailableKeys,
 		);
 		return getDraggedColumns(updatedColumns, draggedColumns);
-	}, [
-		options?.selectColumns,
-		formatTimezoneAdjustedTimestamp,
-		draggedColumns,
-		config.addColumn?.allAvailableKeys,
-	]);
+	}, [options?.selectColumns, formatTimezoneAdjustedTimestamp, draggedColumns]);
 
 	const transformedQueryTableData = useMemo(
 		() => transformDataWithDate(queryTableData) || [],

frontend/src/container/TracesExplorer/ListView/utils.tsx

@@ -3,12 +3,6 @@ import { ColumnsType } from 'antd/es/table';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
-import {
-	getColumnTitleWithTooltip,
-	getFieldVariantsByName,
-	getUniqueColumnKey,
-	hasMultipleVariants,
-} from 'container/OptionsMenu/utils';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { formUrlParams } from 'container/TraceDetail/utils';
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
@@ -58,7 +52,6 @@ export const getListColumns = (
 		input: TimestampInput,
 		format?: string,
 	) => string | number,
-	allAvailableKeys?: TelemetryFieldKey[],
 ): ColumnsType<RowData> => {
 	const initialColumns: ColumnsType<RowData> = [
 		{
@@ -86,31 +79,15 @@ export const getListColumns = (
 		},
 	];
 
-	// Group fields by name to analyze variants
-	const fieldVariantsByName = getFieldVariantsByName(selectedColumns);
-
 	const columns: ColumnsType<RowData> =
 		selectedColumns.map((props) => {
 			const name = props?.name || (props as any)?.key;
-			const hasVariants = hasMultipleVariants(
-				name,
-				selectedColumns,
-				allAvailableKeys,
-			);
-			const variants = fieldVariantsByName[name] || [];
-			const { title, hasUnselectedConflict } = getColumnTitleWithTooltip(
-				props,
-				hasVariants,
-				variants,
-				selectedColumns,
-				allAvailableKeys,
-			);
-
+			const fieldDataType = props?.fieldDataType || (props as any)?.dataType;
+			const fieldContext = props?.fieldContext || (props as any)?.type;
 			return {
-				title,
+				title: name,
 				dataIndex: name,
-				key: getUniqueColumnKey(props),
-				...(hasUnselectedConflict && { _hasUnselectedConflict: true }),
+				key: `${name}-${fieldDataType}-${fieldContext}`,
 				width: 145,
 				render: (value, item): JSX.Element => {
 					if (value === '') {

frontend/src/container/TracesTableComponent/TracesTableComponent.tsx

@@ -4,7 +4,6 @@ import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { ResizeTable } from 'components/ResizeTable';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import Controls from 'container/Controls';
-import { extractTelemetryFieldKeys } from 'container/OptionsMenu/utils';
 import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
 import { tableStyles } from 'container/TracesExplorer/ListView/styles';
 import {
@@ -13,7 +12,6 @@ import {
 	transformDataWithDate,
 } from 'container/TracesExplorer/ListView/utils';
 import { Pagination } from 'hooks/queryPagination';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import history from 'lib/history';
@@ -32,10 +30,6 @@ import { UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import {
-	DataSource,
-	TracesAggregatorOperator,
-} from 'types/common/queryBuilder';
 
 function TracesTableComponent({
 	widget,
@@ -60,35 +54,14 @@ function TracesTableComponent({
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
-	// Fetch available keys to detect variants
-
-	const { data: keysData } = useGetQueryKeySuggestions(
-		{
-			searchText: '',
-			signal: DataSource.TRACES,
-		},
-		{
-			queryKey: [DataSource.TRACES, TracesAggregatorOperator.NOOP, ''],
-		},
-	);
-
-	// Extract all available keys from API response
-	const allAvailableKeys = useMemo(() => extractTelemetryFieldKeys(keysData), [
-		keysData,
-	]);
-
 	const columns = useMemo(
 		() =>
 			getListColumns(
 				widget.selectedTracesFields || [],
 				formatTimezoneAdjustedTimestamp,
-				allAvailableKeys,
 			),
-		[
-			widget.selectedTracesFields,
-			formatTimezoneAdjustedTimestamp,
-			allAvailableKeys,
-		],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[widget.selectedTracesFields],
 	);
 
 	const dataLength =

frontend/src/container/TracesTableComponent/__tests__/TracesTableComponent.headers.test.tsx

@@ -1,159 +0,0 @@
-import { ColumnType } from 'antd/es/table';
-import { TelemetryFieldKey } from 'api/v5/v5';
-import {
-	mockAllAvailableKeys,
-	mockConflictingFieldsByContext,
-	mockConflictingFieldsByDatatype,
-} from 'container/OptionsMenu/__tests__/mockData';
-import { getListColumns } from 'container/TracesExplorer/ListView/utils';
-import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
-import { renderColumnHeader } from 'tests/columnHeaderHelpers';
-
-const HTTP_STATUS_CODE = 'http.status_code';
-const SERVICE_NAME = 'service.name';
-
-const COLUMN_UNDEFINED_ERROR = 'statusCodeColumn is undefined';
-const SERVICE_NAME_COLUMN_UNDEFINED_ERROR = 'serviceNameColumn is undefined';
-
-// Mock the timezone formatter
-const mockFormatTimezoneAdjustedTimestamp = jest.fn(
-	(input: TimestampInput): string => {
-		if (typeof input === 'string') {
-			return new Date(input).toISOString();
-		}
-		if (typeof input === 'number') {
-			return new Date(input / 1e6).toISOString();
-		}
-		return new Date(input).toISOString();
-	},
-);
-
-describe('TracesTableComponent - Column Headers', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('shows datatype in column header for conflicting columns', () => {
-		const selectedTracesFields: TelemetryFieldKey[] = [
-			mockConflictingFieldsByDatatype[0], // string variant
-		];
-
-		const columns = getListColumns(
-			selectedTracesFields,
-			mockFormatTimezoneAdjustedTimestamp,
-			mockAllAvailableKeys,
-		);
-
-		// Find the http.status_code column
-		const statusCodeColumn = columns.find(
-			(col): col is ColumnType<RowData> =>
-				'dataIndex' in col && (col.dataIndex as string) === HTTP_STATUS_CODE,
-		);
-
-		expect(statusCodeColumn).toBeDefined();
-		expect(statusCodeColumn?.title).toBeDefined();
-
-		if (!statusCodeColumn) {
-			throw new Error(COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(statusCodeColumn);
-		expect(container.textContent).toContain('http.status_code (string)');
-		expect(container.textContent).toContain('string');
-	});
-
-	it('shows tooltip icon when unselected conflicting variant exists', () => {
-		const selectedTracesFields: TelemetryFieldKey[] = [
-			mockConflictingFieldsByDatatype[0], // Only string variant selected
-		];
-
-		const columns = getListColumns(
-			selectedTracesFields,
-			mockFormatTimezoneAdjustedTimestamp,
-			mockAllAvailableKeys, // Contains number variant
-		);
-
-		const statusCodeColumn = columns.find(
-			(col): col is ColumnType<RowData> =>
-				'dataIndex' in col && (col.dataIndex as string) === HTTP_STATUS_CODE,
-		);
-
-		expect(statusCodeColumn).toBeDefined();
-
-		// Verify that _hasUnselectedConflict metadata is set correctly
-		const columnRecord = statusCodeColumn as Record<string, unknown>;
-		expect(columnRecord._hasUnselectedConflict).toBe(true);
-
-		if (!statusCodeColumn) {
-			throw new Error(COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(statusCodeColumn);
-
-		// Check for tooltip icon (InfoCircleOutlined)
-		const tooltipIcon = container.querySelector('.anticon-info-circle');
-		expect(tooltipIcon).toBeInTheDocument();
-	});
-
-	it('hides tooltip icon when all conflicting variants are selected', () => {
-		const selectedTracesFields: TelemetryFieldKey[] = [
-			...mockConflictingFieldsByDatatype, // Both variants selected
-		];
-
-		const columns = getListColumns(
-			selectedTracesFields,
-			mockFormatTimezoneAdjustedTimestamp,
-			mockAllAvailableKeys,
-		);
-
-		const statusCodeColumn = columns.find(
-			(col): col is ColumnType<RowData> =>
-				'dataIndex' in col && (col.dataIndex as string) === HTTP_STATUS_CODE,
-		);
-
-		expect(statusCodeColumn).toBeDefined();
-
-		// Verify that _hasUnselectedConflict metadata is NOT set when all variants are selected
-		const columnRecord = statusCodeColumn as Record<string, unknown>;
-		expect(columnRecord._hasUnselectedConflict).toBeUndefined();
-
-		if (!statusCodeColumn) {
-			throw new Error(COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(statusCodeColumn);
-
-		// Tooltip icon should NOT be present when all variants are selected
-		const tooltipIcon = container.querySelector('.anticon-info-circle');
-		expect(tooltipIcon).not.toBeInTheDocument();
-	});
-
-	it('shows context in header for attribute/resource conflicting fields', () => {
-		// When same datatype but different contexts, it shows context
-		const selectedTracesFields: TelemetryFieldKey[] = [
-			...mockConflictingFieldsByContext, // Both resource and attribute variants
-		];
-
-		const columns = getListColumns(
-			selectedTracesFields,
-			mockFormatTimezoneAdjustedTimestamp,
-			mockAllAvailableKeys,
-		);
-
-		const serviceNameColumn = columns.find(
-			(col): col is ColumnType<RowData> =>
-				'dataIndex' in col && (col.dataIndex as string) === SERVICE_NAME,
-		);
-
-		expect(serviceNameColumn).toBeDefined();
-
-		if (!serviceNameColumn) {
-			throw new Error(SERVICE_NAME_COLUMN_UNDEFINED_ERROR);
-		}
-
-		const { container } = renderColumnHeader(serviceNameColumn);
-		expect(container.textContent).toContain('service.name (resource)');
-		expect(container.textContent).toContain('resource');
-	});
-});

frontend/src/providers/KBarCommandPaletteProvider.tsx

@@ -1,229 +0,0 @@
-import setLocalStorageApi from 'api/browser/localstorage/set';
-import logEvent from 'api/common/logEvent';
-import updateUserPreference from 'api/v1/user/preferences/name/update';
-import { AxiosError } from 'axios';
-import ROUTES from 'constants/routes';
-import { USER_PREFERENCES } from 'constants/userPreferences';
-import { useThemeMode } from 'hooks/useDarkMode';
-import { THEME_MODE } from 'hooks/useDarkMode/constant';
-import { useNotifications } from 'hooks/useNotifications';
-import { KBarProvider } from 'kbar';
-import history from 'lib/history';
-import { useCallback } from 'react';
-import { useMutation } from 'react-query';
-import { UserPreference } from 'types/api/preferences/preference';
-import { showErrorNotification } from 'utils/error';
-
-import { useAppContext } from './App/App';
-
-export function KBarCommandPaletteProvider({
-	children,
-}: {
-	children: React.ReactNode;
-}): JSX.Element {
-	const { notifications } = useNotifications();
-
-	const { setAutoSwitch, setTheme } = useThemeMode();
-
-	const handleThemeChange = (value: string): void => {
-		logEvent('Account Settings: Theme Changed', {
-			theme: value,
-		});
-
-		if (value === 'auto') {
-			setAutoSwitch(true);
-		} else {
-			setAutoSwitch(false);
-			setTheme(value);
-		}
-	};
-
-	const onClickHandler = useCallback((key: string): void => {
-		history.push(key);
-	}, []);
-
-	const { updateUserPreferenceInContext } = useAppContext();
-
-	const { mutate: updateUserPreferenceMutation } = useMutation(
-		updateUserPreference,
-		{
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-			},
-		},
-	);
-
-	const handleOpenSidebar = useCallback((): void => {
-		setLocalStorageApi(USER_PREFERENCES.SIDENAV_PINNED, 'true');
-
-		// Update the context immediately
-		const save = {
-			name: USER_PREFERENCES.SIDENAV_PINNED,
-			value: true,
-		};
-
-		updateUserPreferenceInContext(save as UserPreference);
-
-		// Make the API call in the background
-		updateUserPreferenceMutation({
-			name: USER_PREFERENCES.SIDENAV_PINNED,
-			value: true,
-		});
-	}, [updateUserPreferenceInContext, updateUserPreferenceMutation]);
-
-	const handleCloseSidebar = useCallback((): void => {
-		setLocalStorageApi(USER_PREFERENCES.SIDENAV_PINNED, 'false');
-
-		// Update the context immediately
-		const save = {
-			name: USER_PREFERENCES.SIDENAV_PINNED,
-			value: false,
-		};
-
-		updateUserPreferenceInContext(save as UserPreference);
-
-		// Make the API call in the background
-		updateUserPreferenceMutation({
-			name: USER_PREFERENCES.SIDENAV_PINNED,
-			value: false,
-		});
-	}, [updateUserPreferenceInContext, updateUserPreferenceMutation]);
-	const kbarActions = [
-		{
-			id: 'home',
-			name: 'Go to Home',
-			shortcut: ['shift + h'],
-			keywords: 'home',
-			section: 'Navigation',
-			perform: (): void => {
-				onClickHandler(ROUTES.HOME);
-			},
-		},
-		{
-			id: 'dashboards',
-			name: 'Go to Dashboards',
-			shortcut: ['shift + d'],
-			keywords: 'dashboards',
-			section: 'Navigation',
-			perform: (): void => {
-				onClickHandler(ROUTES.ALL_DASHBOARD);
-			},
-		},
-		{
-			id: 'services',
-			name: 'Go to Services',
-			shortcut: ['shift + s'],
-			keywords: 'services monitoring',
-			section: 'Navigation',
-			perform: (): void => {
-				onClickHandler(ROUTES.APPLICATION);
-			},
-		},
-		{
-			id: 'traces',
-			name: 'Go to Traces',
-			shortcut: ['shift + t'],
-			keywords: 'traces',
-			section: 'Navigation',
-			perform: (): void => {
-				onClickHandler(ROUTES.TRACES_EXPLORER);
-			},
-		},
-		{
-			id: 'logs',
-			name: 'Go to Logs',
-			shortcut: ['shift + l'],
-			keywords: 'logs',
-			section: 'Navigation',
-			perform: (): void => {
-				onClickHandler(ROUTES.LOGS);
-			},
-		},
-		{
-			id: 'alerts',
-			name: 'Go to Alerts',
-			shortcut: ['shift + a'],
-			keywords: 'alerts',
-			section: 'Navigation',
-			perform: (): void => {
-				onClickHandler(ROUTES.LIST_ALL_ALERT);
-			},
-		},
-		{
-			id: 'exceptions',
-			name: 'Go to Exceptions',
-			shortcut: ['shift + e'],
-			keywords: 'exceptions errors',
-			section: 'Navigation',
-			perform: (): void => {
-				onClickHandler(ROUTES.ALL_ERROR);
-			},
-		},
-		{
-			id: 'messaging-queues',
-			name: 'Go to Messaging Queues',
-			shortcut: ['shift + m'],
-			keywords: 'messaging queues mq',
-			section: 'Navigation',
-			perform: (): void => {
-				onClickHandler(ROUTES.MESSAGING_QUEUES_OVERVIEW);
-			},
-		},
-		{
-			id: 'my-settings',
-			name: 'Go to Account Settings',
-			keywords: 'account settings',
-			section: 'Navigation',
-			perform: (): void => {
-				onClickHandler(ROUTES.MY_SETTINGS);
-			},
-		},
-		{
-			id: 'open-sidebar',
-			name: 'Open Sidebar',
-			keywords: 'sidebar navigation menu expand',
-			section: 'Settings',
-			perform: (): void => {
-				handleOpenSidebar();
-			},
-		},
-		{
-			id: 'collapse-sidebar',
-			name: 'Collapse Sidebar',
-			keywords: 'sidebar navigation menu collapse',
-			section: 'Settings',
-			perform: (): void => {
-				handleCloseSidebar();
-			},
-		},
-		{
-			id: 'dark-mode',
-			name: 'Switch to Dark Mode',
-			keywords: 'theme dark mode appearance',
-			section: 'Settings',
-			perform: (): void => {
-				handleThemeChange(THEME_MODE.DARK);
-			},
-		},
-		{
-			id: 'light-mode',
-			name: 'Switch to Light Mode [Beta]',
-			keywords: 'theme light mode appearance',
-			section: 'Settings',
-			perform: (): void => {
-				handleThemeChange(THEME_MODE.LIGHT);
-			},
-		},
-		{
-			id: 'system-theme',
-			name: 'Switch to System Theme',
-			keywords: 'system theme appearance',
-			section: 'Settings',
-			perform: (): void => {
-				handleThemeChange(THEME_MODE.SYSTEM);
-			},
-		},
-	];
-
-	return <KBarProvider actions={kbarActions}>{children}</KBarProvider>;
-}

frontend/src/providers/cmdKProvider.tsx

@@ -0,0 +1,50 @@
+import React, {
+	createContext,
+	ReactNode,
+	useContext,
+	useMemo,
+	useState,
+} from 'react';
+
+type CmdKContextType = {
+	open: boolean;
+	setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+	openCmdK: () => void;
+	closeCmdK: () => void;
+};
+
+const CmdKContext = createContext<CmdKContextType | null>(null);
+
+export function CmdKProvider({
+	children,
+}: {
+	children: ReactNode;
+}): JSX.Element {
+	const [open, setOpen] = useState<boolean>(false);
+
+	function openCmdK(): void {
+		setOpen(true);
+	}
+
+	function closeCmdK(): void {
+		setOpen(false);
+	}
+
+	const value = useMemo<CmdKContextType>(
+		() => ({
+			open,
+			setOpen,
+			openCmdK,
+			closeCmdK,
+		}),
+		[open],
+	);
+
+	return <CmdKContext.Provider value={value}>{children}</CmdKContext.Provider>;
+}
+
+export function useCmdK(): CmdKContextType {
+	const ctx = useContext(CmdKContext);
+	if (!ctx) throw new Error('useCmdK must be used inside CmdKProvider');
+	return ctx;
+}

frontend/src/providers/preferences/__tests__/logsLoaderConfig.test.ts

@@ -18,6 +18,16 @@ jest.mock('api/browser/localstorage/get', () => ({
 	default: jest.fn((key: string) => mockLocalStorage[key] || null),
 }));
 
+const mockLogsColumns = [
+	{ name: 'timestamp', signal: 'logs', fieldContext: 'log' },
+	{ name: 'body', signal: 'logs', fieldContext: 'log' },
+];
+
+const mockTracesColumns = [
+	{ name: 'service.name', signal: 'traces', fieldContext: 'resource' },
+	{ name: 'name', signal: 'traces', fieldContext: 'span' },
+];
+
 describe('logsLoaderConfig', () => {
 	// Save original location object
 	const originalWindowLocation = window.location;
@@ -157,4 +167,83 @@ describe('logsLoaderConfig', () => {
 			} as FormattingOptions,
 		});
 	});
+
+	describe('Column validation - filtering Traces columns', () => {
+		it('should filter out Traces columns (name with traces signal) from URL', async () => {
+			const mixedColumns = [...mockLogsColumns, ...mockTracesColumns];
+
+			mockedLocation.search = `?options=${encodeURIComponent(
+				JSON.stringify({
+					selectColumns: mixedColumns,
+				}),
+			)}`;
+
+			const result = await logsLoaderConfig.url();
+
+			// Should only keep logs columns
+			expect(result.columns).toEqual(mockLogsColumns);
+		});
+
+		it('should filter out Traces columns from localStorage', async () => {
+			const tracesColumns = [...mockTracesColumns];
+
+			mockLocalStorage[LOCALSTORAGE.LOGS_LIST_OPTIONS] = JSON.stringify({
+				selectColumns: tracesColumns,
+			});
+
+			const result = await logsLoaderConfig.local();
+
+			// Should filter out all Traces columns
+			expect(result.columns).toEqual([]);
+		});
+
+		it('should accept valid Logs columns from URL', async () => {
+			const logsColumns = [...mockLogsColumns];
+
+			mockedLocation.search = `?options=${encodeURIComponent(
+				JSON.stringify({
+					selectColumns: logsColumns,
+				}),
+			)}`;
+
+			const result = await logsLoaderConfig.url();
+
+			expect(result.columns).toEqual(logsColumns);
+		});
+
+		it('should fall back to defaults when all columns are filtered out from URL', async () => {
+			const tracesColumns = [...mockTracesColumns];
+
+			mockedLocation.search = `?options=${encodeURIComponent(
+				JSON.stringify({
+					selectColumns: tracesColumns,
+				}),
+			)}`;
+
+			const result = await logsLoaderConfig.url();
+
+			// Should return empty array, which triggers fallback to defaults in preferencesLoader
+			expect(result.columns).toEqual([]);
+		});
+
+		it('should handle columns without signal field (legacy data)', async () => {
+			const columnsWithoutSignal = [
+				{ name: 'body', fieldContext: 'log' },
+				{ name: 'service.name', fieldContext: 'resource' },
+			];
+
+			mockedLocation.search = `?options=${encodeURIComponent(
+				JSON.stringify({
+					selectColumns: columnsWithoutSignal,
+				}),
+			)}`;
+
+			const result = await logsLoaderConfig.url();
+
+			// Without signal field, columns pass through validation
+			// This matches the current implementation behavior where only columns
+			// with signal !== 'logs' are filtered out
+			expect(result.columns).toEqual(columnsWithoutSignal);
+		});
+	});
 });

frontend/src/providers/preferences/__tests__/tracesLoaderConfig.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { defaultTraceSelectedColumns } from 'container/OptionsMenu/constants';
 import {
@@ -126,4 +127,112 @@ describe('tracesLoaderConfig', () => {
 			columns: defaultTraceSelectedColumns as TelemetryFieldKey[],
 		});
 	});
+
+	describe('Column validation - filtering Logs columns', () => {
+		it('should filter out Logs columns (body) from URL', async () => {
+			const logsColumns = [
+				{ name: 'timestamp', signal: 'logs', fieldContext: 'log' },
+				{ name: 'body', signal: 'logs', fieldContext: 'log' },
+			];
+
+			mockedLocation.search = `?options=${encodeURIComponent(
+				JSON.stringify({
+					selectColumns: logsColumns,
+				}),
+			)}`;
+
+			const result = await tracesLoaderConfig.url();
+
+			// Should filter out all Logs columns
+			expect(result.columns).toEqual([]);
+		});
+
+		it('should filter out Logs columns (timestamp with logs signal) from URL', async () => {
+			const mixedColumns = [
+				{ name: 'timestamp', signal: 'logs', fieldContext: 'log' },
+				{ name: 'service.name', signal: 'traces', fieldContext: 'resource' },
+			];
+
+			mockedLocation.search = `?options=${encodeURIComponent(
+				JSON.stringify({
+					selectColumns: mixedColumns,
+				}),
+			)}`;
+
+			const result = await tracesLoaderConfig.url();
+
+			// Should only keep trace columns
+			expect(result.columns).toEqual([
+				{ name: 'service.name', signal: 'traces', fieldContext: 'resource' },
+			]);
+		});
+
+		it('should filter out Logs columns from localStorage', async () => {
+			const logsColumns = [
+				{ name: 'body', signal: 'logs', fieldContext: 'log' },
+				{ name: 'timestamp', signal: 'logs', fieldContext: 'log' },
+			];
+
+			mockLocalStorage[LOCALSTORAGE.TRACES_LIST_OPTIONS] = JSON.stringify({
+				selectColumns: logsColumns,
+			});
+
+			const result = await tracesLoaderConfig.local();
+
+			// Should filter out all Logs columns
+			expect(result.columns).toEqual([]);
+		});
+
+		it('should accept valid Trace columns from URL', async () => {
+			const traceColumns = [
+				{ name: 'service.name', signal: 'traces', fieldContext: 'resource' },
+				{ name: 'name', signal: 'traces', fieldContext: 'span' },
+			];
+
+			mockedLocation.search = `?options=${encodeURIComponent(
+				JSON.stringify({
+					selectColumns: traceColumns,
+				}),
+			)}`;
+
+			const result = await tracesLoaderConfig.url();
+
+			expect(result.columns).toEqual(traceColumns);
+		});
+
+		it('should fall back to defaults when all columns are filtered out from URL', async () => {
+			const logsColumns = [{ name: 'body', signal: 'logs' }];
+
+			mockedLocation.search = `?options=${encodeURIComponent(
+				JSON.stringify({
+					selectColumns: logsColumns,
+				}),
+			)}`;
+
+			const result = await tracesLoaderConfig.url();
+
+			// Should return empty array, which triggers fallback to defaults in preferencesLoader
+			expect(result.columns).toEqual([]);
+		});
+
+		it('should handle columns without signal field (legacy data)', async () => {
+			const columnsWithoutSignal = [
+				{ name: 'service.name', fieldContext: 'resource' },
+				{ name: 'body', fieldContext: 'log' },
+			];
+
+			mockedLocation.search = `?options=${encodeURIComponent(
+				JSON.stringify({
+					selectColumns: columnsWithoutSignal,
+				}),
+			)}`;
+
+			const result = await tracesLoaderConfig.url();
+
+			// Without signal field, columns pass through validation
+			// This matches the current implementation behavior where only columns
+			// with signal !== 'traces' are filtered out
+			expect(result.columns).toEqual(columnsWithoutSignal);
+		});
+	});
 });

frontend/src/providers/preferences/configs/logsLoaderConfig.ts

@@ -8,6 +8,18 @@ import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteRe
 
 import { FormattingOptions } from '../types';
 
+/**
+ * Validates if a column is valid for Logs Explorer
+ * Filters out Traces-specific columns that would cause query failures
+ */
+const isValidLogColumn = (col: {
+	name?: string;
+	signal?: string;
+	[key: string]: unknown;
+}): boolean =>
+	// If column has signal field, it must be 'logs'
+	!(col?.signal && col.signal !== 'logs');
+
 // --- LOGS preferences loader config ---
 const logsLoaders = {
 	local: (): {
@@ -18,8 +30,14 @@ const logsLoaders = {
 		if (local) {
 			try {
 				const parsed = JSON.parse(local);
+
+				const localColumns = parsed.selectColumns || [];
+
+				// Filter out invalid columns (e.g., Logs columns that might have been incorrectly stored)
+				const validLogColumns = localColumns.filter(isValidLogColumn);
+
 				return {
-					columns: parsed.selectColumns || [],
+					columns: validLogColumns.length > 0 ? validLogColumns : [],
 					formatting: {
 						maxLines: parsed.maxLines ?? 2,
 						format: parsed.format ?? 'table',
@@ -38,8 +56,14 @@ const logsLoaders = {
 		const urlParams = new URLSearchParams(window.location.search);
 		try {
 			const options = JSON.parse(urlParams.get('options') || '{}');
+
+			const urlColumns = options.selectColumns || [];
+
+			// Filter out invalid columns (e.g., Logs columns that might have been incorrectly stored)
+			const validLogColumns = urlColumns.filter(isValidLogColumn);
+
 			return {
-				columns: options.selectColumns || [],
+				columns: validLogColumns.length > 0 ? validLogColumns : [],
 				formatting: {
 					maxLines: options.maxLines ?? 2,
 					format: options.format ?? 'table',

frontend/src/providers/preferences/configs/tracesLoaderConfig.ts

@@ -5,6 +5,18 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import { defaultTraceSelectedColumns } from 'container/OptionsMenu/constants';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
+/**
+ * Validates if a column is valid for Traces Explorer
+ * Filters out Logs-specific columns that would cause query failures
+ */
+const isValidTraceColumn = (col: {
+	name?: string;
+	signal?: string;
+	[key: string]: unknown;
+}): boolean =>
+	// If column has signal field, it must be 'traces'
+	!(col?.signal && col.signal !== 'traces');
+
 // --- TRACES preferences loader config ---
 const tracesLoaders = {
 	local: (): {
@@ -14,8 +26,13 @@ const tracesLoaders = {
 		if (local) {
 			try {
 				const parsed = JSON.parse(local);
+				const localColumns = parsed.selectColumns || [];
+
+				// Filter out invalid columns (e.g., Logs columns that might have been incorrectly stored)
+				const validTraceColumns = localColumns.filter(isValidTraceColumn);
+
 				return {
-					columns: parsed.selectColumns || [],
+					columns: validTraceColumns.length > 0 ? validTraceColumns : [],
 				};
 			} catch {}
 		}
@@ -27,8 +44,15 @@ const tracesLoaders = {
 		const urlParams = new URLSearchParams(window.location.search);
 		try {
 			const options = JSON.parse(urlParams.get('options') || '{}');
+			const urlColumns = options.selectColumns || [];
+
+			// Filter out invalid columns (e.g., Logs columns)
+			// Only accept columns that are valid for Traces (signal='traces' or columns without signal that aren't logs-specific)
+			const validTraceColumns = urlColumns.filter(isValidTraceColumn);
+
+			// Only return columns if we have valid trace columns, otherwise return empty to fall back to defaults
 			return {
-				columns: options.selectColumns || [],
+				columns: validTraceColumns.length > 0 ? validTraceColumns : [],
 			};
 		} catch {}
 		return { columns: [] };

frontend/src/tests/columnHeaderHelpers.tsx

@@ -1,37 +0,0 @@
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { render } from '@testing-library/react';
-import { Tooltip } from 'antd';
-import { ColumnsType, ColumnType } from 'antd/es/table';
-import {
-	ColumnTitleIcon,
-	ColumnTitleWrapper,
-} from 'container/OptionsMenu/styles';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
-
-/**
- * Helper function that mimics ResizeTable's column title transformation logic.
- * This renders the column header the way it appears in the actual table when
- * onDragColumn is provided (which adds the tooltip icon for conflicting variants).
- *
- * Works with both ColumnType and ColumnsType column definitions.
- */
-export const renderColumnHeader = <T extends RowData | Record<string, unknown>>(
-	column: ColumnType<T> | ColumnsType<T>[number],
-): ReturnType<typeof render> => {
-	const columnRecord = column as Record<string, unknown>;
-	const hasUnselectedConflict = columnRecord._hasUnselectedConflict === true;
-	const titleText = column?.title?.toString() || '';
-
-	return render(
-		<ColumnTitleWrapper>
-			{titleText}
-			{hasUnselectedConflict && (
-				<Tooltip title="The same column with a different type or context exists">
-					<ColumnTitleIcon>
-						<InfoCircleOutlined />
-					</ColumnTitleIcon>
-				</Tooltip>
-			)}
-		</ColumnTitleWrapper>,
-	);
-};

frontend/src/tests/test-utils.tsx

@@ -29,6 +29,20 @@ import { QueryBuilderContextType } from 'types/common/queryBuilder';
 import { ROLES, USER_ROLES } from 'types/roles';
 // import { MemoryRouter as V5MemoryRouter } from 'react-router-dom-v5-compat';
 
+// Mock ResizeObserver
+class ResizeObserverMock {
+	// eslint-disable-next-line class-methods-use-this
+	observe(): void {}
+
+	// eslint-disable-next-line class-methods-use-this
+	unobserve(): void {}
+
+	// eslint-disable-next-line class-methods-use-this
+	disconnect(): void {}
+}
+
+global.ResizeObserver = (ResizeObserverMock as unknown) as typeof ResizeObserver;
+
 const queryClient = new QueryClient({
 	defaultOptions: {
 		queries: {

frontend/src/utils/__tests__/app.test.ts

@@ -0,0 +1,126 @@
+import { buildAbsolutePath } from '../app';
+
+const BASE_PATH = '/some-base-path';
+
+describe('buildAbsolutePath', () => {
+	const originalLocation = window.location;
+
+	afterEach(() => {
+		Object.defineProperty(window, 'location', {
+			writable: true,
+			value: originalLocation,
+		});
+	});
+
+	const mockLocation = (pathname: string): void => {
+		Object.defineProperty(window, 'location', {
+			writable: true,
+			value: {
+				pathname,
+				href: `http://localhost:8080${pathname}`,
+				origin: 'http://localhost:8080',
+				protocol: 'http:',
+				host: 'localhost',
+				hostname: 'localhost',
+				port: '',
+				search: '',
+				hash: '',
+			},
+		});
+	};
+
+	describe('when base path ends with a forward slash', () => {
+		beforeEach(() => {
+			mockLocation(`${BASE_PATH}/`);
+		});
+
+		it('should build absolute path without query string', () => {
+			const result = buildAbsolutePath({ relativePath: 'users' });
+			expect(result).toBe(`${BASE_PATH}/users`);
+		});
+
+		it('should build absolute path with query string', () => {
+			const result = buildAbsolutePath({
+				relativePath: 'users',
+				urlQueryString: 'id=123&sort=name',
+			});
+			expect(result).toBe(`${BASE_PATH}/users?id=123&sort=name`);
+		});
+
+		it('should handle nested relative paths', () => {
+			const result = buildAbsolutePath({ relativePath: 'users/profile/settings' });
+			expect(result).toBe(`${BASE_PATH}/users/profile/settings`);
+		});
+	});
+
+	describe('when base path does not end with a forward slash', () => {
+		beforeEach(() => {
+			mockLocation(`${BASE_PATH}`);
+		});
+
+		it('should append forward slash and build absolute path', () => {
+			const result = buildAbsolutePath({ relativePath: 'users' });
+			expect(result).toBe(`${BASE_PATH}/users`);
+		});
+
+		it('should append forward slash and build absolute path with query string', () => {
+			const result = buildAbsolutePath({
+				relativePath: 'users',
+				urlQueryString: 'filter=active',
+			});
+			expect(result).toBe(`${BASE_PATH}/users?filter=active`);
+		});
+	});
+
+	describe('edge cases', () => {
+		it('should handle empty relative path', () => {
+			mockLocation(`${BASE_PATH}/`);
+			const result = buildAbsolutePath({ relativePath: '' });
+			expect(result).toBe(`${BASE_PATH}/`);
+		});
+
+		it('should handle query string with empty relative path', () => {
+			mockLocation(`${BASE_PATH}/`);
+			const result = buildAbsolutePath({
+				relativePath: '',
+				urlQueryString: 'search=test',
+			});
+			expect(result).toBe(`${BASE_PATH}/?search=test`);
+		});
+
+		it('should handle relative path starting with forward slash', () => {
+			mockLocation(`${BASE_PATH}/`);
+			const result = buildAbsolutePath({ relativePath: '/users' });
+			expect(result).toBe(`${BASE_PATH}/users`);
+		});
+
+		it('should handle complex query strings', () => {
+			mockLocation(`${BASE_PATH}/dashboard`);
+			const result = buildAbsolutePath({
+				relativePath: 'reports',
+				urlQueryString: 'date=2024-01-01&type=summary&format=pdf',
+			});
+			expect(result).toBe(
+				`${BASE_PATH}/dashboard/reports?date=2024-01-01&type=summary&format=pdf`,
+			);
+		});
+
+		it('should handle undefined query string', () => {
+			mockLocation(`${BASE_PATH}/`);
+			const result = buildAbsolutePath({
+				relativePath: 'users',
+				urlQueryString: undefined,
+			});
+			expect(result).toBe(`${BASE_PATH}/users`);
+		});
+
+		it('should handle empty query string', () => {
+			mockLocation(`${BASE_PATH}/`);
+			const result = buildAbsolutePath({
+				relativePath: 'users',
+				urlQueryString: '',
+			});
+			expect(result).toBe(`${BASE_PATH}/users`);
+		});
+	});
+});

frontend/src/utils/__tests__/queryContextUtils.test.ts

@@ -61,6 +61,58 @@ describe('extractQueryPairs', () => {
 		]);
 	});
 
+	test('should test for filter expression with freeText', () => {
+		const input = "disconnected deployment.env not in ['mq-kafka']";
+		const result = extractQueryPairs(input);
+		expect(result).toEqual([
+			{
+				key: 'disconnected',
+				operator: '',
+				valueList: [],
+				valuesPosition: [],
+				hasNegation: false,
+				isMultiValue: false,
+				value: undefined,
+				position: {
+					keyStart: 0,
+					keyEnd: 11,
+					operatorStart: 0,
+					operatorEnd: 0,
+					negationStart: 0,
+					negationEnd: 0,
+					valueStart: undefined,
+					valueEnd: undefined,
+				},
+				isComplete: false,
+			},
+			{
+				key: 'deployment.env',
+				operator: 'in',
+				value: "['mq-kafka']",
+				valueList: ["'mq-kafka'"],
+				valuesPosition: [
+					{
+						start: 36,
+						end: 45,
+					},
+				],
+				hasNegation: true,
+				isMultiValue: true,
+				position: {
+					keyStart: 13,
+					keyEnd: 26,
+					operatorStart: 32,
+					operatorEnd: 33,
+					valueStart: 35,
+					valueEnd: 46,
+					negationStart: 28,
+					negationEnd: 30,
+				},
+				isComplete: true,
+			},
+		]);
+	});
+
 	test('should extract IN with numeric list inside parentheses', () => {
 		const input = 'id IN (1, 2, 3)';
 		const result = extractQueryPairs(input);

frontend/src/utils/app.ts

@@ -38,3 +38,33 @@ export function isIngestionActive(data: any): boolean {
 
 	return parseInt(value, 10) > 0;
 }
+
+/**
+ * Builds an absolute path by combining the current page's pathname with a relative path.
+ *
+ * @param {Object} params - The parameters for building the absolute path
+ * @param {string} params.relativePath - The relative path to append to the current pathname
+ * @param {string} [params.urlQueryString] - Optional query string to append to the final path (without leading '?')
+ *
+ * @returns {string} The constructed absolute path, optionally with query string
+ */
+export function buildAbsolutePath({
+	relativePath,
+	urlQueryString,
+}: {
+	relativePath: string;
+	urlQueryString?: string;
+}): string {
+	const { pathname } = window.location;
+	// ensure base path always ends with a forward slash
+	const basePath = pathname.endsWith('/') ? pathname : `${pathname}/`;
+
+	// handle relative path starting with a forward slash
+	const normalizedRelativePath = relativePath.startsWith('/')
+		? relativePath.slice(1)
+		: relativePath;
+
+	const absolutePath = basePath + normalizedRelativePath;
+
+	return urlQueryString ? `${absolutePath}?${urlQueryString}` : absolutePath;
+}

frontend/src/utils/queryContextUtils.ts

@@ -1339,8 +1339,7 @@ export function extractQueryPairs(query: string): IQueryPair[] {
 			else if (
 				currentPair &&
 				currentPair.key &&
-				(isConjunctionToken(token.type) ||
-					(token.type === FilterQueryLexer.KEY && isQueryPairComplete(currentPair)))
+				(isConjunctionToken(token.type) || token.type === FilterQueryLexer.KEY)
 			) {
 				queryPairs.push({
 					key: currentPair.key,

frontend/yarn.lock

@@ -3583,7 +3583,7 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@radix-ui/react-compose-refs@1.1.2":
+"@radix-ui/react-compose-refs@1.1.2", "@radix-ui/react-compose-refs@^1.1.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz#a2c4c47af6337048ee78ff6dc0d090b390d2bb30"
   integrity sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==
@@ -3600,6 +3600,26 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.2.tgz#61628ef269a433382c364f6f1e3788a6dc213a36"
   integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==
 
+"@radix-ui/react-dialog@^1.1.11", "@radix-ui/react-dialog@^1.1.6":
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz#1de3d7a7e9a17a9874d29c07f5940a18a119b632"
+  integrity sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-dismissable-layer" "1.1.11"
+    "@radix-ui/react-focus-guards" "1.1.3"
+    "@radix-ui/react-focus-scope" "1.1.7"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-portal" "1.1.9"
+    "@radix-ui/react-presence" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-slot" "1.2.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.6.3"
+
 "@radix-ui/react-direction@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b"
@@ -3657,7 +3677,7 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
-"@radix-ui/react-id@1.1.1":
+"@radix-ui/react-id@1.1.1", "@radix-ui/react-id@^1.1.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.1.tgz#1404002e79a03fe062b7e3864aa01e24bd1471f7"
   integrity sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==
@@ -3726,7 +3746,7 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
-"@radix-ui/react-portal@1.1.9", "@radix-ui/react-portal@^1.0.1":
+"@radix-ui/react-portal@1.1.9":
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.9.tgz#14c3649fe48ec474ac51ed9f2b9f5da4d91c4472"
   integrity sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==
@@ -3766,6 +3786,13 @@
   dependencies:
     "@radix-ui/react-slot" "1.2.3"
 
+"@radix-ui/react-primitive@^2.0.2":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz#2626ea309ebd63bf5767d3e7fc4081f81b993df0"
+  integrity sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==
+  dependencies:
+    "@radix-ui/react-slot" "1.2.4"
+
 "@radix-ui/react-roving-focus@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
@@ -3797,6 +3824,13 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.2"
 
+"@radix-ui/react-slot@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.2.4.tgz#63c0ba05fdf90cc49076b94029c852d7bac1fb83"
+  integrity sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+
 "@radix-ui/react-tabs@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz#993608eec55a5d1deddd446fa9978d2bc1053da2"
@@ -4048,11 +4082,6 @@
     rc-resize-observer "^1.3.1"
     rc-util "^5.38.0"
 
-"@reach/observe-rect@^1.1.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
-  integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
-
 "@react-dnd/asap@^5.0.1":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-5.0.2.tgz#1f81f124c1cd6f39511c11a881cfb0f715343488"
@@ -4306,6 +4335,21 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
+"@signozhq/command@0.0.0":
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/@signozhq/command/-/command-0.0.0.tgz#bd1e1cac7346e862dd61df64b756302e89e1a322"
+  integrity sha512-AwRYxZTi4o8SBOL4hmgcgbhCKXl2Qb/TUSLbSYEMFdiQSl5VYA8XZJv5fSYVMJkAIlOaHzFzR04XNEU7lZcBpw==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.1.11"
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    cmdk "^1.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
 "@signozhq/design-tokens@1.1.4":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@signozhq/design-tokens/-/design-tokens-1.1.4.tgz#5d5de5bd9d19b6a3631383db015cc4b70c3f7661"
@@ -7397,6 +7441,16 @@ clsx@^2.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
+cmdk@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-1.1.1.tgz#b8524272699ccaa37aaf07f36850b376bf3d58e5"
+  integrity sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==
+  dependencies:
+    "@radix-ui/react-compose-refs" "^1.1.1"
+    "@radix-ui/react-dialog" "^1.1.6"
+    "@radix-ui/react-id" "^1.1.0"
+    "@radix-ui/react-primitive" "^2.0.2"
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
@@ -9439,11 +9493,6 @@ fast-diff@^1.1.2:
   resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
-fast-equals@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-2.0.4.tgz#3add9410585e2d7364c2deeb6a707beadb24b927"
-  integrity sha512-caj/ZmjHljPrZtbzJ3kfH5ia/k4mTJe/qSiXAGzxZWRZgsgDV0cvNaQULqUX8t0/JVlzzEdYOwCN5DmzTxoD4w==
-
 fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.3.0:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
@@ -9797,11 +9846,6 @@ functions-have-names@^1.2.2, functions-have-names@^1.2.3:
   resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
-fuse.js@^6.6.2:
-  version "6.6.2"
-  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.6.2.tgz#fe463fed4b98c0226ac3da2856a415576dc9a111"
-  integrity sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==
-
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
@@ -12018,17 +12062,6 @@ kapsule@1, kapsule@^1.14:
   dependencies:
     lodash-es "4"
 
-kbar@0.1.0-beta.48:
-  version "0.1.0-beta.48"
-  resolved "https://registry.yarnpkg.com/kbar/-/kbar-0.1.0-beta.48.tgz#2db254cb2943f14200c5a5f47064135737527983"
-  integrity sha512-HD5A1dqfK6XGeoH4fRWTmRt4y76sDbtGxY4Dh2xNa5MYtvtKsqfz+nRZ0tKgcrjjGYN4rf5TLXMJuiE7Pb8rXg==
-  dependencies:
-    "@radix-ui/react-portal" "^1.0.1"
-    fast-equals "^2.0.3"
-    fuse.js "^6.6.2"
-    react-virtual "^2.8.2"
-    tiny-invariant "^1.2.0"
-
 keyv@^4.0.0:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
@@ -15596,13 +15629,6 @@ react-use@^17.3.2:
     ts-easing "^0.2.0"
     tslib "^2.1.0"
 
-react-virtual@^2.8.2:
-  version "2.10.4"
-  resolved "https://registry.yarnpkg.com/react-virtual/-/react-virtual-2.10.4.tgz#08712f0acd79d7d6f7c4726f05651a13b24d8704"
-  integrity sha512-Ir6+oPQZTVHfa6+JL9M7cvMILstFZH/H3jqeYeKI4MSUX+rIruVwFC6nGVXw9wqAw8L0Kg2KvfXxI85OvYQdpQ==
-  dependencies:
-    "@reach/observe-rect" "^1.1.0"
-
 react-virtuoso@4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.0.3.tgz#0dc8b10978095852d985b064157639b9fb9d9b1e"
@@ -17317,11 +17343,6 @@ tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
   resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz"
   integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
 
-tiny-invariant@^1.2.0:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
-  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
-
 tiny-warning@^1.0.0:
   version "1.0.3"
   resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"

go.mod

@@ -8,7 +8,7 @@ require (
 	github.com/ClickHouse/clickhouse-go/v2 v2.40.1
 	github.com/DATA-DOG/go-sqlmock v1.5.2
 	github.com/SigNoz/govaluate v0.0.0-20240203125216-988004ccc7fd
-	github.com/SigNoz/signoz-otel-collector v0.129.4
+	github.com/SigNoz/signoz-otel-collector v0.129.10-rc.9
 	github.com/antlr4-go/antlr/v4 v4.13.1
 	github.com/antonmedv/expr v1.15.3
 	github.com/cespare/xxhash/v2 v2.3.0
@@ -55,6 +55,8 @@ require (
 	github.com/spf13/cobra v1.10.1
 	github.com/srikanthccv/ClickHouse-go-mock v0.12.0
 	github.com/stretchr/testify v1.11.1
+	github.com/swaggest/jsonschema-go v0.3.78
+	github.com/swaggest/rest v0.2.75
 	github.com/tidwall/gjson v1.18.0
 	github.com/uptrace/bun v1.2.9
 	github.com/uptrace/bun/dialect/pgdialect v1.2.9
@@ -86,12 +88,21 @@ require (
 )
 
 require (
+	github.com/bytedance/gopkg v0.1.3 // indirect
+	github.com/bytedance/sonic v1.14.1 // indirect
+	github.com/bytedance/sonic/loader v0.3.0 // indirect
+	github.com/cloudwego/base64x v0.1.6 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/ncruces/go-strftime v0.1.9 // indirect
 	github.com/redis/go-redis/extra/rediscmd/v9 v9.15.1 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+	github.com/swaggest/refl v1.4.0 // indirect
+	github.com/swaggest/usecase v1.3.1 // indirect
+	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/uptrace/opentelemetry-go-extra/otelsql v0.3.2 // indirect
+	go.opentelemetry.io/collector/config/configretry v1.34.0 // indirect
 	go.yaml.in/yaml/v2 v2.4.2 // indirect
+	golang.org/x/arch v0.0.0-20210923205945-b76863e36670 // indirect
 	modernc.org/libc v1.66.10 // indirect
 	modernc.org/mathutil v1.7.1 // indirect
 	modernc.org/memory v1.11.0 // indirect
@@ -249,6 +260,7 @@ require (
 	github.com/stoewer/go-strcase v1.3.0 // indirect
 	github.com/stretchr/objx v0.5.2 // indirect
 	github.com/subosito/gotenv v1.6.0 // indirect
+	github.com/swaggest/openapi-go v0.2.60
 	github.com/tidwall/match v1.1.1 // indirect
 	github.com/tidwall/pretty v1.2.0 // indirect
 	github.com/tklauser/go-sysconf v0.3.15 // indirect

go.sum

@@ -106,8 +106,8 @@ github.com/SigNoz/expr v1.17.7-beta h1:FyZkleM5dTQ0O6muQfwGpoH5A2ohmN/XTasRCO72g
 github.com/SigNoz/expr v1.17.7-beta/go.mod h1:8/vRC7+7HBzESEqt5kKpYXxrxkr31SaO8r40VO/1IT4=
 github.com/SigNoz/govaluate v0.0.0-20240203125216-988004ccc7fd h1:Bk43AsDYe0fhkbj57eGXx8H3ZJ4zhmQXBnrW523ktj8=
 github.com/SigNoz/govaluate v0.0.0-20240203125216-988004ccc7fd/go.mod h1:nxRcH/OEdM8QxzH37xkGzomr1O0JpYBRS6pwjsWW6Pc=
-github.com/SigNoz/signoz-otel-collector v0.129.4 h1:DGDu9y1I1FU+HX4eECPGmfhnXE4ys4yr7LL6znbf6to=
-github.com/SigNoz/signoz-otel-collector v0.129.4/go.mod h1:xyR+coBzzO04p6Eu+ql2RVYUl/jFD+8hD9lArcc9U7g=
+github.com/SigNoz/signoz-otel-collector v0.129.10-rc.9 h1:WmYDSSwzyW2yiJ3tPq5AFdjsrz3NBdtPkygtFKOsACw=
+github.com/SigNoz/signoz-otel-collector v0.129.10-rc.9/go.mod h1:4eJCRUd/P4OiCHXvGYZK8q6oyBVGJFVj/G6qKSoN/TQ=
 github.com/Yiling-J/theine-go v0.6.2 h1:1GeoXeQ0O0AUkiwj2S9Jc0Mzx+hpqzmqsJ4kIC4M9AY=
 github.com/Yiling-J/theine-go v0.6.2/go.mod h1:08QpMa5JZ2pKN+UJCRrCasWYO1IKCdl54Xa836rpmDU=
 github.com/afex/hystrix-go v0.0.0-20180502004556-fa1af6a1f4f5/go.mod h1:SkGFH1ia65gfNATL8TAiHDNxPzPdmEL5uirI2Uyuz6c=
@@ -158,10 +158,20 @@ github.com/beorn7/perks v1.0.1/go.mod h1:G2ZrVWU2WbWT9wwq4/hrbKbnv/1ERSJQ0ibhJ6r
 github.com/bgentry/speakeasy v0.1.0/go.mod h1:+zsyZBPWlz7T6j88CTgSN5bM796AkVf0kBD4zp0CCIs=
 github.com/bmizerany/assert v0.0.0-20160611221934-b7ed37b82869 h1:DDGfHa7BWjL4YnC6+E63dPcxHo2sUxDIu8g3QgEJdRY=
 github.com/bmizerany/assert v0.0.0-20160611221934-b7ed37b82869/go.mod h1:Ekp36dRnpXw/yCqJaO+ZrUyxD+3VXMFFr56k5XYrpB4=
+github.com/bool64/dev v0.2.40 h1:LUSD+Aq+WB3KwVntqXstevJ0wB12ig1bEgoG8ZafsZU=
+github.com/bool64/dev v0.2.40/go.mod h1:iJbh1y/HkunEPhgebWRNcs8wfGq7sjvJ6W5iabL8ACg=
+github.com/bool64/shared v0.1.5 h1:fp3eUhBsrSjNCQPcSdQqZxxh9bBwrYiZ+zOKFkM0/2E=
+github.com/bool64/shared v0.1.5/go.mod h1:081yz68YC9jeFB3+Bbmno2RFWvGKv1lPKkMP6MHJlPs=
 github.com/bsm/ginkgo/v2 v2.12.0 h1:Ny8MWAHyOepLGlLKYmXG4IEkioBysk6GpaRTLC8zwWs=
 github.com/bsm/ginkgo/v2 v2.12.0/go.mod h1:SwYbGRRDovPVboqFv0tPTcG1sN61LM1Z4ARdbAV9g4c=
 github.com/bsm/gomega v1.27.10 h1:yeMWxP2pV2fG3FgAODIY8EiRE3dy0aeFYt4l7wh6yKA=
 github.com/bsm/gomega v1.27.10/go.mod h1:JyEr/xRbxbtgWNi8tIEVPUYZ5Dzef52k01W3YH0H+O0=
+github.com/bytedance/gopkg v0.1.3 h1:TPBSwH8RsouGCBcMBktLt1AymVo2TVsBVCY4b6TnZ/M=
+github.com/bytedance/gopkg v0.1.3/go.mod h1:576VvJ+eJgyCzdjS+c4+77QF3p7ubbtiKARP3TxducM=
+github.com/bytedance/sonic v1.14.1 h1:FBMC0zVz5XUmE4z9wF4Jey0An5FueFvOsTKKKtwIl7w=
+github.com/bytedance/sonic v1.14.1/go.mod h1:gi6uhQLMbTdeP0muCnrjHLeCUPyb70ujhnNlhOylAFc=
+github.com/bytedance/sonic/loader v0.3.0 h1:dskwH8edlzNMctoruo8FPTJDF3vLtDT0sXZwvZJyqeA=
+github.com/bytedance/sonic/loader v0.3.0/go.mod h1:N8A3vUdtUebEY2/VQC0MyhYeKUFosQU6FxH2JmUe6VI=
 github.com/cactus/go-statsd-client/statsd v0.0.0-20200423205355-cb0885a1018c/go.mod h1:l/bIBLeOl9eX+wxJAzxS4TveKRtAqlyDpHjhkfO0MEI=
 github.com/cenkalti/backoff/v4 v4.3.0 h1:MyRJ/UdXutAwSAT+s3wNd7MfTIcy71VQueUuFK343L8=
 github.com/cenkalti/backoff/v4 v4.3.0/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
@@ -178,6 +188,8 @@ github.com/chzyer/test v0.0.0-20180213035817-a1ea475d72b1/go.mod h1:Q3SI9o4m/ZMn
 github.com/circonus-labs/circonus-gometrics v2.3.1+incompatible/go.mod h1:nmEj6Dob7S7YxXgwXpfOuvO54S+tGdZdw9fuRZt25Ag=
 github.com/circonus-labs/circonusllhist v0.1.3/go.mod h1:kMXHVDlOchFAehlya5ePtbp5jckzBHf4XRpQvBOLI+I=
 github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
+github.com/cloudwego/base64x v0.1.6 h1:t11wG9AECkCDk5fMSoxmufanudBtJ+/HemLstXDLI2M=
+github.com/cloudwego/base64x v0.1.6/go.mod h1:OFcloc187FXDaYHvrNIjxSe8ncn0OOM8gEHfghB2IPU=
 github.com/cncf/udpa/go v0.0.0-20191209042840-269d4d468f6f/go.mod h1:M8M6+tZqaGXZJjfX53e64911xZQV5JYwmTeXPW+k8Sc=
 github.com/cncf/udpa/go v0.0.0-20200629203442-efcf912fb354/go.mod h1:WmhPx2Nbnhtbo57+VJT5O0JRkEi1Wbu0z5j0R8u5Hbk=
 github.com/cncf/udpa/go v0.0.0-20201120205902-5459f2c99403/go.mod h1:WmhPx2Nbnhtbo57+VJT5O0JRkEi1Wbu0z5j0R8u5Hbk=
@@ -570,6 +582,8 @@ github.com/huandu/go-sqlbuilder v1.35.0 h1:ESvxFHN8vxCTudY1Vq63zYpU5yJBESn19sf6k
 github.com/huandu/go-sqlbuilder v1.35.0/go.mod h1:mS0GAtrtW+XL6nM2/gXHRJax2RwSW1TraavWDFAc1JA=
 github.com/huandu/xstrings v1.4.0 h1:D17IlohoQq4UcpqD7fDk80P7l+lwAmlFaBHgOipl2FU=
 github.com/huandu/xstrings v1.4.0/go.mod h1:y5/lhBue+AyNmUVz9RLU9xbLR0o4KIIExikq4ovT0aE=
+github.com/iancoleman/orderedmap v0.3.0 h1:5cbR2grmZR/DiVt+VJopEhtVs9YGInGIxAoMJn+Ichc=
+github.com/iancoleman/orderedmap v0.3.0/go.mod h1:XuLcCUkdL5owUCQeF2Ue9uuw1EptkJDkXXS7VoV7XGE=
 github.com/ianlancetaylor/demangle v0.0.0-20181102032728-5e5cf60278f6/go.mod h1:aSSvb/t6k1mPoxDqO4vJh6VOCGPwU4O0C2/Eqndh1Sc=
 github.com/ianlancetaylor/demangle v0.0.0-20200824232613-28f6c0f3b639/go.mod h1:aSSvb/t6k1mPoxDqO4vJh6VOCGPwU4O0C2/Eqndh1Sc=
 github.com/inconshreveable/mousetrap v1.1.0 h1:wN+x4NVGpMsO7ErUn/mUI3vEoE6Jt13X2s0bqwp9tc8=
@@ -890,6 +904,8 @@ github.com/sagikazarmark/locafero v0.9.0 h1:GbgQGNtTrEmddYDSAH9QLRyfAHY12md+8YFT
 github.com/sagikazarmark/locafero v0.9.0/go.mod h1:UBUyz37V+EdMS3hDF3QWIiVr/2dPrx49OMO0Bn0hJqk=
 github.com/samber/lo v1.47.0 h1:z7RynLwP5nbyRscyvcD043DWYoOcYRv3mV8lBeqOCLc=
 github.com/samber/lo v1.47.0/go.mod h1:RmDH9Ct32Qy3gduHQuKJ3gW1fMHAnE/fAzQuf6He5cU=
+github.com/santhosh-tekuri/jsonschema/v3 v3.1.0 h1:levPcBfnazlA1CyCMC3asL/QLZkq9pa8tQZOH513zQw=
+github.com/santhosh-tekuri/jsonschema/v3 v3.1.0/go.mod h1:8kzK2TC0k0YjOForaAHdNEa7ik0fokNa2k30BKJ/W7Y=
 github.com/scaleway/scaleway-sdk-go v1.0.0-beta.33 h1:KhF0WejiUTDbL5X55nXowP7zNopwpowa6qaMAWyIE+0=
 github.com/scaleway/scaleway-sdk-go v1.0.0-beta.33/go.mod h1:792k1RTU+5JeMXm35/e2Wgp71qPH/DmDoZrRc+EFZDk=
 github.com/sean-/seed v0.0.0-20170313163322-e2103e2c3529 h1:nn5Wsu0esKSJiIVhscUtVbo7ada43DJhG55ua/hjS5I=
@@ -902,8 +918,8 @@ github.com/segmentio/asm v1.2.0 h1:9BQrFxC+YOHJlTlHGkTrFWf59nbL3XnCoFLTwDCI7ys=
 github.com/segmentio/asm v1.2.0/go.mod h1:BqMnlJP91P8d+4ibuonYZw9mfnzI9HfxselHZr5aAcs=
 github.com/segmentio/backo-go v1.0.1 h1:68RQccglxZeyURy93ASB/2kc9QudzgIDexJ927N++y4=
 github.com/segmentio/backo-go v1.0.1/go.mod h1:9/Rh6yILuLysoQnZ2oNooD2g7aBnvM7r/fNVxRNWfBc=
-github.com/sergi/go-diff v1.1.0 h1:we8PVUC3FE2uYfodKH/nBHMSetSfHDR6scGdBi+erh0=
-github.com/sergi/go-diff v1.1.0/go.mod h1:STckp+ISIX8hZLjrqAeVduY0gWCT9IjLuqbuNXdaHfM=
+github.com/sergi/go-diff v1.3.1 h1:xkr+Oxo4BOQKmkn/B9eMK0g5Kg/983T9DqqPHwYqD+8=
+github.com/sergi/go-diff v1.3.1/go.mod h1:aMJSSKb2lpPvRNec0+w3fl7LP9IOFzdc9Pa4NFbPK1I=
 github.com/sethvargo/go-password v0.2.0 h1:BTDl4CC/gjf/axHMaDQtw507ogrXLci6XRiLc7i/UHI=
 github.com/sethvargo/go-password v0.2.0/go.mod h1:Ym4Mr9JXLBycr02MFuVQ/0JHidNetSgbzutTr3zsYXE=
 github.com/sethvargo/go-retry v0.3.0 h1:EEt31A35QhrcRZtrYFDTBg91cqZVnFL2navjDrah2SE=
@@ -975,6 +991,18 @@ github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD
 github.com/subosito/gotenv v1.4.1/go.mod h1:ayKnFf/c6rvx/2iiLrJUk1e6plDbT3edrFNGqEflhK0=
 github.com/subosito/gotenv v1.6.0 h1:9NlTDc1FTs4qu0DDq7AEtTPNw6SVm7uBMsUCUjABIf8=
 github.com/subosito/gotenv v1.6.0/go.mod h1:Dk4QP5c2W3ibzajGcXpNraDfq2IrhjMIvMSWPKKo0FU=
+github.com/swaggest/assertjson v1.9.0 h1:dKu0BfJkIxv/xe//mkCrK5yZbs79jL7OVf9Ija7o2xQ=
+github.com/swaggest/assertjson v1.9.0/go.mod h1:b+ZKX2VRiUjxfUIal0HDN85W0nHPAYUbYH5WkkSsFsU=
+github.com/swaggest/jsonschema-go v0.3.78 h1:5+YFQrLxOR8z6CHvgtZc42WRy/Q9zRQQ4HoAxlinlHw=
+github.com/swaggest/jsonschema-go v0.3.78/go.mod h1:4nniXBuE+FIGkOGuidjOINMH7OEqZK3HCSbfDuLRI0g=
+github.com/swaggest/openapi-go v0.2.60 h1:kglHH/WIfqAglfuWL4tu0LPakqNYySzklUWx06SjSKo=
+github.com/swaggest/openapi-go v0.2.60/go.mod h1:jmFOuYdsWGtHU0BOuILlHZQJxLqHiAE6en+baE+QQUk=
+github.com/swaggest/refl v1.4.0 h1:CftOSdTqRqs100xpFOT/Rifss5xBV/CT0S/FN60Xe9k=
+github.com/swaggest/refl v1.4.0/go.mod h1:4uUVFVfPJ0NSX9FPwMPspeHos9wPFlCMGoPRllUbpvA=
+github.com/swaggest/rest v0.2.75 h1:MW9zZ3d0kduJ2KdWnSYZIIrZJ1v3Kg+S7QZrDCZcXws=
+github.com/swaggest/rest v0.2.75/go.mod h1:yw+PNgpNSdD6W46r60keVXdsBB+7SKt64i2qpeuBsq4=
+github.com/swaggest/usecase v1.3.1 h1:JdKV30MTSsDxAXxkldLNcEn8O2uf565khyo6gr5sS+w=
+github.com/swaggest/usecase v1.3.1/go.mod h1:cae3lDd5VDmM36OQcOOOdAlEDg40TiQYIp99S9ejWqA=
 github.com/tidwall/gjson v1.18.0 h1:FIDeeyB800efLX89e5a8Y0BNH+LOngJyGrIWxG2FKQY=
 github.com/tidwall/gjson v1.18.0/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
 github.com/tidwall/match v1.1.1 h1:+Ho715JplO36QYgwN9PGYNhgZvoUSc9X2c80KVTi+GA=
@@ -991,6 +1019,8 @@ github.com/tmthrgd/go-hex v0.0.0-20190904060850-447a3041c3bc/go.mod h1:bciPuU6GH
 github.com/trivago/tgo v1.0.7 h1:uaWH/XIy9aWYWpjm2CU3RpcqZXmX2ysQ9/Go+d9gyrM=
 github.com/trivago/tgo v1.0.7/go.mod h1:w4dpD+3tzNIIiIfkWWa85w5/B77tlvdZckQ+6PkFnhc=
 github.com/tv42/httpunix v0.0.0-20150427012821-b75d8614f926/go.mod h1:9ESjWnEqriFuLhtthL60Sar/7RFoluCcXsuvEwTV5KM=
+github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
+github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
 github.com/uptrace/bun v1.2.9 h1:OOt2DlIcRUMSZPr6iXDFg/LaQd59kOxbAjpIVHddKRs=
 github.com/uptrace/bun v1.2.9/go.mod h1:r2ZaaGs9Ru5bpGTr8GQfp8jp+TlCav9grYCPOu2CJSg=
 github.com/uptrace/bun/dialect/pgdialect v1.2.9 h1:caf5uFbOGiXvadV6pA5gn87k0awFFxL1kuuY3SpxnWk=
@@ -1019,6 +1049,10 @@ github.com/xdg-go/stringprep v1.0.3/go.mod h1:W3f5j4i+9rC0kuIEJL0ky1VpHXQU3ocBgk
 github.com/xyproto/randomstring v1.0.5 h1:YtlWPoRdgMu3NZtP45drfy1GKoojuR7hmRcnhZqKjWU=
 github.com/xyproto/randomstring v1.0.5/go.mod h1:rgmS5DeNXLivK7YprL0pY+lTuhNQW3iGxZ18UQApw/E=
 github.com/youmark/pkcs8 v0.0.0-20181117223130-1be2e3e5546d/go.mod h1:rHwXgn7JulP+udvsHwJoVG1YGAP6VLg4y9I5dyZdqmA=
+github.com/yudai/gojsondiff v1.0.0 h1:27cbfqXLVEJ1o8I6v3y9lg8Ydm53EKqHXAOMxEGlCOA=
+github.com/yudai/gojsondiff v1.0.0/go.mod h1:AY32+k2cwILAkW1fbgxQ5mUmMiZFgLIV+FBNExI05xg=
+github.com/yudai/golcs v0.0.0-20170316035057-ecda9a501e82 h1:BHyfKlQyqbsFN5p3IfnEUduWvb9is428/nNb5L3U01M=
+github.com/yudai/golcs v0.0.0-20170316035057-ecda9a501e82/go.mod h1:lgjkn3NuSvDfVJdfcVVdX+jpBxNmX4rDAzaS45IcYoM=
 github.com/yuin/goldmark v1.1.25/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.1.27/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.1.32/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
@@ -1235,6 +1269,8 @@ go.yaml.in/yaml/v2 v2.4.2 h1:DzmwEr2rDGHl7lsFgAHxmNz/1NlQ7xLIrlN2h5d1eGI=
 go.yaml.in/yaml/v2 v2.4.2/go.mod h1:081UH+NErpNdqlCXm3TtEran0rJZGxAYx9hb/ELlsPU=
 go.yaml.in/yaml/v3 v3.0.4 h1:tfq32ie2Jv2UxXFdLJdh3jXuOzWiL1fo0bu/FbuKpbc=
 go.yaml.in/yaml/v3 v3.0.4/go.mod h1:DhzuOOF2ATzADvBadXxruRBLzYTpT36CKvDb3+aBEFg=
+golang.org/x/arch v0.0.0-20210923205945-b76863e36670 h1:18EFjUmQOcUvxNYSkA6jO9VAiXCnxFY6NyDX0bHDmkU=
+golang.org/x/arch v0.0.0-20210923205945-b76863e36670/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
 golang.org/x/crypto v0.0.0-20180904163835-0709b304e793/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20190510104115-cbcb75029529/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=

pkg/apiserver/apiserver.go

@@ -0,0 +1,13 @@
+package apiserver
+
+import (
+	"github.com/gorilla/mux"
+)
+
+type APIServer interface {
+	// Returns the mux router for the API server. Primarily used for collecting OpenAPI operations.
+	Router() *mux.Router
+
+	// Adds the API server routes to an existing router. This is a backwards compatible method for adding routes to the input router.
+	AddToRouter(router *mux.Router) error
+}

pkg/apiserver/signozapiserver/authdomain.go

@@ -0,0 +1,82 @@
+package signozapiserver
+
+import (
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/http/handler"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/gorilla/mux"
+)
+
+func (provider *provider) addAuthDomainRoutes(router *mux.Router) error {
+	if err := router.Handle("/api/v1/domains", handler.New(provider.authZ.AdminAccess(provider.authDomainHandler.List), handler.OpenAPIDef{
+		ID:                  "ListAuthDomains",
+		Tags:                []string{"authdomains"},
+		Summary:             "List all auth domains",
+		Description:         "This endpoint lists all auth domains",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            make([]*authtypes.GettableAuthDomain, 0),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v1/domains", handler.New(provider.authZ.AdminAccess(provider.authDomainHandler.Create), handler.OpenAPIDef{
+		ID:                  "CreateAuthDomain",
+		Tags:                []string{"authdomains"},
+		Summary:             "Create auth domain",
+		Description:         "This endpoint creates an auth domain",
+		Request:             new(authtypes.PostableAuthDomain),
+		RequestContentType:  "application/json",
+		Response:            new(authtypes.GettableAuthDomain),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusConflict},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodPost).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v1/domains/{id}", handler.New(provider.authZ.AdminAccess(provider.authDomainHandler.Update), handler.OpenAPIDef{
+		ID:                  "UpdateAuthDomain",
+		Tags:                []string{"authdomains"},
+		Summary:             "Update auth domain",
+		Description:         "This endpoint updates an auth domain",
+		Request:             new(authtypes.UpdateableAuthDomain),
+		RequestContentType:  "application/json",
+		Response:            nil,
+		ResponseContentType: "",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusConflict},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v1/domains/{id}", handler.New(provider.authZ.AdminAccess(provider.authDomainHandler.Delete), handler.OpenAPIDef{
+		ID:                  "DeleteAuthDomain",
+		Tags:                []string{"authdomains"},
+		Summary:             "Delete auth domain",
+		Description:         "This endpoint deletes an auth domain",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            nil,
+		ResponseContentType: "",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusBadRequest},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodDelete).GetError(); err != nil {
+		return err
+	}
+
+	return nil
+}