Merge branch 'main' into optimization/uplot-data

In light mode, selected values in query builder Select components appeared
disabled due to inheriting light-colored text from dark mode styles.

This fix adds explicit text color (--text-ink-400) for .ant-select-selection-item
elements in light mode across QueryBuilder, QueryBuilderV2, and
MetricsAggregateSection styles.

Fixes #9801

Signed-off-by: majiayu000 <1835304752@qq.com>
Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>

.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

.gitignore

@@ -49,6 +49,7 @@ ee/query-service/tests/test-deploy/data/
 # local data
 *.backup
 *.db
+**/db
 /deploy/docker/clickhouse-setup/data/
 /deploy/docker-swarm/clickhouse-setup/data/
 bin/

Makefile

@@ -72,6 +72,12 @@ devenv-up: devenv-clickhouse devenv-signoz-otel-collector ## Start both clickhou
 	@echo "   - ClickHouse: http://localhost:8123"
 	@echo "   - Signoz OTel Collector: grpc://localhost:4317, http://localhost:4318"
 
+.PHONY: devenv-clickhouse-clean
+devenv-clickhouse-clean: ## Clean all ClickHouse data from filesystem
+	@echo "Removing ClickHouse data..."
+	@rm -rf .devenv/docker/clickhouse/fs/tmp/*
+	@echo "ClickHouse data cleaned!"
+
 ##############################################################
 # go commands
 ##############################################################

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,

frontend/src/AppRoutes/index.tsx

@@ -6,6 +6,7 @@ import logEvent from 'api/common/logEvent';
 import AppLoading from 'components/AppLoading/AppLoading';
 import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
+import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -368,6 +369,9 @@ function App(): JSX.Element {
 							<NotificationProvider>
 								<ErrorModalProvider>
 									{isLoggedInState && <CmdKPalette userRole={user.role} />}
+									{isLoggedInState && (
+										<ShiftHoldOverlayController userRole={user.role} />
+									)}
 									<PrivateRoute>
 										<ResourceProvider>
 											<QueryBuilderProvider>

frontend/src/api/metricsExplorer/v2/getMetricMetadata.ts

@@ -0,0 +1,29 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
+
+export const getMetricMetadata = async (
+	metricName: string,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<MetricMetadataResponse> | ErrorResponseV2> => {
+	try {
+		const encodedMetricName = encodeURIComponent(metricName);
+		const response = await axios.get(
+			`/metrics/metadata?metricName=${encodedMetricName}`,
+			{
+				signal,
+				headers,
+			},
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};

frontend/src/components/LogDetail/index.tsx

@@ -47,7 +47,6 @@ import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isCtrlOrMMetaKey } from 'utils/isCtrlOrMMetaKey';
 
 import { RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
 import { LogDetailInnerProps, LogDetailProps } from './LogDetail.interfaces';
@@ -134,7 +133,7 @@ function LogDetailInner({
 	};
 
 	// Go to logs explorer page with the log data
-	const handleOpenInExplorer = (event: React.MouseEvent): void => {
+	const handleOpenInExplorer = (): void => {
 		const queryParams = {
 			[QueryParams.activeLogId]: `"${log?.id}"`,
 			[QueryParams.startTime]: minTime?.toString() || '',
@@ -147,16 +146,7 @@ function LogDetailInner({
 				),
 			),
 		};
-
-		if (isCtrlOrMMetaKey(event)) {
-			window.open(
-				`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`,
-				'_blank',
-				'noopener,noreferrer',
-			);
-		} else {
-			safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`);
-		}
+		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`);
 	};
 
 	const handleQueryExpressionChange = useCallback(

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -1,11 +1,15 @@
-.log-field-key {
-	padding-right: 5px;
+.log-field-container {
+	display: flex;
+	overflow: hidden;
+	width: 100%;
+	align-items: baseline;
+}
+.log-field-key,
+.log-field-key-colon {
 	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
-	line-height: 18px; /* 128.571% */
-	letter-spacing: -0.07px;
 
 	&.small {
 		font-size: 11px;
@@ -22,6 +26,20 @@
 		line-height: 24px;
 	}
 }
+.log-field-key {
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
+	white-space: nowrap;
+	display: inline-block;
+	max-width: 20vw;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	margin: 0;
+}
+.log-field-key-colon {
+	min-width: 0.8rem;
+	flex-shrink: 0;
+}
 .log-value {
 	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
@@ -158,7 +176,8 @@
 }
 
 .lightMode {
-	.log-field-key {
+	.log-field-key,
+	.log-field-key-colon {
 		color: var(--text-slate-400);
 	}
 	.log-value {
@@ -170,3 +189,10 @@
 		}
 	}
 }
+
+.dark {
+	.log-field-key,
+	.log-field-key-colon {
+		color: rgba(255, 255, 255, 0.45);
+	}
+}

frontend/src/components/Logs/ListLogView/index.tsx

@@ -25,13 +25,7 @@ import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButton
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorType } from '../LogStateIndicator/utils';
 // styles
-import {
-	Container,
-	LogContainer,
-	LogText,
-	Text,
-	TextContainer,
-} from './styles';
+import { Container, LogContainer, LogText } from './styles';
 import { isValidLogField } from './util';
 
 interface LogFieldProps {
@@ -58,16 +52,18 @@ function LogGeneralField({
 	);
 
 	return (
-		<TextContainer>
-			<Text ellipsis type="secondary" className={cx('log-field-key', fontSize)}>
-				{`${fieldKey} : `}
-			</Text>
+		<div className="log-field-container">
+			<p className={cx('log-field-key', fontSize)} title={fieldKey}>
+				{fieldKey}
+			</p>
+			<span className={cx('log-field-key-colon', fontSize)}>&nbsp;:&nbsp;</span>
 			<LogText
 				dangerouslySetInnerHTML={html}
 				className={cx('log-value', fontSize)}
+				title={fieldValue}
 				linesPerRow={linesPerRow > 1 ? linesPerRow : undefined}
 			/>
-		</TextContainer>
+		</div>
 	);
 }
 

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { Card, Typography } from 'antd';
+import { Card } from 'antd';
 import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
 import { getActiveLogBackground } from 'utils/logs';
@@ -46,19 +46,6 @@ export const Container = styled(Card)<{
 			getActiveLogBackground($isActiveLog, $isDarkMode, $logType)}
 `;
 
-export const Text = styled(Typography.Text)`
-	&&& {
-		min-width: 2.5rem;
-		white-space: nowrap;
-	}
-`;
-
-export const TextContainer = styled.div`
-	display: flex;
-	overflow: hidden;
-	width: 100%;
-`;
-
 export const LogContainer = styled.div<LogContainerProps>`
 	margin-left: 0.5rem;
 	display: flex;

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -28,7 +28,6 @@ import React, {
 	useState,
 } from 'react';
 import { Virtuoso } from 'react-virtuoso';
-import { isCtrlOrMMetaKey } from 'utils/isCtrlOrMMetaKey';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
@@ -903,7 +902,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			const lastVisibleChipIndex = getLastVisibleChipIndex();
 
 			// Handle special keyboard combinations
-			const isCtrlOrCmd = isCtrlOrMMetaKey(e);
+			const isCtrlOrCmd = e.ctrlKey || e.metaKey;
 
 			// Handle Ctrl+A (select all)
 			if (isCtrlOrCmd && e.key === 'a') {

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

@@ -560,6 +560,10 @@
 					border: 1px solid var(--bg-vanilla-300) !important;
 					background: var(--bg-vanilla-100) !important;
 					box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+
+					.ant-select-selection-item {
+						color: var(--text-ink-400);
+					}
 				}
 			}
 		}
@@ -569,6 +573,10 @@
 				border: 1px solid var(--bg-vanilla-300) !important;
 				background: var(--bg-vanilla-100) !important;
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+
+				.ant-select-selection-item {
+					color: var(--text-ink-400);
+				}
 			}
 
 			.ant-select-arrow {

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

@@ -169,6 +169,10 @@
 					.ant-select-selector {
 						border: 1px solid var(--bg-vanilla-300) !important;
 						background: var(--bg-vanilla-100) !important;
+
+						.ant-select-selection-item {
+							color: var(--text-ink-400);
+						}
 					}
 				}
 			}

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

@@ -32,6 +32,7 @@ const ADD_ONS_KEYS = {
 	ORDER_BY: 'order_by',
 	LIMIT: 'limit',
 	LEGEND_FORMAT: 'legend_format',
+	REDUCE_TO: 'reduce_to',
 };
 
 const ADD_ONS_KEYS_TO_QUERY_PATH = {
@@ -40,13 +41,14 @@ const ADD_ONS_KEYS_TO_QUERY_PATH = {
 	[ADD_ONS_KEYS.ORDER_BY]: 'orderBy',
 	[ADD_ONS_KEYS.LIMIT]: 'limit',
 	[ADD_ONS_KEYS.LEGEND_FORMAT]: 'legend',
+	[ADD_ONS_KEYS.REDUCE_TO]: 'reduceTo',
 };
 
 const ADD_ONS = [
 	{
 		icon: <BarChart2 size={14} />,
 		label: 'Group By',
-		key: 'group_by',
+		key: ADD_ONS_KEYS.GROUP_BY,
 		description:
 			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
 		docLink: 'https://signoz.io/docs/userguide/query-builder-v5/#grouping',
@@ -54,7 +56,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Having',
-		key: 'having',
+		key: ADD_ONS_KEYS.HAVING,
 		description:
 			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
 		docLink:
@@ -63,7 +65,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Order By',
-		key: 'order_by',
+		key: ADD_ONS_KEYS.ORDER_BY,
 		description:
 			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
 		docLink:
@@ -72,7 +74,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Limit',
-		key: 'limit',
+		key: ADD_ONS_KEYS.LIMIT,
 		description:
 			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
 		docLink:
@@ -81,7 +83,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Legend format',
-		key: 'legend_format',
+		key: ADD_ONS_KEYS.LEGEND_FORMAT,
 		description:
 			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
 		docLink:
@@ -92,7 +94,7 @@ const ADD_ONS = [
 const REDUCE_TO = {
 	icon: <ScrollText size={14} />,
 	label: 'Reduce to',
-	key: 'reduce_to',
+	key: ADD_ONS_KEYS.REDUCE_TO,
 	description:
 		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
 	docLink:
@@ -218,10 +220,9 @@ function QueryAddOns({
 		);
 
 		const availableAddOnKeys = new Set(filteredAddOns.map((addOn) => addOn.key));
-
 		// Filter and set selected views: add-ons that are both active and available
 		setSelectedViews(
-			ADD_ONS.filter(
+			filteredAddOns.filter(
 				(addOn) =>
 					activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
 			),
@@ -300,7 +301,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/__tests__/QueryAddOns.test.tsx

@@ -1,6 +1,12 @@
 /* eslint-disable */
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
+import {
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+	within,
+} from 'tests/test-utils';
 
 import QueryAddOns from '../QueryV2/QueryAddOns/QueryAddOns';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -55,16 +61,7 @@ jest.mock('../QueryV2/QueryAddOns/HavingFilter/HavingFilter', () => ({
 	),
 }));
 
-jest.mock(
-	'container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter',
-	() => ({
-		ReduceToFilter: ({ onChange }: any) => (
-			<button data-testid="reduce-to" onClick={() => onChange('sum')}>
-				ReduceToFilter
-			</button>
-		),
-	}),
-);
+// ReduceToFilter is not mocked - we test the actual Ant Design Select component
 
 function baseQuery(overrides: Partial<any> = {}): any {
 	return {
@@ -140,7 +137,7 @@ describe('QueryAddOns', () => {
 		expect(screen.getByTestId('order-by-content')).toBeInTheDocument();
 	});
 
-	it('limit input auto-opens when limit is set and changing it calls handler', () => {
+	it('limit input auto-opens when limit is set and changing it calls handler', async () => {
 		render(
 			<QueryAddOns
 				query={baseQuery({ limit: 5 })}
@@ -183,4 +180,88 @@ describe('QueryAddOns', () => {
 		expect(screen.getByTestId('limit-content')).toBeInTheDocument();
 		expect(limitInput.value).toBe('7');
 	});
+
+	it('shows reduce-to add-on when showReduceTo is true', () => {
+		render(
+			<QueryAddOns
+				query={baseQuery()}
+				version="v5"
+				isListViewPanel={false}
+				showReduceTo
+				panelType={PANEL_TYPES.TIME_SERIES}
+				index={0}
+				isForTraceOperator={false}
+			/>,
+		);
+
+		expect(screen.getByTestId('query-add-on-reduce_to')).toBeInTheDocument();
+	});
+
+	it('auto-opens reduce-to content when reduceTo is set', () => {
+		render(
+			<QueryAddOns
+				query={baseQuery({ reduceTo: 'sum' })}
+				version="v5"
+				isListViewPanel={false}
+				showReduceTo
+				panelType={PANEL_TYPES.TIME_SERIES}
+				index={0}
+				isForTraceOperator={false}
+			/>,
+		);
+
+		expect(screen.getByTestId('reduce-to-content')).toBeInTheDocument();
+	});
+
+	it('calls handleSetQueryData when reduce-to value changes', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const query = baseQuery({
+			reduceTo: 'avg',
+			aggregations: [{ id: 'a', operator: 'count', reduceTo: 'avg' }],
+		});
+		render(
+			<QueryAddOns
+				query={query}
+				version="v5"
+				isListViewPanel={false}
+				showReduceTo
+				panelType={PANEL_TYPES.TIME_SERIES}
+				index={0}
+				isForTraceOperator={false}
+			/>,
+		);
+
+		// Wait for the reduce-to content section to be visible (it auto-opens when reduceTo is set)
+		await waitFor(() => {
+			expect(screen.getByTestId('reduce-to-content')).toBeInTheDocument();
+		});
+
+		// Get the Select component by its role (combobox)
+		// The Select is within the reduce-to-content section
+		const reduceToContent = screen.getByTestId('reduce-to-content');
+		const selectCombobox = within(reduceToContent).getByRole('combobox');
+
+		// Open the dropdown by clicking on the combobox
+		await user.click(selectCombobox);
+
+		// Wait for the dropdown listbox to appear
+		await screen.findByRole('listbox');
+
+		// Find and click the "Sum" option
+		const sumOption = await screen.findByText('Sum of values in timeframe');
+		await user.click(sumOption);
+
+		// Verify the handler was called with the correct value
+		await waitFor(() => {
+			expect(mockHandleSetQueryData).toHaveBeenCalledWith(0, {
+				...query,
+				aggregations: [
+					{
+						...(query.aggregations?.[0] as any),
+						reduceTo: 'sum',
+					},
+				],
+			});
+		});
+	});
 });

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/ShiftOverlay/ShiftHoldOverlayController.tsx

@@ -0,0 +1,27 @@
+import { createShortcutActions } from '../../constants/shortcutActions';
+import { useCmdK } from '../../providers/cmdKProvider';
+import { ShiftOverlay } from './ShiftOverlay';
+import { useShiftHoldOverlay } from './useShiftHoldOverlay';
+
+type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
+export function ShiftHoldOverlayController({
+	userRole,
+}: {
+	userRole: UserRole;
+}): JSX.Element | null {
+	const { open: isCmdKOpen } = useCmdK();
+	const noop = (): void => undefined;
+
+	const actions = createShortcutActions({
+		navigate: noop,
+		handleThemeChange: noop,
+	});
+
+	const visible = useShiftHoldOverlay({
+		isModalOpen: isCmdKOpen,
+	});
+
+	return (
+		<ShiftOverlay visible={visible} actions={actions} userRole={userRole} />
+	);
+}

frontend/src/components/ShiftOverlay/ShiftOverlay.tsx

@@ -0,0 +1,77 @@
+import './shiftOverlay.scss';
+
+import { useMemo } from 'react';
+import ReactDOM from 'react-dom';
+
+import { formatShortcut } from './formatShortcut';
+
+export type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
+export type CmdAction = {
+	id: string;
+	name: string;
+	shortcut?: string[];
+	keywords?: string;
+	section?: string;
+	roles?: UserRole[];
+	perform: () => void;
+};
+
+interface ShortcutProps {
+	label: string;
+	keyHint: React.ReactNode;
+}
+
+function Shortcut({ label, keyHint }: ShortcutProps): JSX.Element {
+	return (
+		<div className="shift-overlay__item">
+			<span className="shift-overlay__label">{label}</span>
+			<kbd className="shift-overlay__kbd">{keyHint}</kbd>
+		</div>
+	);
+}
+
+interface ShiftOverlayProps {
+	visible: boolean;
+	actions: CmdAction[];
+	userRole: UserRole;
+}
+
+export function ShiftOverlay({
+	visible,
+	actions,
+	userRole,
+}: ShiftOverlayProps): JSX.Element | null {
+	const navigationActions = useMemo(() => {
+		// 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),
+		);
+
+		// Navigation only + must have shortcut
+		return permitted.filter(
+			(a) =>
+				a.section?.toLowerCase() === 'navigation' &&
+				a.shortcut &&
+				a.shortcut.length > 0,
+		);
+	}, [actions, userRole]);
+
+	if (!visible || navigationActions.length === 0) {
+		return null;
+	}
+
+	return ReactDOM.createPortal(
+		<div className="shift-overlay">
+			<div className="shift-overlay__panel">
+				{navigationActions.map((action) => (
+					<Shortcut
+						key={action.id}
+						label={action.name.replace(/^Go to\s+/i, '')}
+						keyHint={formatShortcut(action.shortcut)}
+					/>
+				))}
+			</div>
+		</div>,
+		document.body,
+	);
+}

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

@@ -0,0 +1,102 @@
+import '@testing-library/jest-dom';
+
+import { render, screen } from '@testing-library/react';
+
+import type { CmdAction } from '../ShiftOverlay';
+import { ShiftOverlay } from '../ShiftOverlay';
+
+jest.mock('../formatShortcut', () => ({
+	formatShortcut: (shortcut: string[]): string => shortcut.join('+'),
+}));
+
+const baseActions: CmdAction[] = [
+	{
+		id: '1',
+		name: 'Go to Traces',
+		section: 'navigation',
+		shortcut: ['Shift', 'T'],
+		perform: jest.fn(),
+	},
+	{
+		id: '2',
+		name: 'Go to Metrics',
+		section: 'navigation',
+		shortcut: ['Shift', 'M'],
+		roles: ['ADMIN'], // ✅ now UserRole[]
+		perform: jest.fn(),
+	},
+	{
+		id: '3',
+		name: 'Create Alert',
+		section: 'actions',
+		shortcut: ['A'],
+		perform: jest.fn(),
+	},
+	{
+		id: '4',
+		name: 'Go to Logs',
+		section: 'navigation',
+		perform: jest.fn(),
+	},
+];
+
+describe('ShiftOverlay', () => {
+	it('renders nothing when not visible', () => {
+		const { container } = render(
+			<ShiftOverlay visible={false} actions={baseActions} userRole="ADMIN" />,
+		);
+
+		expect(container.firstChild).toBeNull();
+	});
+
+	it('renders nothing when no navigation shortcuts exist', () => {
+		const { container } = render(
+			<ShiftOverlay
+				visible
+				actions={[
+					{
+						id: 'x',
+						name: 'Create Alert',
+						section: 'actions',
+						perform: jest.fn(),
+					},
+				]}
+				userRole="ADMIN"
+			/>,
+		);
+
+		expect(container.firstChild).toBeNull();
+	});
+
+	it('renders navigation shortcuts in a portal', () => {
+		render(<ShiftOverlay visible actions={baseActions} userRole="ADMIN" />);
+
+		expect(document.body.querySelector('.shift-overlay')).toBeInTheDocument();
+
+		expect(screen.getByText('Traces')).toBeInTheDocument();
+		expect(screen.getByText('Metrics')).toBeInTheDocument();
+
+		expect(screen.getByText('Shift+T')).toBeInTheDocument();
+		expect(screen.getByText('Shift+M')).toBeInTheDocument();
+	});
+
+	it('applies RBAC filtering correctly', () => {
+		render(<ShiftOverlay visible actions={baseActions} userRole="VIEWER" />);
+
+		expect(screen.getByText('Traces')).toBeInTheDocument();
+		expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
+	});
+
+	it('strips "Go to" prefix from labels', () => {
+		render(<ShiftOverlay visible actions={baseActions} userRole="ADMIN" />);
+
+		expect(screen.getByText('Traces')).toBeInTheDocument();
+		expect(screen.queryByText('Go to Traces')).not.toBeInTheDocument();
+	});
+
+	it('does not render actions without shortcuts', () => {
+		render(<ShiftOverlay visible actions={baseActions} userRole="ADMIN" />);
+
+		expect(screen.queryByText('Logs')).not.toBeInTheDocument();
+	});
+});

frontend/src/components/ShiftOverlay/__tests__/useShiftHoldOverlay.test.tsx

@@ -0,0 +1,144 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useShiftHoldOverlay } from '../useShiftHoldOverlay';
+
+jest.useFakeTimers();
+
+function pressShift(target: EventTarget = window): void {
+	const event = new KeyboardEvent('keydown', {
+		key: 'Shift',
+		bubbles: true,
+	});
+	Object.defineProperty(event, 'target', { value: target });
+	window.dispatchEvent(event);
+}
+
+function releaseShift(): void {
+	window.dispatchEvent(
+		new KeyboardEvent('keyup', {
+			key: 'Shift',
+			bubbles: true,
+		}),
+	);
+}
+
+describe('useShiftHoldOverlay', () => {
+	afterEach(() => {
+		jest.clearAllTimers();
+	});
+
+	it('shows overlay after holding Shift for 600ms', () => {
+		const { result } = renderHook(() => useShiftHoldOverlay({}));
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(true);
+	});
+
+	it('does not show overlay if Shift is released early', () => {
+		const { result } = renderHook(() => useShiftHoldOverlay({}));
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(300);
+			releaseShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(false);
+	});
+
+	it('hides overlay on Shift key release', () => {
+		const { result } = renderHook(() => useShiftHoldOverlay({}));
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(true);
+
+		act(() => {
+			releaseShift();
+		});
+
+		expect(result.current).toBe(false);
+	});
+
+	it('does not activate when modal is open', () => {
+		const { result } = renderHook(() =>
+			useShiftHoldOverlay({ isModalOpen: true }),
+		);
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(false);
+	});
+
+	it('does not activate in typing context (input)', () => {
+		const input = document.createElement('input');
+		document.body.appendChild(input);
+
+		const { result } = renderHook(() => useShiftHoldOverlay({}));
+
+		act(() => {
+			pressShift(input);
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(false);
+
+		document.body.removeChild(input);
+	});
+
+	it('cleans up on window blur', () => {
+		const { result } = renderHook(() => useShiftHoldOverlay({}));
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(true);
+
+		act(() => {
+			window.dispatchEvent(new Event('blur'));
+		});
+
+		expect(result.current).toBe(false);
+	});
+
+	it('cleans up on document visibility change', () => {
+		const { result } = renderHook(() => useShiftHoldOverlay({}));
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(true);
+
+		act(() => {
+			document.dispatchEvent(new Event('visibilitychange'));
+		});
+
+		expect(result.current).toBe(false);
+	});
+
+	it('does nothing when disabled', () => {
+		const { result } = renderHook(() => useShiftHoldOverlay({ disabled: true }));
+
+		act(() => {
+			pressShift();
+			jest.advanceTimersByTime(600);
+		});
+
+		expect(result.current).toBe(false);
+	});
+});

frontend/src/components/ShiftOverlay/formatShortcut.tsx

@@ -0,0 +1,44 @@
+import './shiftOverlay.scss';
+
+import { ArrowUp, ChevronUp, Command, Option } from 'lucide-react';
+import { ReactNode } from 'react';
+
+export function formatShortcut(shortcut?: string[]): ReactNode {
+	if (!shortcut || shortcut.length === 0) return null;
+
+	const combo = shortcut.find((s) => typeof s === 'string' && s.trim());
+	if (!combo) return null;
+
+	return combo.split('+').map((key) => {
+		const k = key.trim().toLowerCase();
+
+		let node: ReactNode;
+		switch (k) {
+			case 'shift':
+				node = <ArrowUp size={14} />;
+				break;
+			case 'cmd':
+			case 'meta':
+				node = <Command size={14} />;
+				break;
+			case 'alt':
+				node = <Option size={14} />;
+				break;
+			case 'ctrl':
+			case 'control':
+				node = <ChevronUp size={14} />;
+				break;
+			case 'arrowup':
+				node = <ArrowUp size={14} />;
+				break;
+			default:
+				node = k.toUpperCase();
+		}
+
+		return (
+			<span key={`shortcut-${k}`} className="shift-overlay__key">
+				{node}
+			</span>
+		);
+	});
+}

frontend/src/components/ShiftOverlay/shiftOverlay.scss

@@ -0,0 +1,75 @@
+.shift-overlay {
+	position: fixed;
+	bottom: 20px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 9999;
+	pointer-events: none;
+
+	&__panel {
+		display: flex;
+		gap: 20px;
+		padding: 8px 12px;
+
+		background: var(--bg-ink-500);
+		color: var(--bg-vanilla-300);
+
+		border-radius: 8px;
+		font-size: 13px;
+		line-height: 1.2;
+
+		box-shadow: 0 6px 20px var(--bg-ink-500);
+		animation: shift-overlay-fade-in 120ms ease-out;
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		white-space: nowrap;
+	}
+
+	&__label {
+		opacity: 0.9;
+	}
+
+	&__kbd {
+		font-family: monospace;
+		font-size: 12px;
+		padding: 2px 6px;
+		display: flex;
+
+		border-radius: 4px;
+		background: var(--bg-slate-100);
+	}
+
+	&__key {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+
+		min-width: 15px;
+		height: 20px;
+
+		border-radius: 4px;
+
+		background-color: var(--bg-slate-100);
+
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 1;
+		color: var(--bg-vanilla-300);
+		flex-shrink: 0;
+	}
+}
+
+@keyframes shift-overlay-fade-in {
+	from {
+		opacity: 0;
+		transform: translateY(-4px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

frontend/src/components/ShiftOverlay/useShiftHoldOverlay.ts

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from 'react';
+
+const HOLD_DELAY_MS = 500;
+
+function isTypingContext(target: EventTarget | null): boolean {
+	if (!(target instanceof HTMLElement)) return false;
+
+	const tag = target.tagName;
+	return tag === 'INPUT' || tag === 'TEXTAREA' || target.isContentEditable;
+}
+
+interface UseShiftHoldOverlayOptions {
+	disabled?: boolean;
+	isModalOpen?: boolean;
+}
+
+export function useShiftHoldOverlay({
+	disabled = false,
+	isModalOpen = false,
+}: UseShiftHoldOverlayOptions): boolean {
+	const [visible, setVisible] = useState<boolean>(false);
+
+	const timerRef = useRef<number | null>(null);
+	const isHoldingRef = useRef<boolean>(false);
+
+	useEffect((): (() => void) | void => {
+		if (disabled) return;
+
+		function cleanup(): void {
+			isHoldingRef.current = false;
+
+			if (timerRef.current !== null) {
+				window.clearTimeout(timerRef.current);
+				timerRef.current = null;
+			}
+
+			setVisible(false);
+		}
+
+		function onKeyDown(e: KeyboardEvent): void {
+			if (e.key !== 'Shift') return;
+			if (e.repeat) return;
+
+			// Suppress in bad contexts
+			if (
+				isModalOpen ||
+				e.metaKey ||
+				e.ctrlKey ||
+				e.altKey ||
+				isTypingContext(e.target)
+			) {
+				return;
+			}
+
+			isHoldingRef.current = true;
+
+			timerRef.current = window.setTimeout(() => {
+				if (isHoldingRef.current) {
+					setVisible(true);
+				}
+			}, HOLD_DELAY_MS);
+		}
+
+		function onKeyUp(e: KeyboardEvent): void {
+			if (e.key !== 'Shift') return;
+			cleanup();
+		}
+
+		function onBlur(): void {
+			cleanup();
+		}
+
+		window.addEventListener('keydown', onKeyDown);
+		window.addEventListener('keyup', onKeyUp);
+		window.addEventListener('blur', onBlur);
+		document.addEventListener('visibilitychange', cleanup);
+
+		return (): void => {
+			window.removeEventListener('keydown', onKeyDown);
+			window.removeEventListener('keyup', onKeyUp);
+			window.removeEventListener('blur', onBlur);
+			document.removeEventListener('visibilitychange', cleanup);
+		};
+	}, [disabled, isModalOpen]);
+
+	return visible;
+}

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/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -1,11 +1,18 @@
 import './styles.scss';
 
-import { Select } from 'antd';
+import { WarningFilled } from '@ant-design/icons';
+import { Select, Tooltip } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
+import classNames from 'classnames';
+import { useMemo } from 'react';
 
 import { UniversalYAxisUnitMappings } from './constants';
 import { UniversalYAxisUnit, YAxisUnitSelectorProps } from './types';
-import { getYAxisCategories, mapMetricUnitToUniversalUnit } from './utils';
+import {
+	getUniversalNameFromMetricUnit,
+	getYAxisCategories,
+	mapMetricUnitToUniversalUnit,
+} from './utils';
 
 function YAxisUnitSelector({
 	value,
@@ -14,9 +21,24 @@ function YAxisUnitSelector({
 	loading = false,
 	'data-testid': dataTestId,
 	source,
+	initialValue,
 }: YAxisUnitSelectorProps): JSX.Element {
 	const universalUnit = mapMetricUnitToUniversalUnit(value);
 
+	const incompatibleUnitMessage = useMemo(() => {
+		if (!initialValue || !value || loading) return '';
+		const initialUniversalUnit = mapMetricUnitToUniversalUnit(initialValue);
+		const currentUniversalUnit = mapMetricUnitToUniversalUnit(value);
+		if (initialUniversalUnit !== currentUniversalUnit) {
+			const initialUniversalUnitName = getUniversalNameFromMetricUnit(
+				initialValue,
+			);
+			const currentUniversalUnitName = getUniversalNameFromMetricUnit(value);
+			return `Unit mismatch. Saved unit is ${initialUniversalUnitName}, but ${currentUniversalUnitName} is selected.`;
+		}
+		return '';
+	}, [initialValue, value, loading]);
+
 	const handleSearch = (
 		searchTerm: string,
 		currentOption: DefaultOptionType | undefined,
@@ -49,6 +71,16 @@ function YAxisUnitSelector({
 				placeholder={placeholder}
 				filterOption={(input, option): boolean => handleSearch(input, option)}
 				loading={loading}
+				suffixIcon={
+					incompatibleUnitMessage ? (
+						<Tooltip title={incompatibleUnitMessage}>
+							<WarningFilled />
+						</Tooltip>
+					) : undefined
+				}
+				className={classNames({
+					'warning-state': incompatibleUnitMessage,
+				})}
 				data-testid={dataTestId}
 			>
 				{categories.map((category) => (

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

@@ -91,4 +91,36 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.getByText('Bytes (B)')).toBeInTheDocument();
 		expect(screen.getByText('Seconds (s)')).toBeInTheDocument();
 	});
+
+	it('shows warning message when incompatible unit is selected', () => {
+		render(
+			<YAxisUnitSelector
+				source={YAxisSource.ALERTS}
+				value="By"
+				onChange={mockOnChange}
+				initialValue="s"
+			/>,
+		);
+		const warningIcon = screen.getByLabelText('warning');
+		expect(warningIcon).toBeInTheDocument();
+		fireEvent.mouseOver(warningIcon);
+		return screen
+			.findByText(
+				'Unit mismatch. Saved unit is Seconds (s), but Bytes (B) is selected.',
+			)
+			.then((el) => expect(el).toBeInTheDocument());
+	});
+
+	it('does not show warning message when compatible unit is selected', () => {
+		render(
+			<YAxisUnitSelector
+				source={YAxisSource.ALERTS}
+				value="s"
+				onChange={mockOnChange}
+				initialValue="s"
+			/>,
+		);
+		const warningIcon = screen.queryByLabelText('warning');
+		expect(warningIcon).not.toBeInTheDocument();
+	});
 });

frontend/src/components/YAxisUnitSelector/styles.scss

@@ -3,3 +3,13 @@
 		width: 220px;
 	}
 }
+
+.warning-state {
+	.ant-select-selector {
+		border-color: var(--bg-amber-400) !important;
+	}
+
+	.anticon {
+		color: var(--bg-amber-400) !important;
+	}
+}

frontend/src/components/YAxisUnitSelector/types.ts

@@ -6,6 +6,7 @@ export interface YAxisUnitSelectorProps {
 	disabled?: boolean;
 	'data-testid'?: string;
 	source: YAxisSource;
+	initialValue?: string;
 }
 
 export enum UniversalYAxisUnit {

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

@@ -159,7 +159,6 @@ describe('CmdKPalette', () => {
 
 		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();
 	});
 

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -9,34 +9,12 @@ import {
 	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 { createShortcutActions } from '../../constants/shortcutActions';
 import { useCmdK } from '../../providers/cmdKProvider';
 
 type CmdAction = {
@@ -58,19 +36,8 @@ export function CmdKPalette({
 }): 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,
@@ -111,164 +78,10 @@ export function CmdKPalette({
 		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),
-		},
-	];
+	const actions = createShortcutActions({
+		navigate: onClickHandler,
+		handleThemeChange,
+	});
 
 	// RBAC filter: show action if no roles set OR current user role is included
 	const permitted = actions.filter(

frontend/src/constants/reactQueryKeys.ts

@@ -55,6 +55,7 @@ export const REACT_QUERY_KEY = {
 	GET_METRIC_DETAILS: 'GET_METRIC_DETAILS',
 	GET_RELATED_METRICS: 'GET_RELATED_METRICS',
 	GET_INSPECT_METRICS_DETAILS: 'GET_INSPECT_METRICS_DETAILS',
+	GET_METRIC_METADATA: 'GET_METRIC_METADATA',
 
 	// Traces Funnels Query Keys
 	GET_DOMAINS_LIST: 'GET_DOMAINS_LIST',

frontend/src/constants/shortcutActions.tsx

@@ -0,0 +1,263 @@
+import ROUTES from 'constants/routes';
+import { GlobalShortcutsName } from 'constants/shortcuts/globalShortcuts';
+import { THEME_MODE } from 'hooks/useDarkMode/constant';
+import {
+	BarChart2,
+	BellDot,
+	BugIcon,
+	Compass,
+	DraftingCompass,
+	Expand,
+	HardDrive,
+	Home,
+	LayoutGrid,
+	ListMinus,
+	ScrollText,
+	Settings,
+	TowerControl,
+	Workflow,
+} from 'lucide-react';
+import React from 'react';
+
+export type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
+
+export type CmdAction = {
+	id: string;
+	name: string;
+	shortcut?: string[];
+	keywords?: string;
+	section?: string;
+	icon?: React.ReactNode;
+	roles?: UserRole[];
+	perform: () => void;
+};
+
+type ActionDeps = {
+	navigate: (path: string) => void;
+	handleThemeChange: (mode: string) => void;
+};
+
+export function createShortcutActions(deps: ActionDeps): CmdAction[] {
+	const { navigate, handleThemeChange } = deps;
+
+	return [
+		{
+			id: 'home',
+			name: 'Go to Home',
+			shortcut: [GlobalShortcutsName.NavigateToHome],
+			keywords: 'home',
+			section: 'Navigation',
+			icon: <Home size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.HOME),
+		},
+		{
+			id: 'dashboards',
+			name: 'Go to Dashboards',
+			shortcut: [GlobalShortcutsName.NavigateToDashboards],
+			keywords: 'dashboards',
+			section: 'Navigation',
+			icon: <LayoutGrid size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.ALL_DASHBOARD),
+		},
+		{
+			id: 'services',
+			name: 'Go to Services',
+			shortcut: [GlobalShortcutsName.NavigateToServices],
+			keywords: 'services monitoring',
+			section: 'Navigation',
+			icon: <HardDrive size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.APPLICATION),
+		},
+		{
+			id: 'alerts',
+			name: 'Go to Alerts',
+			shortcut: [GlobalShortcutsName.NavigateToAlerts],
+			keywords: 'alerts',
+			section: 'Navigation',
+			icon: <BellDot size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.LIST_ALL_ALERT),
+		},
+		{
+			id: 'exceptions',
+			name: 'Go to Exceptions',
+			shortcut: [GlobalShortcutsName.NavigateToExceptions],
+			keywords: 'exceptions errors',
+			section: 'Navigation',
+			icon: <BugIcon size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.ALL_ERROR),
+		},
+		{
+			id: 'messaging-queues',
+			name: 'Go to Messaging Queues',
+			shortcut: [GlobalShortcutsName.NavigateToMessagingQueues],
+			keywords: 'messaging queues mq',
+			section: 'Navigation',
+			icon: <ListMinus size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.MESSAGING_QUEUES_OVERVIEW),
+		},
+
+		// logs
+		{
+			id: 'logs',
+			name: 'Go to Logs',
+			shortcut: [GlobalShortcutsName.NavigateToLogs],
+			keywords: 'logs',
+			section: 'Logs',
+			icon: <ScrollText size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.LOGS),
+		},
+		{
+			id: 'logs',
+			name: 'Go to Logs Pipelines',
+			shortcut: [GlobalShortcutsName.NavigateToLogsPipelines],
+			keywords: 'logs pipelines',
+			section: 'Logs',
+			icon: <Workflow size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.LOGS_PIPELINES),
+		},
+		{
+			id: 'logs',
+			name: 'Go to Logs Views',
+			shortcut: [GlobalShortcutsName.NavigateToLogsViews],
+			keywords: 'logs views',
+			section: 'Logs',
+			icon: <TowerControl size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.LOGS_SAVE_VIEWS),
+		},
+
+		// metrics
+		{
+			id: 'metrics-summary',
+			name: 'Go to Metrics Summary',
+			shortcut: [GlobalShortcutsName.NavigateToMetricsSummary],
+			keywords: 'metrics summary',
+			section: 'Metrics',
+			icon: <BarChart2 size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.METRICS_EXPLORER),
+		},
+		{
+			id: 'metrics-explorer',
+			name: 'Go to Metrics Explorer',
+			shortcut: [GlobalShortcutsName.NavigateToMetricsExplorer],
+			keywords: 'metrics explorer',
+			section: 'Metrics',
+			icon: <Compass size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.METRICS_EXPLORER_EXPLORER),
+		},
+		{
+			id: 'metrics-views',
+			name: 'Go to Metrics Views',
+			shortcut: [GlobalShortcutsName.NavigateToMetricsViews],
+			keywords: 'metrics views',
+			section: 'Metrics',
+			icon: <TowerControl size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.METRICS_EXPLORER_VIEWS),
+		},
+
+		// Traces
+		{
+			id: 'traces',
+			name: 'Go to Traces',
+			shortcut: [GlobalShortcutsName.NavigateToTraces],
+			keywords: 'traces',
+			section: 'Traces',
+			icon: <DraftingCompass size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.TRACES_EXPLORER),
+		},
+		{
+			id: 'traces-funnel',
+			name: 'Go to Traces Funnels',
+			shortcut: [GlobalShortcutsName.NavigateToTracesFunnel],
+			keywords: 'traces funnel',
+			section: 'Traces',
+			icon: <DraftingCompass size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.TRACES_FUNNELS),
+		},
+
+		// Common actions
+		{
+			id: 'dark-mode',
+			name: 'Switch to Dark Mode',
+			keywords: 'theme dark mode appearance',
+			section: 'Common',
+			icon: <Expand size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => handleThemeChange(THEME_MODE.DARK),
+		},
+		{
+			id: 'light-mode',
+			name: 'Switch to Light Mode [Beta]',
+			keywords: 'theme light mode appearance',
+			section: 'Common',
+			icon: <Expand size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => handleThemeChange(THEME_MODE.LIGHT),
+		},
+		{
+			id: 'system-theme',
+			name: 'Switch to System Theme',
+			keywords: 'system theme appearance',
+			section: 'Common',
+			icon: <Expand size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => handleThemeChange(THEME_MODE.SYSTEM),
+		},
+
+		// settings sub-pages
+		{
+			id: 'my-settings',
+			name: 'Go to Account Settings',
+			shortcut: [GlobalShortcutsName.NavigateToSettings],
+			keywords: 'account settings',
+			section: 'Settings',
+			icon: <Settings size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: (): void => navigate(ROUTES.MY_SETTINGS),
+		},
+		{
+			id: 'my-settings-ingestion',
+			name: 'Go to Account Settings Ingestion',
+			shortcut: [GlobalShortcutsName.NavigateToSettingsIngestion],
+			keywords: 'account settings',
+			section: 'Settings',
+			icon: <Settings size={14} />,
+			roles: ['ADMIN', 'EDITOR'],
+			perform: (): void => navigate(ROUTES.INGESTION_SETTINGS),
+		},
+
+		{
+			id: 'my-settings-billing',
+			name: 'Go to Account Settings Billing',
+			shortcut: [GlobalShortcutsName.NavigateToSettingsBilling],
+			keywords: 'account settings billing',
+			section: 'Settings',
+			icon: <Settings size={14} />,
+			roles: ['ADMIN', 'EDITOR'],
+			perform: (): void => navigate(ROUTES.BILLING),
+		},
+		{
+			id: 'my-settings-api-keys',
+			name: 'Go to Account Settings API Keys',
+			shortcut: [GlobalShortcutsName.NavigateToSettingsAPIKeys],
+			keywords: 'account settings api keys',
+			section: 'Settings',
+			icon: <Settings size={14} />,
+			roles: ['ADMIN', 'EDITOR'],
+			perform: (): void => navigate(ROUTES.API_KEYS),
+		},
+	];
+}

frontend/src/constants/shortcuts/globalShortcuts.ts

@@ -1,25 +1,57 @@
 export const GlobalShortcuts = {
-	NavigateToServices: 's+shift',
-	NavigateToTraces: 't+shift',
-	NavigateToLogs: 'l+shift',
-	NavigateToDashboards: 'd+shift',
-	NavigateToAlerts: 'a+shift',
-	NavigateToExceptions: 'e+shift',
-	NavigateToMessagingQueues: 'm+shift',
-	ToggleSidebar: 'b+shift',
-	NavigateToHome: 'h+shift',
+	NavigateToServices: 'shift+s',
+	NavigateToDashboards: 'shift+d',
+	NavigateToAlerts: 'shift+a',
+	NavigateToExceptions: 'shift+e',
+	NavigateToMessagingQueues: 'shift+q',
+	ToggleSidebar: 'shift+b',
+	NavigateToHome: 'shift+h',
+
+	// logs
+	NavigateToLogs: 'shift+l',
+	NavigateToLogsPipelines: 'shift+l+p',
+	NavigateToLogsViews: 'shift+l+v',
+
+	// traces
+	NavigateToTraces: 'shift+t',
+	NavigateToTracesFunnel: 'shift+t+f',
+	NavigateToTracesViews: 'shift+t+v',
+
+	// metrics
+	NavigateToMetricsSummary: 'shift+m',
+	NavigateToMetricsExplorer: 'shift+m+e',
+	NavigateToMetricsViews: 'shift+m+v',
+
+	// settings
+	NavigateToSettings: 'shift+g',
+	NavigateToSettingsIngestion: 'shift+g+i',
+	NavigateToSettingsBilling: 'shift+g+b',
+	NavigateToSettingsAPIKeys: 'shift+g+k',
+	NavigateToSettingsNotificationChannels: 'shift+g+n',
 };
 
 export const GlobalShortcutsName = {
 	NavigateToServices: 'shift+s',
 	NavigateToTraces: 'shift+t',
-	NavigateToLogs: 'shift+l',
 	NavigateToDashboards: 'shift+d',
 	NavigateToAlerts: 'shift+a',
 	NavigateToExceptions: 'shift+e',
-	NavigateToMessagingQueues: 'shift+m',
+	NavigateToMessagingQueues: 'shift+q',
 	ToggleSidebar: 'shift+b',
 	NavigateToHome: 'shift+h',
+	NavigateToTracesFunnel: 'shift+t+f',
+	NavigateToTracesViews: 'shift+t+v',
+	NavigateToMetricsSummary: 'shift+m',
+	NavigateToMetricsExplorer: 'shift+m+e',
+	NavigateToMetricsViews: 'shift+m+v',
+	NavigateToSettings: 'shift+g',
+	NavigateToSettingsIngestion: 'shift+g+i',
+	NavigateToSettingsBilling: 'shift+g+b',
+	NavigateToSettingsAPIKeys: 'shift+g+k',
+	NavigateToSettingsNotificationChannels: 'shift+g+n',
+	NavigateToLogs: 'shift+l',
+	NavigateToLogsPipelines: 'shift+l+p',
+	NavigateToLogsViews: 'shift+l+v',
 };
 
 export const GlobalShortcutsDescription = {
@@ -32,4 +64,17 @@ export const GlobalShortcutsDescription = {
 	NavigateToExceptions: 'Navigate to Exceptions List',
 	NavigateToMessagingQueues: 'Navigate to Messaging Queues',
 	ToggleSidebar: 'Toggle sidebar visibility',
+	NavigateToTracesFunnel: 'Navigate to Traces Funnel',
+	NavigateToTracesViews: 'Navigate to Traces Views',
+	NavigateToMetricsSummary: 'Navigate to Metrics Summary',
+	NavigateToMetricsExplorer: 'Navigate to Metrics Explorer',
+	NavigateToMetricsViews: 'Navigate to Metrics Views',
+	NavigateToSettings: 'Navigate to Settings',
+	NavigateToSettingsIngestion: 'Navigate to Ingestion Settings',
+	NavigateToSettingsBilling: 'Navigate to Billing Settings',
+	NavigateToSettingsAPIKeys: 'Navigate to API Keys Settings',
+	NavigateToSettingsNotificationChannels:
+		'Navigate to Notification Channels Settings',
+	NavigateToLogsPipelines: 'Navigate to Logs Pipelines',
+	NavigateToLogsViews: 'Navigate to Logs Views',
 };

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -5,12 +5,12 @@ import { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useNotifications } from 'hooks/useNotifications';
+import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { Channels } from 'types/api/channels/getAll';
-import { genericNavigate } from 'utils/genericNavigate';
 
 import Delete from './Delete';
 
@@ -20,15 +20,13 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const { user } = useAppContext();
 	const [action] = useComponentPermission(['new_alert_action'], user.role);
 
-	const onClickEditHandler = useCallback(
-		(id: string, event: React.MouseEvent): void => {
-			genericNavigate(
-				generatePath(ROUTES.CHANNELS_EDIT, { channelId: id }),
-				event,
-			);
-		},
-		[],
-	);
+	const onClickEditHandler = useCallback((id: string) => {
+		history.push(
+			generatePath(ROUTES.CHANNELS_EDIT, {
+				channelId: id,
+			}),
+		);
+	}, []);
 
 	const columns: ColumnsType<Channels> = [
 		{
@@ -54,10 +52,7 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 			width: 80,
 			render: (id: string): JSX.Element => (
 				<>
-					<Button
-						onClick={(event: React.MouseEvent): void => onClickEditHandler(id, event)}
-						type="link"
-					>
+					<Button onClick={(): void => onClickEditHandler(id)} type="link">
 						{t('column_channel_edit')}
 					</Button>
 					<Delete id={id} notifications={notifications} />

frontend/src/container/AllAlertChannels/index.tsx

@@ -8,6 +8,7 @@ import Spinner from 'components/Spinner';
 import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
+import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect } from 'react';
@@ -16,7 +17,6 @@ import { useQuery } from 'react-query';
 import { SuccessResponseV2 } from 'types/api';
 import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
-import { genericNavigate } from 'utils/genericNavigate';
 
 import AlertChannelsComponent from './AlertChannels';
 import { Button, ButtonContainer, RightActionContainer } from './styles';
@@ -30,8 +30,8 @@ function AlertChannels(): JSX.Element {
 		['add_new_channel'],
 		user.role,
 	);
-	const onToggleHandler = useCallback((event: React.MouseEvent) => {
-		genericNavigate(ROUTES.CHANNELS_NEW, event);
+	const onToggleHandler = useCallback(() => {
+		history.push(ROUTES.CHANNELS_NEW);
 	}, []);
 
 	const { isLoading, data, error } = useQuery<
@@ -78,7 +78,7 @@ function AlertChannels(): JSX.Element {
 						}
 					>
 						<Button
-							onClick={(event: React.MouseEvent): void => onToggleHandler(event)}
+							onClick={onToggleHandler}
 							icon={<PlusOutlined />}
 							disabled={!addNewChannelPermission}
 						>

frontend/src/container/AppLayout/__tests__/sidebar-toggle-shortcut.test.tsx

@@ -10,6 +10,20 @@ import {
 import { QueryClient, QueryClientProvider } from 'react-query';
 
 // Mock dependencies
+jest.mock('providers/cmdKProvider', () => ({
+	useCmdK: (): {
+		open: boolean;
+		setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+		openCmdK: () => void;
+		closeCmdK: () => void;
+	} => ({
+		open: false,
+		setOpen: jest.fn(),
+		openCmdK: jest.fn(),
+		closeCmdK: jest.fn(),
+	}),
+}));
+
 jest.mock('api/common/logEvent', () => jest.fn());
 
 // Mock the AppContext
@@ -63,7 +77,7 @@ describe('Sidebar Toggle Shortcut', () => {
 
 	describe('Global Shortcuts Constants', () => {
 		it('should have the correct shortcut key combination', () => {
-			expect(GlobalShortcuts.ToggleSidebar).toBe('b+shift');
+			expect(GlobalShortcuts.ToggleSidebar).toBe('shift+b');
 		});
 	});
 

frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx

@@ -5,9 +5,11 @@ import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import ChartPreviewComponent from 'container/FormAlertRules/ChartPreview';
 import PlotTag from 'container/NewWidget/LeftContainer/WidgetGraph/PlotTag';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useState } from 'react';
+import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
+import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { AlertDef } from 'types/api/alerts/def';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -18,7 +20,13 @@ export interface ChartPreviewProps {
 
 function ChartPreview({ alertDef }: ChartPreviewProps): JSX.Element {
 	const { currentQuery, panelType, stagedQuery } = useQueryBuilder();
-	const { thresholdState, alertState, setAlertState } = useCreateAlertState();
+	const {
+		alertType,
+		thresholdState,
+		alertState,
+		setAlertState,
+		isEditMode,
+	} = useCreateAlertState();
 	const { selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -27,6 +35,25 @@ function ChartPreview({ alertDef }: ChartPreviewProps): JSX.Element {
 
 	const yAxisUnit = alertState.yAxisUnit || '';
 
+	const fetchYAxisUnit =
+		!isEditMode && alertType === AlertTypes.METRICS_BASED_ALERT;
+
+	const selectedQueryName = thresholdState.selectedQuery;
+	const { yAxisUnit: initialYAxisUnit, isLoading } = useGetYAxisUnit(
+		selectedQueryName,
+		{
+			enabled: fetchYAxisUnit,
+		},
+	);
+
+	// Every time a new metric is selected, set the y-axis unit to its unit value if present
+	// Only for metrics-based alerts
+	useEffect(() => {
+		if (fetchYAxisUnit) {
+			setAlertState({ type: 'SET_Y_AXIS_UNIT', payload: initialYAxisUnit });
+		}
+	}, [initialYAxisUnit, setAlertState, fetchYAxisUnit]);
+
 	const headline = (
 		<div className="chart-preview-headline">
 			<PlotTag
@@ -34,11 +61,13 @@ function ChartPreview({ alertDef }: ChartPreviewProps): JSX.Element {
 				panelType={panelType || PANEL_TYPES.TIME_SERIES}
 			/>
 			<YAxisUnitSelector
-				value={alertState.yAxisUnit}
+				value={yAxisUnit}
+				initialValue={initialYAxisUnit}
 				onChange={(value): void => {
 					setAlertState({ type: 'SET_Y_AXIS_UNIT', payload: value });
 				}}
 				source={YAxisSource.ALERTS}
+				loading={isLoading}
 			/>
 		</div>
 	);

frontend/src/container/ErrorDetails/index.tsx

@@ -18,7 +18,6 @@ import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { PayloadProps as GetByErrorTypeAndServicePayload } from 'types/api/errors/getByErrorTypeAndService';
-import { genericNavigate } from 'utils/genericNavigate';
 
 import { keyToExclude } from './config';
 import { DashedContainer, EditorContainer, EventContainer } from './styles';
@@ -112,18 +111,14 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 			value: errorDetail[key as keyof GetByErrorTypeAndServicePayload],
 		}));
 
-	const onClickTraceHandler = (event: React.MouseEvent): void => {
+	const onClickTraceHandler = (): void => {
 		logEvent('Exception: Navigate to trace detail page', {
 			groupId: errorDetail?.groupID,
 			spanId: errorDetail.spanID,
 			traceId: errorDetail.traceID,
 			exceptionId: errorDetail?.errorId,
 		});
-
-		genericNavigate(
-			`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`,
-			event,
-		);
+		history.push(`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`);
 	};
 
 	const logEventCalledRef = useRef(false);
@@ -190,10 +185,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 
 			<DashedContainer>
 				<Typography>{t('see_trace_graph')}</Typography>
-				<Button
-					onClick={(event: React.MouseEvent): void => onClickTraceHandler(event)}
-					type="primary"
-				>
+				<Button onClick={onClickTraceHandler} type="primary">
 					{t('see_error_in_trace_graph')}
 				</Button>
 			</DashedContainer>

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -73,7 +73,6 @@ import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 import { panelTypeToExplorerView } from 'utils/explorerUtils';
-import { genericNavigate } from 'utils/genericNavigate';
 
 import { PreservedViewsTypes } from './constants';
 import ExplorerOptionsHideArea from './ExplorerOptionsHideArea';
@@ -193,7 +192,7 @@ function ExplorerOptions({
 	);
 
 	const onCreateAlertsHandler = useCallback(
-		(defaultQuery: Query | null, event?: React.MouseEvent) => {
+		(defaultQuery: Query | null) => {
 			if (sourcepage === DataSource.TRACES) {
 				logEvent('Traces Explorer: Create alert', {
 					panelType,
@@ -212,11 +211,10 @@ function ExplorerOptions({
 
 			const stringifiedQuery = handleConditionalQueryModification(defaultQuery);
 
-			genericNavigate(
+			history.push(
 				`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
 					stringifiedQuery,
 				)}`,
-				event,
 			);
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -395,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,
 			});
 		}
 	};
@@ -743,9 +747,7 @@ function ExplorerOptions({
 			<Button
 				disabled={disabled}
 				shape="round"
-				onClick={(event: React.MouseEvent): void =>
-					onCreateAlertsHandler(query, event)
-				}
+				onClick={(): void => onCreateAlertsHandler(query)}
 				icon={<ConciergeBell size={16} />}
 			>
 				Create an Alert

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -120,7 +120,6 @@ function FullView({
 				originalGraphType: selectedPanelType,
 			};
 		}
-		updatedQuery.builder.queryData[0].pageSize = 10;
 		return {
 			query: updatedQuery,
 			graphType: PANEL_TYPES.LIST,

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx

@@ -67,7 +67,6 @@ function WidgetGraphComponent({
 }: WidgetGraphComponentProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const [deleteModal, setDeleteModal] = useState(false);
-	const [hovered, setHovered] = useState(false);
 	const { notifications } = useNotifications();
 	const { pathname, search } = useLocation();
 
@@ -316,18 +315,6 @@ function WidgetGraphComponent({
 			style={{
 				height: '100%',
 			}}
-			onMouseOver={(): void => {
-				setHovered(true);
-			}}
-			onFocus={(): void => {
-				setHovered(true);
-			}}
-			onMouseOut={(): void => {
-				setHovered(false);
-			}}
-			onBlur={(): void => {
-				setHovered(false);
-			}}
 			id={widget.id}
 			className="widget-graph-component-container"
 		>
@@ -377,7 +364,6 @@ function WidgetGraphComponent({
 
 			<div className="drag-handle">
 				<WidgetHeader
-					parentHover={hovered}
 					title={widget?.title}
 					widget={widget}
 					onView={handleOnView}

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

@@ -137,7 +137,6 @@ function GridCardGraph({
 				originalGraphType: widget.panelTypes,
 			};
 		}
-		updatedQuery.builder.queryData[0].pageSize = 10;
 		const initialDataSource = updatedQuery.builder.queryData[0].dataSource;
 		return {
 			query: updatedQuery,

frontend/src/container/GridCardLayout/GridCardLayout.styles.scss

@@ -99,6 +99,12 @@
 			height: calc(100% - 30px);
 		}
 	}
+
+	&:hover {
+		.widget-header-more-options {
+			visibility: visible;
+		}
+	}
 }
 
 .widget-full-view {

frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss

@@ -51,10 +51,6 @@
 	visibility: visible;
 }
 
-.widget-header-hover {
-	visibility: visible;
-}
-
 .widget-api-actions {
 	padding-right: 0.25rem;
 }

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

@@ -0,0 +1,458 @@
+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}
+				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}
+				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}
+				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}
+				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}
+				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}
+				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}
+				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}
+				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}
+				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}
+				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}
+				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';
@@ -47,7 +48,6 @@ interface IWidgetHeaderProps {
 	onView: VoidFunction;
 	onDelete?: VoidFunction;
 	onClone?: VoidFunction;
-	parentHover: boolean;
 	queryResponse: UseQueryResult<
 		SuccessResponse<MetricRangePayloadProps, unknown> & {
 			warning?: Warning;
@@ -68,7 +68,6 @@ function WidgetHeader({
 	onView,
 	onDelete,
 	onClone,
-	parentHover,
 	queryResponse,
 	threshold,
 	headerMenuList,
@@ -87,7 +86,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 +242,7 @@ function WidgetHeader({
 							onClick={(e): void => {
 								e.stopPropagation();
 								e.preventDefault();
+								setSearchTerm('');
 								setShowGlobalSearch(false);
 							}}
 							className="search-header-icons"
@@ -310,8 +313,6 @@ function WidgetHeader({
 								<MoreOutlined
 									data-testid="widget-header-options"
 									className={`widget-header-more-options ${
-										parentHover ? 'widget-header-hover' : ''
-									} ${
 										globalSearchAvailable ? 'widget-header-more-options-visible' : ''
 									}`}
 								/>

frontend/src/container/Home/AlertRules/AlertRules.tsx

@@ -3,6 +3,7 @@ import getAll from 'api/alerts/getAll';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import history from 'lib/history';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { ArrowRight, ArrowUpRight, Plus } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
@@ -12,7 +13,6 @@ import { useQuery } from 'react-query';
 import { Link, useLocation } from 'react-router-dom';
 import { GettableAlert } from 'types/api/alerts/get';
 import { USER_ROLES } from 'types/roles';
-import { genericNavigate } from 'utils/genericNavigate';
 
 export default function AlertRules({
 	onUpdateChecklistDoneItem,
@@ -114,10 +114,7 @@ export default function AlertRules({
 		</div>
 	);
 
-	const onEditHandler = (
-		record: GettableAlert,
-		event?: React.MouseEvent | React.KeyboardEvent,
-	): void => {
+	const onEditHandler = (record: GettableAlert) => (): void => {
 		logEvent('Homepage: Alert clicked', {
 			ruleId: record.id,
 			ruleName: record.alert,
@@ -134,7 +131,7 @@ export default function AlertRules({
 
 		params.set(QueryParams.ruleId, record.id.toString());
 
-		genericNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`, event);
+		history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 	};
 
 	const renderAlertRules = (): JSX.Element => (
@@ -146,10 +143,10 @@ export default function AlertRules({
 						tabIndex={0}
 						className="alert-rule-item home-data-item"
 						key={rule.id}
-						onClick={(event: React.MouseEvent): void => onEditHandler(rule, event)}
+						onClick={onEditHandler(rule)}
 						onKeyDown={(e): void => {
 							if (e.key === 'Enter') {
-								onEditHandler(rule, e);
+								onEditHandler(rule);
 							}
 						}}
 					>

frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable sonarjs/no-identical-functions */
-/* eslint-disable sonarjs/cognitive-complexity */
 import { Button, Skeleton, Tag, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
@@ -10,7 +9,6 @@ import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
-import { genericNavigate } from 'utils/genericNavigate';
 
 import { DOCS_LINKS } from '../constants';
 
@@ -86,16 +84,16 @@ function DataSourceInfo({
 								icon={<img src="/Icons/container-plus.svg" alt="plus" />}
 								role="button"
 								tabIndex={0}
-								onClick={(event: React.MouseEvent): void => {
+								onClick={(): void => {
 									logEvent('Homepage: Connect dataSource clicked', {});
 
 									if (
 										activeLicense &&
 										activeLicense.platform === LicensePlatform.CLOUD
 									) {
-										genericNavigate(ROUTES.GET_STARTED_WITH_CLOUD, event);
+										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 									} else {
-										window.open(
+										window?.open(
 											DOCS_LINKS.ADD_DATA_SOURCE,
 											'_blank',
 											'noopener noreferrer',

frontend/src/container/Home/Home.tsx

@@ -30,7 +30,6 @@ import { UserPreference } from 'types/api/preferences/preference';
 import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 import { isIngestionActive } from 'utils/app';
-import { genericNavigate } from 'utils/genericNavigate';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import AlertRules from './AlertRules/AlertRules';
@@ -551,11 +550,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(event: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Logs',
 													});
-													genericNavigate(ROUTES.LOGS_EXPLORER, event);
+													history.push(ROUTES.LOGS_EXPLORER);
 												}}
 											>
 												Open Logs Explorer
@@ -565,11 +564,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(event: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Traces',
 													});
-													genericNavigate(ROUTES.TRACES_EXPLORER, event);
+													history.push(ROUTES.TRACES_EXPLORER);
 												}}
 											>
 												Open Traces Explorer
@@ -579,11 +578,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(event: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Metrics',
 													});
-													genericNavigate(ROUTES.METRICS_EXPLORER_EXPLORER, event);
+													history.push(ROUTES.METRICS_EXPLORER_EXPLORER);
 												}}
 											>
 												Open Metrics Explorer
@@ -620,11 +619,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Plus size={14} />}
-												onClick={(event: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Dashboards',
 													});
-													genericNavigate(ROUTES.ALL_DASHBOARD, event);
+													history.push(ROUTES.ALL_DASHBOARD);
 												}}
 											>
 												Create dashboard
@@ -662,11 +661,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Plus size={14} />}
-												onClick={(event: React.MouseEvent): void => {
+												onClick={(): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Alerts',
 													});
-													genericNavigate(ROUTES.ALERTS_NEW, event);
+													history.push(ROUTES.ALERTS_NEW);
 												}}
 											>
 												Create an alert

frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx

@@ -4,12 +4,12 @@ import './HomeChecklist.styles.scss';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
+import history from 'lib/history';
 import { ArrowRight, ArrowRightToLine, BookOpenText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { USER_ROLES } from 'types/roles';
-import { genericNavigate } from 'utils/genericNavigate';
 
 export type ChecklistItem = {
 	id: string;
@@ -86,22 +86,18 @@ function HomeChecklist({
 												<Button
 													type="default"
 													className="periscope-btn secondary"
-													onClick={(event: React.MouseEvent): void => {
+													onClick={(): void => {
 														logEvent('Welcome Checklist: Get started clicked', {
 															step: item.id,
 														});
 
-														const checkForNewTabAndNavigate = (): void => {
-															genericNavigate(item.toRoute || '', event);
-														};
-
 														if (item.toRoute !== ROUTES.GET_STARTED_WITH_CLOUD) {
-															checkForNewTabAndNavigate();
+															history.push(item.toRoute || '');
 														} else if (
 															activeLicense &&
 															activeLicense.platform === LicensePlatform.CLOUD
 														) {
-															checkForNewTabAndNavigate();
+															history.push(item.toRoute || '');
 														} else {
 															window?.open(
 																item.docsLink || '',

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -11,6 +11,7 @@ import useGetTopLevelOperations from 'hooks/useGetTopLevelOperations';
 import useResourceAttribute from 'hooks/useResourceAttribute';
 import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import history from 'lib/history';
 import { ArrowRight, ArrowUpRight } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
@@ -28,8 +29,6 @@ import { ServicesList } from 'types/api/metrics/getService';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
-import { genericNavigate } from 'utils/genericNavigate';
-import { isCtrlOrMMetaKey } from 'utils/isCtrlOrMMetaKey';
 
 import { FeatureKeys } from '../../../constants/features';
 import { DOCS_LINKS } from '../constants';
@@ -65,7 +64,7 @@ const EmptyState = memo(
 						<Button
 							type="default"
 							className="periscope-btn secondary"
-							onClick={(event: React.MouseEvent): void => {
+							onClick={(): void => {
 								logEvent('Homepage: Get Started clicked', {
 									source: 'Service Metrics',
 								});
@@ -74,7 +73,7 @@ const EmptyState = memo(
 									activeLicenseV3 &&
 									activeLicenseV3.platform === LicensePlatform.CLOUD
 								) {
-									genericNavigate(ROUTES.GET_STARTED_WITH_CLOUD, event);
+									history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 								} else {
 									window?.open(
 										DOCS_LINKS.ADD_DATA_SOURCE,
@@ -117,7 +116,7 @@ const ServicesListTable = memo(
 		onRowClick,
 	}: {
 		services: ServicesList[];
-		onRowClick: (record: ServicesList, event: React.MouseEvent) => void;
+		onRowClick: (record: ServicesList) => void;
 	}): JSX.Element => (
 		<div className="services-list-container home-data-item-container metrics-services-list">
 			<div className="services-list">
@@ -126,8 +125,8 @@ const ServicesListTable = memo(
 					dataSource={services}
 					pagination={false}
 					className="services-table"
-					onRow={(record): { onClick: (event: React.MouseEvent) => void } => ({
-						onClick: (event: React.MouseEvent): void => onRowClick(record, event),
+					onRow={(record): { onClick: () => void } => ({
+						onClick: (): void => onRowClick(record),
 					})}
 				/>
 			</div>
@@ -285,19 +284,11 @@ function ServiceMetrics({
 	}, [onUpdateChecklistDoneItem, loadingUserPreferences, servicesExist]);
 
 	const handleRowClick = useCallback(
-		(record: ServicesList, event: React.MouseEvent) => {
+		(record: ServicesList) => {
 			logEvent('Homepage: Service clicked', {
 				serviceName: record.serviceName,
 			});
-			if (event && isCtrlOrMMetaKey(event)) {
-				window.open(
-					`${ROUTES.APPLICATION}/${record.serviceName}`,
-					'_blank',
-					'noopener,noreferrer',
-				);
-			} else {
-				safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
-			}
+			safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
 		},
 		[safeNavigate],
 	);

frontend/src/container/Home/Services/ServiceTraces.tsx

@@ -3,6 +3,7 @@ import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import { useQueryService } from 'hooks/useQueryService';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import history from 'lib/history';
 import { ArrowRight, ArrowUpRight } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
@@ -14,8 +15,6 @@ import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { ServicesList } from 'types/api/metrics/getService';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { USER_ROLES } from 'types/roles';
-import { genericNavigate } from 'utils/genericNavigate';
-import { isCtrlOrMMetaKey } from 'utils/isCtrlOrMMetaKey';
 
 import { DOCS_LINKS } from '../constants';
 import { columns, TIME_PICKER_OPTIONS } from './constants';
@@ -119,7 +118,7 @@ export default function ServiceTraces({
 							<Button
 								type="default"
 								className="periscope-btn secondary"
-								onClick={(event: React.MouseEvent): void => {
+								onClick={(): void => {
 									logEvent('Homepage: Get Started clicked', {
 										source: 'Service Traces',
 									});
@@ -128,7 +127,7 @@ export default function ServiceTraces({
 										activeLicense &&
 										activeLicense.platform === LicensePlatform.CLOUD
 									) {
-										genericNavigate(ROUTES.GET_STARTED_WITH_CLOUD, event);
+										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 									} else {
 										window?.open(
 											DOCS_LINKS.ADD_DATA_SOURCE,
@@ -173,21 +172,13 @@ export default function ServiceTraces({
 						dataSource={top5Services}
 						pagination={false}
 						className="services-table"
-						onRow={(record): { onClick: (event: React.MouseEvent) => void } => ({
-							onClick: (event: React.MouseEvent): void => {
+						onRow={(record): { onClick: () => void } => ({
+							onClick: (): void => {
 								logEvent('Homepage: Service clicked', {
 									serviceName: record.serviceName,
 								});
 
-								if (event && isCtrlOrMMetaKey(event)) {
-									window.open(
-										`${ROUTES.APPLICATION}/${record.serviceName}`,
-										'_blank',
-										'noopener,noreferrer',
-									);
-								} else {
-									safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
-								}
+								safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
 							},
 						})}
 					/>

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -5,10 +5,10 @@ import { Button, Divider, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
+import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useState } from 'react';
 import { DataSource } from 'types/common/queryBuilder';
-import { genericNavigate } from 'utils/genericNavigate';
 
 import AlertInfoCard from './AlertInfoCard';
 import { ALERT_CARDS, ALERT_INFO_LINKS } from './alertLinks';
@@ -36,9 +36,9 @@ export function AlertsEmptyState(): JSX.Element {
 
 	const [loading, setLoading] = useState(false);
 
-	const onClickNewAlertHandler = useCallback((event: React.MouseEvent): void => {
+	const onClickNewAlertHandler = useCallback(() => {
 		setLoading(false);
-		genericNavigate(ROUTES.ALERTS_NEW, event);
+		history.push(ROUTES.ALERTS_NEW);
 	}, []);
 
 	return (
@@ -70,9 +70,7 @@ export function AlertsEmptyState(): JSX.Element {
 						<div className="action-container">
 							<Button
 								className="add-alert-btn"
-								onClick={(event: React.MouseEvent): void =>
-									onClickNewAlertHandler(event)
-								}
+								onClick={onClickNewAlertHandler}
 								icon={<PlusOutlined />}
 								disabled={!addNewAlert}
 								loading={loading}

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -39,7 +39,6 @@ import { UseQueryResult } from 'react-query';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { GettableAlert } from 'types/api/alerts/get';
-import { isCtrlOrMMetaKey } from 'utils/isCtrlOrMMetaKey';
 
 import DeleteAlert from './DeleteAlert';
 import { ColumnButton, SearchContainer } from './styles';
@@ -300,7 +299,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				const onClickHandler = (e: React.MouseEvent<HTMLElement>): void => {
 					e.stopPropagation();
 					e.preventDefault();
-					onEditHandler(record, isCtrlOrMMetaKey(e));
+					onEditHandler(record, e.metaKey || e.ctrlKey);
 				};
 
 				return <Typography.Link onClick={onClickHandler}>{value}</Typography.Link>;

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -118,7 +118,7 @@ const templatesList: DashboardTemplate[] = [
 
 interface DashboardTemplatesModalProps {
 	showNewDashboardTemplatesModal: boolean;
-	onCreateNewDashboard: (event: React.MouseEvent) => void;
+	onCreateNewDashboard: () => void;
 	onCancel: () => void;
 }
 
@@ -204,9 +204,7 @@ export default function DashboardTemplatesModal({
 									type="primary"
 									className="periscope-btn primary"
 									icon={<Plus size={14} />}
-									onClick={(event: React.MouseEvent): void =>
-										onCreateNewDashboard(event)
-									}
+									onClick={onCreateNewDashboard}
 								>
 									New dashboard
 								</Button>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -86,7 +86,6 @@ import {
 	Widgets,
 } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
-import { isCtrlOrMMetaKey } from 'utils/isCtrlOrMMetaKey';
 
 import DashboardTemplatesModal from './DashboardTemplates/DashboardTemplatesModal';
 import ImportJSON from './ImportJSON';
@@ -283,48 +282,35 @@ function DashboardsList(): JSX.Element {
 			refetchDashboardList,
 		})) || [];
 
-	const onNewDashboardHandler = useCallback(
-		async (event: React.MouseEvent): Promise<void> => {
-			try {
-				logEvent('Dashboard List: Create dashboard clicked', {});
-				setNewDashboardState({
-					...newDashboardState,
-					loading: true,
-				});
-				const response = await createDashboard({
-					title: t('new_dashboard_title', {
-						ns: 'dashboard',
-					}),
-					uploadedGrafana: false,
-					version: ENTITY_VERSION_V5,
-				});
+	const onNewDashboardHandler = useCallback(async () => {
+		try {
+			logEvent('Dashboard List: Create dashboard clicked', {});
+			setNewDashboardState({
+				...newDashboardState,
+				loading: true,
+			});
+			const response = await createDashboard({
+				title: t('new_dashboard_title', {
+					ns: 'dashboard',
+				}),
+				uploadedGrafana: false,
+				version: ENTITY_VERSION_V5,
+			});
 
-				if (event && isCtrlOrMMetaKey(event)) {
-					window.open(
-						generatePath(ROUTES.DASHBOARD, {
-							dashboardId: response.data.id,
-						}),
-						'_blank',
-						'noopener,noreferrer',
-					);
-				} else {
-					safeNavigate(
-						generatePath(ROUTES.DASHBOARD, {
-							dashboardId: response.data.id,
-						}),
-					);
-				}
-			} catch (error) {
-				showErrorModal(error as APIError);
-				setNewDashboardState({
-					...newDashboardState,
-					error: true,
-					errorMessage: (error as AxiosError).toString() || 'Something went Wrong',
-				});
-			}
-		},
-		[newDashboardState, safeNavigate, showErrorModal, t],
-	);
+			safeNavigate(
+				generatePath(ROUTES.DASHBOARD, {
+					dashboardId: response.data.id,
+				}),
+			);
+		} catch (error) {
+			showErrorModal(error as APIError);
+			setNewDashboardState({
+				...newDashboardState,
+				error: true,
+				errorMessage: (error as AxiosError).toString() || 'Something went Wrong',
+			});
+		}
+	}, [newDashboardState, safeNavigate, showErrorModal, t]);
 
 	const onModalHandler = (uploadedGrafana: boolean): void => {
 		logEvent('Dashboard List: Import JSON clicked', {});
@@ -426,8 +412,8 @@ function DashboardsList(): JSX.Element {
 
 				const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
 					event.stopPropagation();
-					if (isCtrlOrMMetaKey(event)) {
-						window.open(getLink(), '_blank', 'noopener,noreferrer');
+					if (event.metaKey || event.ctrlKey) {
+						window.open(getLink(), '_blank');
 					} else {
 						safeNavigate(getLink());
 					}
@@ -653,8 +639,8 @@ function DashboardsList(): JSX.Element {
 				label: (
 					<div
 						className="create-dashboard-menu-item"
-						onClick={(event: React.MouseEvent): void => {
-							onNewDashboardHandler(event);
+						onClick={(): void => {
+							onNewDashboardHandler();
 						}}
 					>
 						<LayoutGrid size={14} /> Create dashboard
@@ -941,9 +927,7 @@ function DashboardsList(): JSX.Element {
 
 				<DashboardTemplatesModal
 					showNewDashboardTemplatesModal={showNewDashboardTemplatesModal}
-					onCreateNewDashboard={(event: React.MouseEvent): Promise<void> =>
-						onNewDashboardHandler(event)
-					}
+					onCreateNewDashboard={onNewDashboardHandler}
 					onCancel={(): void => {
 						setShowNewDashboardTemplatesModal(false);
 					}}

frontend/src/container/ListOfDashboard/TableComponents/Name.tsx

@@ -1,6 +1,6 @@
 import { LockFilled } from '@ant-design/icons';
 import ROUTES from 'constants/routes';
-import { genericNavigate } from 'utils/genericNavigate';
+import history from 'lib/history';
 
 import { Data } from '../DashboardsList';
 import { TableLinkText } from './styles';
@@ -11,7 +11,11 @@ function Name(name: Data['name'], data: Data): JSX.Element {
 	const getLink = (): string => `${ROUTES.ALL_DASHBOARD}/${DashboardId}`;
 
 	const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
-		genericNavigate(getLink(), event);
+		if (event.metaKey || event.ctrlKey) {
+			window.open(getLink(), '_blank');
+		} else {
+			history.push(getLink());
+		}
 	};
 
 	return (

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -92,14 +92,14 @@ function BodyTitleRenderer({
 
 			if (isObject) {
 				// For objects/arrays, stringify the entire structure
-				copyText = `"${cleanedKey}": ${JSON.stringify(value, null, 2)}`;
+				copyText = JSON.stringify(value, null, 2);
 			} else if (parentIsArray) {
-				// For array elements, copy just the value
-				copyText = `"${cleanedKey}": ${value}`;
+				// array elements
+				copyText = `${value}`;
 			} else {
-				// For primitive values, format as JSON key-value pair
-				const valueStr = typeof value === 'string' ? `"${value}"` : String(value);
-				copyText = `"${cleanedKey}": ${valueStr}`;
+				// primitive values
+				const valueStr = typeof value === 'string' ? value : String(value);
+				copyText = valueStr;
 			}
 
 			setCopy(copyText);

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

@@ -60,7 +60,8 @@ const BodyContent: React.FC<{
 	fieldData: Record<string, string>;
 	record: DataType;
 	bodyHtml: { __html: string };
-}> = React.memo(({ fieldData, record, bodyHtml }) => {
+	textToCopy: string;
+}> = React.memo(({ fieldData, record, bodyHtml, textToCopy }) => {
 	const { isLoading, treeData, error } = useAsyncJSONProcessing(
 		fieldData.value,
 		record.field === 'body',
@@ -92,11 +93,13 @@ const BodyContent: React.FC<{
 
 	if (record.field === 'body') {
 		return (
-			<span
-				style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
-			>
-				<span dangerouslySetInnerHTML={bodyHtml} />
-			</span>
+			<CopyClipboardHOC entityKey="body" textToCopy={textToCopy}>
+				<span
+					style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
+				>
+					<span dangerouslySetInnerHTML={bodyHtml} />
+				</span>
+			</CopyClipboardHOC>
 		);
 	}
 
@@ -172,7 +175,12 @@ export default function TableViewActions(
 		switch (record.field) {
 			case 'body':
 				return (
-					<BodyContent fieldData={fieldData} record={record} bodyHtml={bodyHtml} />
+					<BodyContent
+						fieldData={fieldData}
+						record={record}
+						bodyHtml={bodyHtml}
+						textToCopy={textToCopy}
+					/>
 				);
 
 			case 'timestamp':
@@ -194,6 +202,7 @@ export default function TableViewActions(
 		record,
 		fieldData,
 		bodyHtml,
+		textToCopy,
 		formatTimezoneAdjustedTimestamp,
 		cleanTimestamp,
 	]);
@@ -202,7 +211,12 @@ export default function TableViewActions(
 	if (record.field === 'body') {
 		return (
 			<div className={cx('value-field', isOpen ? 'open-popover' : '')}>
-				<BodyContent fieldData={fieldData} record={record} bodyHtml={bodyHtml} />
+				<BodyContent
+					fieldData={fieldData}
+					record={record}
+					bodyHtml={bodyHtml}
+					textToCopy={textToCopy}
+				/>
 				{!isListViewPanel && !RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey) && (
 					<span className="action-btn">
 						<Tooltip title="Filter for value">

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

@@ -1,16 +1,54 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 
 import TableViewActions from '../TableViewActions';
+import useAsyncJSONProcessing from '../useAsyncJSONProcessing';
+
+// Mock data for tests
+let mockCopyToClipboard: jest.Mock;
+let mockNotificationsSuccess: jest.Mock;
 
 // Mock the components and hooks
 jest.mock('components/Logs/CopyClipboardHOC', () => ({
 	__esModule: true,
-	default: ({ children }: { children: React.ReactNode }): JSX.Element => (
-		<div className="CopyClipboardHOC">{children}</div>
+	default: ({
+		children,
+		textToCopy,
+		entityKey,
+	}: {
+		children: React.ReactNode;
+		textToCopy: string;
+		entityKey: string;
+	}): JSX.Element => (
+		// eslint-disable-next-line jsx-a11y/click-events-have-key-events
+		<div
+			className="CopyClipboardHOC"
+			data-testid={`copy-clipboard-${entityKey}`}
+			data-text-to-copy={textToCopy}
+			onClick={(): void => {
+				if (mockCopyToClipboard) {
+					mockCopyToClipboard(textToCopy);
+				}
+				if (mockNotificationsSuccess) {
+					mockNotificationsSuccess({
+						message: `${entityKey} copied to clipboard`,
+						key: `${entityKey} copied to clipboard`,
+					});
+				}
+			}}
+			role="button"
+			tabIndex={0}
+		>
+			{children}
+		</div>
 	),
 }));
 
+jest.mock('../useAsyncJSONProcessing', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
 jest.mock('providers/Timezone', () => ({
 	useTimezone: (): {
 		formatTimezoneAdjustedTimestamp: (timestamp: string) => string;
@@ -53,6 +91,19 @@ describe('TableViewActions', () => {
 		onGroupByAttribute: jest.fn(),
 	};
 
+	beforeEach(() => {
+		mockCopyToClipboard = jest.fn();
+		mockNotificationsSuccess = jest.fn();
+
+		// Default mock for useAsyncJSONProcessing
+		const mockUseAsyncJSONProcessing = jest.mocked(useAsyncJSONProcessing);
+		mockUseAsyncJSONProcessing.mockReturnValue({
+			isLoading: false,
+			treeData: null,
+			error: null,
+		});
+	});
+
 	it('should render without crashing', () => {
 		render(
 			<TableViewActions
@@ -127,4 +178,60 @@ describe('TableViewActions', () => {
 			container.querySelector(ACTION_BUTTON_TEST_ID),
 		).not.toBeInTheDocument();
 	});
+
+	it('should copy non-JSON body text without quotes when user clicks on body', () => {
+		// Setup: body field with surrounding quotes
+		const bodyValueWithQuotes =
+			'"FeatureFlag \'kafkaQueueProblems\' is enabled, sleeping 1 second"';
+		const expectedCopiedText =
+			"FeatureFlag 'kafkaQueueProblems' is enabled, sleeping 1 second";
+
+		const bodyProps = {
+			fieldData: {
+				field: 'body',
+				value: bodyValueWithQuotes,
+			},
+			record: {
+				key: 'body-key',
+				field: 'body',
+				value: bodyValueWithQuotes,
+			},
+			isListViewPanel: false,
+			isfilterInLoading: false,
+			isfilterOutLoading: false,
+			onClickHandler: jest.fn(),
+			onGroupByAttribute: jest.fn(),
+		};
+
+		// Render component with body field
+		render(
+			<TableViewActions
+				fieldData={bodyProps.fieldData}
+				record={bodyProps.record}
+				isListViewPanel={bodyProps.isListViewPanel}
+				isfilterInLoading={bodyProps.isfilterInLoading}
+				isfilterOutLoading={bodyProps.isfilterOutLoading}
+				onClickHandler={bodyProps.onClickHandler}
+				onGroupByAttribute={bodyProps.onGroupByAttribute}
+			/>,
+		);
+
+		// Find the clickable copy area for body
+		const copyArea = screen.getByTestId('copy-clipboard-body');
+
+		// Verify it has the correct text to copy (without quotes)
+		expect(copyArea).toHaveAttribute('data-text-to-copy', expectedCopiedText);
+
+		// Action: User clicks on body content
+		fireEvent.click(copyArea);
+
+		// Assert: Text was copied without surrounding quotes
+		expect(mockCopyToClipboard).toHaveBeenCalledWith(expectedCopiedText);
+
+		// Assert: Success notification shown
+		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
+			message: 'body copied to clipboard',
+			key: 'body copied to clipboard',
+		});
+	});
 });

frontend/src/container/LogDetailedView/__tests__/BodyTitleRenderer.test.tsx

@@ -51,7 +51,7 @@ describe('BodyTitleRenderer', () => {
 		await user.click(screen.getByText('name'));
 
 		await waitFor(() => {
-			expect(mockSetCopy).toHaveBeenCalledWith('"user.name": "John"');
+			expect(mockSetCopy).toHaveBeenCalledWith('John');
 			expect(mockNotification).toHaveBeenCalledWith(
 				expect.objectContaining({
 					message: expect.stringContaining('user.name'),
@@ -75,7 +75,7 @@ describe('BodyTitleRenderer', () => {
 		await user.click(screen.getByText('0'));
 
 		await waitFor(() => {
-			expect(mockSetCopy).toHaveBeenCalledWith('"items[*].0": arrayElement');
+			expect(mockSetCopy).toHaveBeenCalledWith('arrayElement');
 		});
 	});
 
@@ -96,9 +96,8 @@ describe('BodyTitleRenderer', () => {
 
 		await waitFor(() => {
 			const callArg = mockSetCopy.mock.calls[0][0];
-			expect(callArg).toContain('"user.metadata":');
-			expect(callArg).toContain('"id": 123');
-			expect(callArg).toContain('"active": true');
+			const expectedJson = JSON.stringify(testObject, null, 2);
+			expect(callArg).toBe(expectedJson);
 			expect(mockNotification).toHaveBeenCalledWith(
 				expect.objectContaining({
 					message: expect.stringContaining('object copied'),

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/MetricsApplication/Tabs/DBCall.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-identical-functions */
 import { Col } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -180,17 +179,14 @@ function DBCall(): JSX.Element {
 					type="default"
 					size="small"
 					id="database_call_rps_button"
-					onClick={(event): void =>
-						onViewTracePopupClick({
-							servicename,
-							selectedTraceTags,
-							timestamp: selectedTimeStamp,
-							apmToTraceQuery,
-							stepInterval,
-							safeNavigate,
-							event,
-						})
-					}
+					onClick={onViewTracePopupClick({
+						servicename,
+						selectedTraceTags,
+						timestamp: selectedTimeStamp,
+						apmToTraceQuery,
+						stepInterval,
+						safeNavigate,
+					})}
 				>
 					View Traces
 				</Button>
@@ -219,17 +215,14 @@ function DBCall(): JSX.Element {
 					type="default"
 					size="small"
 					id="database_call_avg_duration_button"
-					onClick={(event): void =>
-						onViewTracePopupClick({
-							servicename,
-							selectedTraceTags,
-							timestamp: selectedTimeStamp,
-							apmToTraceQuery,
-							stepInterval,
-							safeNavigate,
-							event,
-						})
-					}
+					onClick={onViewTracePopupClick({
+						servicename,
+						selectedTraceTags,
+						timestamp: selectedTimeStamp,
+						apmToTraceQuery,
+						stepInterval,
+						safeNavigate,
+					})}
 				>
 					View Traces
 				</Button>

frontend/src/container/MetricsApplication/Tabs/External.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-identical-functions */
 import { Col } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -245,28 +244,22 @@ function External(): JSX.Element {
 				<Col span={12}>
 					<GraphControlsPanel
 						id="external_call_error_percentage_button"
-						onViewTracesClick={(event: React.MouseEvent): void =>
-							onViewTracePopupClick({
-								servicename,
-								selectedTraceTags,
-								timestamp: selectedTimeStamp,
-								apmToTraceQuery: errorApmToTraceQuery,
-								stepInterval,
-								safeNavigate,
-								event,
-							})
-						}
-						onViewAPIMonitoringClick={(event: React.MouseEvent): void =>
-							onViewAPIMonitoringPopupClick({
-								servicename,
-								timestamp: selectedTimeStamp,
-								domainName: selectedData?.address || '',
-								isError: true,
-								stepInterval: 300,
-								safeNavigate,
-								event,
-							})
-						}
+						onViewTracesClick={onViewTracePopupClick({
+							servicename,
+							selectedTraceTags,
+							timestamp: selectedTimeStamp,
+							apmToTraceQuery: errorApmToTraceQuery,
+							stepInterval,
+							safeNavigate,
+						})}
+						onViewAPIMonitoringClick={onViewAPIMonitoringPopupClick({
+							servicename,
+							timestamp: selectedTimeStamp,
+							domainName: selectedData?.address || '',
+							isError: true,
+							stepInterval: 300,
+							safeNavigate,
+						})}
 					/>
 					<Card data-testid="external_call_error_percentage">
 						<GraphContainer>
@@ -293,28 +286,22 @@ function External(): JSX.Element {
 				<Col span={12}>
 					<GraphControlsPanel
 						id="external_call_duration_button"
-						onViewTracesClick={(event: React.MouseEvent): void =>
-							onViewTracePopupClick({
-								servicename,
-								selectedTraceTags,
-								timestamp: selectedTimeStamp,
-								apmToTraceQuery,
-								stepInterval,
-								safeNavigate,
-								event,
-							})
-						}
-						onViewAPIMonitoringClick={(event: React.MouseEvent): void =>
-							onViewAPIMonitoringPopupClick({
-								servicename,
-								timestamp: selectedTimeStamp,
-								domainName: selectedData?.address,
-								isError: false,
-								stepInterval: 300,
-								safeNavigate,
-								event,
-							})
-						}
+						onViewTracesClick={onViewTracePopupClick({
+							servicename,
+							selectedTraceTags,
+							timestamp: selectedTimeStamp,
+							apmToTraceQuery,
+							stepInterval,
+							safeNavigate,
+						})}
+						onViewAPIMonitoringClick={onViewAPIMonitoringPopupClick({
+							servicename,
+							timestamp: selectedTimeStamp,
+							domainName: selectedData?.address,
+							isError: false,
+							stepInterval: 300,
+							safeNavigate,
+						})}
 					/>
 
 					<Card data-testid="external_call_duration">
@@ -344,28 +331,22 @@ function External(): JSX.Element {
 				<Col span={12}>
 					<GraphControlsPanel
 						id="external_call_rps_by_address_button"
-						onViewTracesClick={(event: React.MouseEvent): void =>
-							onViewTracePopupClick({
-								servicename,
-								selectedTraceTags,
-								timestamp: selectedTimeStamp,
-								apmToTraceQuery,
-								stepInterval,
-								safeNavigate,
-								event,
-							})
-						}
-						onViewAPIMonitoringClick={(event: React.MouseEvent): void =>
-							onViewAPIMonitoringPopupClick({
-								servicename,
-								timestamp: selectedTimeStamp,
-								domainName: selectedData?.address,
-								isError: false,
-								stepInterval: 300,
-								safeNavigate,
-								event,
-							})
-						}
+						onViewTracesClick={onViewTracePopupClick({
+							servicename,
+							selectedTraceTags,
+							timestamp: selectedTimeStamp,
+							apmToTraceQuery,
+							stepInterval,
+							safeNavigate,
+						})}
+						onViewAPIMonitoringClick={onViewAPIMonitoringPopupClick({
+							servicename,
+							timestamp: selectedTimeStamp,
+							domainName: selectedData?.address,
+							isError: false,
+							stepInterval: 300,
+							safeNavigate,
+						})}
 					/>
 					<Card data-testid="external_call_rps_by_address">
 						<GraphContainer>
@@ -392,28 +373,22 @@ function External(): JSX.Element {
 				<Col span={12}>
 					<GraphControlsPanel
 						id="external_call_duration_by_address_button"
-						onViewTracesClick={(event: React.MouseEvent): void =>
-							onViewTracePopupClick({
-								servicename,
-								selectedTraceTags,
-								timestamp: selectedTimeStamp,
-								apmToTraceQuery,
-								stepInterval,
-								safeNavigate,
-								event,
-							})
-						}
-						onViewAPIMonitoringClick={(event: React.MouseEvent): void =>
-							onViewAPIMonitoringPopupClick({
-								servicename,
-								timestamp: selectedTimeStamp,
-								domainName: selectedData?.address,
-								isError: false,
-								stepInterval: 300,
-								safeNavigate,
-								event,
-							})
-						}
+						onViewTracesClick={onViewTracePopupClick({
+							servicename,
+							selectedTraceTags,
+							timestamp: selectedTimeStamp,
+							apmToTraceQuery,
+							stepInterval,
+							safeNavigate,
+						})}
+						onViewAPIMonitoringClick={onViewAPIMonitoringPopupClick({
+							servicename,
+							timestamp: selectedTimeStamp,
+							domainName: selectedData?.address,
+							isError: false,
+							stepInterval: 300,
+							safeNavigate,
+						})}
 					/>
 
 					<Card data-testid="external_call_duration_by_address">

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

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-identical-functions */
 import logEvent from 'api/common/logEvent';
 import getTopLevelOperations, {
 	ServiceDataProps,
@@ -32,7 +31,6 @@ import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { genericNavigate } from 'utils/genericNavigate';
 import { secondsToMilliseconds } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -230,16 +228,14 @@ function Application(): JSX.Element {
 	 * @param timestamp - The timestamp in seconds
 	 * @param apmToTraceQuery - query object
 	 * @param isViewLogsClicked - Whether this is for viewing logs vs traces
-	 * @param event - Click event to handle opening in new tab
 	 * @returns A callback function that handles the navigation when executed
 	 */
 	const onErrorTrackHandler = useCallback(
 		(
 			timestamp: number,
 			apmToTraceQuery: Query,
-			event: React.MouseEvent,
 			isViewLogsClicked?: boolean,
-		): void => {
+		): (() => void) => (): void => {
 			const endTime = secondsToMilliseconds(timestamp);
 			const startTime = secondsToMilliseconds(timestamp - stepInterval);
 
@@ -263,7 +259,7 @@ function Application(): JSX.Element {
 				queryString,
 			);
 
-			genericNavigate(newPath, event);
+			history.push(newPath);
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[stepInterval],
@@ -323,17 +319,14 @@ function Application(): JSX.Element {
 						type="default"
 						size="small"
 						id="Rate_button"
-						onClick={(event: React.MouseEvent): void =>
-							onViewTracePopupClick({
-								servicename,
-								selectedTraceTags,
-								timestamp: selectedTimeStamp,
-								apmToTraceQuery,
-								stepInterval,
-								safeNavigate,
-								event,
-							})
-						}
+						onClick={onViewTracePopupClick({
+							servicename,
+							selectedTraceTags,
+							timestamp: selectedTimeStamp,
+							apmToTraceQuery,
+							stepInterval,
+							safeNavigate,
+						})}
 					>
 						View Traces
 					</Button>
@@ -356,17 +349,14 @@ function Application(): JSX.Element {
 							type="default"
 							size="small"
 							id="ApDex_button"
-							onClick={(event: React.MouseEvent): void =>
-								onViewTracePopupClick({
-									servicename,
-									selectedTraceTags,
-									timestamp: selectedTimeStamp,
-									apmToTraceQuery,
-									stepInterval,
-									safeNavigate,
-									event,
-								})
-							}
+							onClick={onViewTracePopupClick({
+								servicename,
+								selectedTraceTags,
+								timestamp: selectedTimeStamp,
+								apmToTraceQuery,
+								stepInterval,
+								safeNavigate,
+							})}
 						>
 							View Traces
 						</Button>
@@ -380,12 +370,15 @@ function Application(): JSX.Element {
 					<ColErrorContainer>
 						<GraphControlsPanel
 							id="Error_button"
-							onViewLogsClick={(event: React.MouseEvent): void =>
-								onErrorTrackHandler(selectedTimeStamp, logErrorQuery, event, true)
-							}
-							onViewTracesClick={(event: React.MouseEvent): void =>
-								onErrorTrackHandler(selectedTimeStamp, errorTrackQuery, event)
-							}
+							onViewLogsClick={onErrorTrackHandler(
+								selectedTimeStamp,
+								logErrorQuery,
+								true,
+							)}
+							onViewTracesClick={onErrorTrackHandler(
+								selectedTimeStamp,
+								errorTrackQuery,
+							)}
 						/>
 
 						<TopLevelOperation

frontend/src/container/MetricsApplication/Tabs/Overview/GraphControlsPanel/GraphControlsPanel.tsx

@@ -6,9 +6,9 @@ import { Binoculars, DraftingCompass, ScrollText } from 'lucide-react';
 
 interface GraphControlsPanelProps {
 	id: string;
-	onViewLogsClick?: (event: React.MouseEvent) => void;
-	onViewTracesClick: (event: React.MouseEvent) => void;
-	onViewAPIMonitoringClick?: (event: React.MouseEvent) => void;
+	onViewLogsClick?: () => void;
+	onViewTracesClick: () => void;
+	onViewAPIMonitoringClick?: () => void;
 }
 
 function GraphControlsPanel({
@@ -23,7 +23,7 @@ function GraphControlsPanel({
 				type="link"
 				icon={<DraftingCompass size={14} />}
 				size="small"
-				onClick={(event: React.MouseEvent): void => onViewTracesClick(event)}
+				onClick={onViewTracesClick}
 				style={{ color: Color.BG_VANILLA_100 }}
 			>
 				View traces
@@ -33,7 +33,7 @@ function GraphControlsPanel({
 					type="link"
 					icon={<ScrollText size={14} />}
 					size="small"
-					onClick={(event: React.MouseEvent): void => onViewLogsClick(event)}
+					onClick={onViewLogsClick}
 					style={{ color: Color.BG_VANILLA_100 }}
 				>
 					View logs
@@ -44,9 +44,7 @@ function GraphControlsPanel({
 					type="link"
 					icon={<Binoculars size={14} />}
 					size="small"
-					onClick={(event: React.MouseEvent): void =>
-						onViewAPIMonitoringClick(event)
-					}
+					onClick={onViewAPIMonitoringClick}
 					style={{ color: Color.BG_VANILLA_100 }}
 				>
 					View External APIs

frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx

@@ -103,29 +103,23 @@ function ServiceOverview({
 		<>
 			<GraphControlsPanel
 				id="Service_button"
-				onViewLogsClick={(event: React.MouseEvent): void =>
-					onViewTracePopupClick({
-						servicename,
-						selectedTraceTags,
-						timestamp: selectedTimeStamp,
-						apmToTraceQuery: apmToLogQuery,
-						isViewLogsClicked: true,
-						stepInterval,
-						safeNavigate,
-						event,
-					})
-				}
-				onViewTracesClick={(event: React.MouseEvent): void =>
-					onViewTracePopupClick({
-						servicename,
-						selectedTraceTags,
-						timestamp: selectedTimeStamp,
-						apmToTraceQuery,
-						stepInterval,
-						safeNavigate,
-						event,
-					})
-				}
+				onViewLogsClick={onViewTracePopupClick({
+					servicename,
+					selectedTraceTags,
+					timestamp: selectedTimeStamp,
+					apmToTraceQuery: apmToLogQuery,
+					isViewLogsClicked: true,
+					stepInterval,
+					safeNavigate,
+				})}
+				onViewTracesClick={onViewTracePopupClick({
+					servicename,
+					selectedTraceTags,
+					timestamp: selectedTimeStamp,
+					apmToTraceQuery,
+					stepInterval,
+					safeNavigate,
+				})}
 			/>
 			<Card data-testid="service_latency">
 				<GraphContainer>

frontend/src/container/MetricsApplication/Tabs/Overview/TableRenderer/ColumnWithLink.tsx

@@ -3,7 +3,6 @@ import { navigateToTrace } from 'container/MetricsApplication/utils';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { isCtrlOrMMetaKey } from 'utils/isCtrlOrMMetaKey';
 import { v4 as uuid } from 'uuid';
 
 import { useGetAPMToTracesQueries } from '../../util';
@@ -51,7 +50,7 @@ function ColumnWithLink({
 	return (
 		<Tooltip placement="topLeft" title={text}>
 			<Typography.Link
-				onClick={(e): void => handleOnClick(text, isCtrlOrMMetaKey(e))}
+				onClick={(e): void => handleOnClick(text, e.metaKey || e.ctrlKey)}
 			>
 				{text}
 			</Typography.Link>

frontend/src/container/MetricsApplication/Tabs/util.ts

@@ -22,7 +22,6 @@ import {
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { Tags } from 'types/reducer/trace';
-import { isCtrlOrMMetaKey } from 'utils/isCtrlOrMMetaKey';
 import { secondsToMilliseconds } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -44,7 +43,6 @@ interface OnViewTracePopupClickProps {
 	isViewLogsClicked?: boolean;
 	stepInterval?: number;
 	safeNavigate: (url: string) => void;
-	event: React.MouseEvent;
 }
 
 interface OnViewAPIMonitoringPopupClickProps {
@@ -55,7 +53,6 @@ interface OnViewAPIMonitoringPopupClickProps {
 	isError: boolean;
 
 	safeNavigate: (url: string) => void;
-	event: React.MouseEvent;
 }
 
 export function generateExplorerPath(
@@ -86,7 +83,7 @@ export function generateExplorerPath(
  * @param isViewLogsClicked - Whether this is for viewing logs vs traces
  * @param stepInterval - Time interval in seconds
  * @param safeNavigate - Navigation function
- * @param event - Click event to handle opening in new tab
+ 
  */
 export function onViewTracePopupClick({
 	selectedTraceTags,
@@ -96,34 +93,33 @@ export function onViewTracePopupClick({
 	isViewLogsClicked,
 	stepInterval,
 	safeNavigate,
-	event,
-}: OnViewTracePopupClickProps): void {
-	const endTime = secondsToMilliseconds(timestamp);
-	const startTime = secondsToMilliseconds(timestamp - (stepInterval || 60));
+}: OnViewTracePopupClickProps): VoidFunction {
+	return (): void => {
+		const endTime = secondsToMilliseconds(timestamp);
+		const startTime = secondsToMilliseconds(timestamp - (stepInterval || 60));
 
-	const urlParams = new URLSearchParams(window.location.search);
-	urlParams.set(QueryParams.startTime, startTime.toString());
-	urlParams.set(QueryParams.endTime, endTime.toString());
-	urlParams.delete(QueryParams.relativeTime);
-	const avialableParams = routeConfig[ROUTES.TRACE];
-	const queryString = getQueryString(avialableParams, urlParams);
+		const urlParams = new URLSearchParams(window.location.search);
+		urlParams.set(QueryParams.startTime, startTime.toString());
+		urlParams.set(QueryParams.endTime, endTime.toString());
+		urlParams.delete(QueryParams.relativeTime);
+		const avialableParams = routeConfig[ROUTES.TRACE];
+		const queryString = getQueryString(avialableParams, urlParams);
 
-	const JSONCompositeQuery = encodeURIComponent(JSON.stringify(apmToTraceQuery));
+		const JSONCompositeQuery = encodeURIComponent(
+			JSON.stringify(apmToTraceQuery),
+		);
 
-	const newPath = generateExplorerPath(
-		isViewLogsClicked,
-		urlParams,
-		servicename,
-		selectedTraceTags,
-		JSONCompositeQuery,
-		queryString,
-	);
+		const newPath = generateExplorerPath(
+			isViewLogsClicked,
+			urlParams,
+			servicename,
+			selectedTraceTags,
+			JSONCompositeQuery,
+			queryString,
+		);
 
-	if (event && isCtrlOrMMetaKey(event)) {
-		window.open(newPath, '_blank', 'noopener,noreferrer');
-	} else {
 		safeNavigate(newPath);
-	}
+	};
 }
 
 const generateAPIMonitoringPath = (
@@ -153,52 +149,49 @@ export function onViewAPIMonitoringPopupClick({
 	isError,
 	stepInterval,
 	safeNavigate,
-	event,
-}: OnViewAPIMonitoringPopupClickProps): void {
-	const endTime = timestamp + (stepInterval || 60);
-	const startTime = timestamp - (stepInterval || 60);
-	const filters = {
-		items: [
-			...(isError
-				? [
-						{
-							id: uuid().slice(0, 8),
-							key: {
-								key: 'hasError',
-								dataType: DataTypes.bool,
-								type: 'tag',
-								id: 'hasError--bool--tag--true',
+}: OnViewAPIMonitoringPopupClickProps): VoidFunction {
+	return (): void => {
+		const endTime = timestamp + (stepInterval || 60);
+		const startTime = timestamp - (stepInterval || 60);
+		const filters = {
+			items: [
+				...(isError
+					? [
+							{
+								id: uuid().slice(0, 8),
+								key: {
+									key: 'hasError',
+									dataType: DataTypes.bool,
+									type: 'tag',
+									id: 'hasError--bool--tag--true',
+								},
+								op: 'in',
+								value: ['true'],
 							},
-							op: 'in',
-							value: ['true'],
-						},
-				  ]
-				: []),
-			{
-				id: uuid().slice(0, 8),
-				key: {
-					key: 'service.name',
-					dataType: DataTypes.String,
-					type: 'resource',
+					  ]
+					: []),
+				{
+					id: uuid().slice(0, 8),
+					key: {
+						key: 'service.name',
+						dataType: DataTypes.String,
+						type: 'resource',
+					},
+					op: '=',
+					value: servicename,
 				},
-				op: '=',
-				value: servicename,
-			},
-		],
-		op: 'AND',
-	};
-	const newPath = generateAPIMonitoringPath(
-		domainName,
-		startTime,
-		endTime,
-		filters,
-	);
+			],
+			op: 'AND',
+		};
+		const newPath = generateAPIMonitoringPath(
+			domainName,
+			startTime,
+			endTime,
+			filters,
+		);
 
-	if (event && isCtrlOrMMetaKey(event)) {
-		window.open(newPath, '_blank', 'noopener,noreferrer');
-	} else {
 		safeNavigate(newPath);
-	}
+	};
 }
 
 export function useGraphClickHandler(

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -17,7 +17,6 @@ import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { isCtrlOrMMetaKey } from 'utils/isCtrlOrMMetaKey';
 import { v4 as uuid } from 'uuid';
 
 import { IServiceName } from './Tabs/types';
@@ -116,7 +115,7 @@ function TopOperationsTable({
 						e.stopPropagation();
 						e.preventDefault();
 
-						if (isCtrlOrMMetaKey(e)) {
+						if (e.metaKey || e.ctrlKey) {
 							handleOnClick(text, true); // open in new tab
 						} else {
 							handleOnClick(text, false); // open in current tab

frontend/src/container/MetricsExplorer/Explorer/Explorer.styles.scss

@@ -58,6 +58,27 @@
 	.explore-content {
 		padding: 0 8px;
 
+		.y-axis-unit-selector-container {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			padding-top: 10px;
+			margin-bottom: 10px;
+
+			.save-unit-container {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+
+				.ant-btn {
+					border-radius: 2px;
+					.ant-typography {
+						font-size: 12px;
+					}
+				}
+			}
+		}
+
 		.ant-space {
 			margin-top: 10px;
 			margin-bottom: 20px;
@@ -75,6 +96,14 @@
 		.time-series-view {
 			min-width: 100%;
 			width: 100%;
+			position: relative;
+
+			.no-unit-warning {
+				position: absolute;
+				top: 30px;
+				right: 40px;
+				z-index: 1000;
+			}
 		}
 
 		.time-series-container {

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -1,7 +1,7 @@
 import './Explorer.styles.scss';
 
 import * as Sentry from '@sentry/react';
-import { Switch } from 'antd';
+import { Switch, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -25,10 +25,14 @@ import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToD
 import { v4 as uuid } from 'uuid';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
-// import QuerySection from './QuerySection';
+import MetricDetails from '../MetricDetails/MetricDetails';
 import TimeSeries from './TimeSeries';
 import { ExplorerTabs } from './types';
-import { splitQueryIntoOneChartPerQuery } from './utils';
+import {
+	getMetricUnits,
+	splitQueryIntoOneChartPerQuery,
+	useGetMetrics,
+} from './utils';
 
 const ONE_CHART_PER_QUERY_ENABLED_KEY = 'isOneChartPerQueryEnabled';
 
@@ -40,6 +44,34 @@ function Explorer(): JSX.Element {
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
+	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);
+
+	const metricNames = useMemo(() => {
+		const currentMetricNames: string[] = [];
+		stagedQuery?.builder.queryData.forEach((query) => {
+			if (query.aggregateAttribute?.key) {
+				currentMetricNames.push(query.aggregateAttribute?.key);
+			}
+		});
+		return currentMetricNames;
+	}, [stagedQuery]);
+
+	const {
+		metrics,
+		isLoading: isMetricUnitsLoading,
+		isError: isMetricUnitsError,
+	} = useGetMetrics(metricNames);
+
+	const units = useMemo(() => getMetricUnits(metrics), [metrics]);
+
+	const areAllMetricUnitsSame = useMemo(
+		() =>
+			!isMetricUnitsLoading &&
+			!isMetricUnitsError &&
+			units.length > 0 &&
+			units.every((unit) => unit && unit === units[0]),
+		[units, isMetricUnitsLoading, isMetricUnitsError],
+	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
 	const isOneChartPerQueryEnabled =
@@ -48,7 +80,66 @@ function Explorer(): JSX.Element {
 	const [showOneChartPerQuery, toggleShowOneChartPerQuery] = useState(
 		isOneChartPerQueryEnabled,
 	);
+	const [disableOneChartPerQuery, toggleDisableOneChartPerQuery] = useState(
+		false,
+	);
 	const [selectedTab] = useState<ExplorerTabs>(ExplorerTabs.TIME_SERIES);
+	const [yAxisUnit, setYAxisUnit] = useState<string | undefined>();
+
+	const unitsLength = useMemo(() => units.length, [units]);
+	const firstUnit = useMemo(() => units?.[0], [units]);
+
+	useEffect(() => {
+		// Set the y axis unit to the first metric unit if
+		// 1. There is one metric unit and it is not empty
+		// 2. All metric units are the same and not empty
+		// Else, set the y axis unit to empty if
+		// 1. There are more than one metric units and they are not the same
+		// 2. There are no metric units
+		// 3. There is exactly one metric unit but it is empty/undefined
+		if (unitsLength === 0) {
+			setYAxisUnit(undefined);
+		} else if (unitsLength === 1 && firstUnit) {
+			setYAxisUnit(firstUnit);
+		} else if (unitsLength === 1 && !firstUnit) {
+			setYAxisUnit(undefined);
+		} else if (areAllMetricUnitsSame) {
+			if (firstUnit) {
+				setYAxisUnit(firstUnit);
+			} else {
+				setYAxisUnit(undefined);
+			}
+		} else if (unitsLength > 1 && !areAllMetricUnitsSame) {
+			setYAxisUnit(undefined);
+		}
+	}, [unitsLength, firstUnit, areAllMetricUnitsSame]);
+
+	useEffect(() => {
+		// Don't apply logic during loading to avoid overwriting user preferences
+		if (isMetricUnitsLoading) {
+			return;
+		}
+
+		// Disable one chart per query if -
+		// 1. There are more than one metric
+		// 2. The metric units are not the same
+		if (units.length > 1 && !areAllMetricUnitsSame) {
+			toggleShowOneChartPerQuery(true);
+			toggleDisableOneChartPerQuery(true);
+		} else if (units.length <= 1) {
+			toggleShowOneChartPerQuery(false);
+			toggleDisableOneChartPerQuery(true);
+		} else {
+			// When units are the same and loading is complete, restore URL-based preference
+			toggleShowOneChartPerQuery(isOneChartPerQueryEnabled);
+			toggleDisableOneChartPerQuery(false);
+		}
+	}, [
+		units,
+		areAllMetricUnitsSame,
+		isMetricUnitsLoading,
+		isOneChartPerQueryEnabled,
+	]);
 
 	const handleToggleShowOneChartPerQuery = (): void => {
 		toggleShowOneChartPerQuery(!showOneChartPerQuery);
@@ -68,15 +159,20 @@ function Explorer(): JSX.Element {
 		[updateAllQueriesOperators],
 	);
 
-	const exportDefaultQuery = useMemo(
-		() =>
-			updateAllQueriesOperators(
-				currentQuery || initialQueriesMap[DataSource.METRICS],
-				PANEL_TYPES.TIME_SERIES,
-				DataSource.METRICS,
-			),
-		[currentQuery, updateAllQueriesOperators],
-	);
+	const exportDefaultQuery = useMemo(() => {
+		const query = updateAllQueriesOperators(
+			currentQuery || initialQueriesMap[DataSource.METRICS],
+			PANEL_TYPES.TIME_SERIES,
+			DataSource.METRICS,
+		);
+		if (yAxisUnit && !query.unit) {
+			return {
+				...query,
+				unit: yAxisUnit,
+			};
+		}
+		return query;
+	}, [currentQuery, updateAllQueriesOperators, yAxisUnit]);
 
 	useShareBuilderUrl({ defaultValue: defaultQuery });
 
@@ -90,8 +186,16 @@ function Explorer(): JSX.Element {
 
 			const widgetId = uuid();
 
+			let query = queryToExport || exportDefaultQuery;
+			if (yAxisUnit && !query.unit) {
+				query = {
+					...query,
+					unit: yAxisUnit,
+				};
+			}
+
 			const dashboardEditView = generateExportToDashboardLink({
-				query: queryToExport || exportDefaultQuery,
+				query,
 				panelType: PANEL_TYPES.TIME_SERIES,
 				dashboardId: dashboard.id,
 				widgetId,
@@ -99,17 +203,33 @@ function Explorer(): JSX.Element {
 
 			safeNavigate(dashboardEditView);
 		},
-		[exportDefaultQuery, safeNavigate],
+		[exportDefaultQuery, safeNavigate, yAxisUnit],
 	);
 
 	const splitedQueries = useMemo(
 		() =>
 			splitQueryIntoOneChartPerQuery(
 				stagedQuery || initialQueriesMap[DataSource.METRICS],
+				metricNames,
+				units,
 			),
-		[stagedQuery],
+		[stagedQuery, metricNames, units],
 	);
 
+	const [selectedMetricName, setSelectedMetricName] = useState<string | null>(
+		null,
+	);
+
+	const handleOpenMetricDetails = (metricName: string): void => {
+		setIsMetricDetailsOpen(true);
+		setSelectedMetricName(metricName);
+	};
+
+	const handleCloseMetricDetails = (): void => {
+		setIsMetricDetailsOpen(false);
+		setSelectedMetricName(null);
+	};
+
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.TabChanged, {
 			[MetricsExplorerEventKeys.Tab]: 'explorer',
@@ -123,17 +243,44 @@ function Explorer(): JSX.Element {
 
 	const [warning, setWarning] = useState<Warning | undefined>(undefined);
 
+	const oneChartPerQueryDisabledTooltip = useMemo(() => {
+		if (splitedQueries.length <= 1) {
+			return 'One chart per query cannot be toggled for a single query.';
+		}
+		if (units.length <= 1) {
+			return 'One chart per query cannot be toggled when there is only one metric.';
+		}
+		if (disableOneChartPerQuery) {
+			return 'One chart per query cannot be disabled for multiple queries with different units.';
+		}
+		return undefined;
+	}, [disableOneChartPerQuery, splitedQueries.length, units.length]);
+
+	// Show the y axis unit selector if -
+	// 1. There is only one metric
+	// 2. The metric has no saved unit
+	const showYAxisUnitSelector = useMemo(
+		() => !isMetricUnitsLoading && units.length === 1 && !units[0],
+		[units, isMetricUnitsLoading],
+	);
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-explore-container">
 				<div className="explore-header">
 					<div className="explore-header-left-actions">
 						<span>1 chart/query</span>
-						<Switch
-							checked={showOneChartPerQuery}
-							onChange={handleToggleShowOneChartPerQuery}
-							size="small"
-						/>
+						<Tooltip
+							open={disableOneChartPerQuery ? undefined : false}
+							title={oneChartPerQueryDisabledTooltip}
+						>
+							<Switch
+								checked={showOneChartPerQuery}
+								onChange={handleToggleShowOneChartPerQuery}
+								disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
+								size="small"
+							/>
+						</Tooltip>
 					</div>
 					<div className="explore-header-right-actions">
 						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
@@ -174,6 +321,16 @@ function Explorer(): JSX.Element {
 						<TimeSeries
 							showOneChartPerQuery={showOneChartPerQuery}
 							setWarning={setWarning}
+							areAllMetricUnitsSame={areAllMetricUnitsSame}
+							isMetricUnitsLoading={isMetricUnitsLoading}
+							isMetricUnitsError={isMetricUnitsError}
+							metricUnits={units}
+							metricNames={metricNames}
+							metrics={metrics}
+							handleOpenMetricDetails={handleOpenMetricDetails}
+							yAxisUnit={yAxisUnit}
+							setYAxisUnit={setYAxisUnit}
+							showYAxisUnitSelector={showYAxisUnitSelector}
 						/>
 					)}
 					{/* TODO: Enable once we have resolved all related metrics issues */}
@@ -187,9 +344,17 @@ function Explorer(): JSX.Element {
 				query={exportDefaultQuery}
 				sourcepage={DataSource.METRICS}
 				onExport={handleExport}
-				isOneChartPerQuery={false}
+				isOneChartPerQuery={showOneChartPerQuery}
 				splitedQueries={splitedQueries}
 			/>
+			{isMetricDetailsOpen && (
+				<MetricDetails
+					metricName={selectedMetricName}
+					isOpen={isMetricDetailsOpen}
+					onClose={handleCloseMetricDetails}
+					isModalTimeSelection={false}
+				/>
+			)}
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -1,14 +1,18 @@
+import { Color } from '@signozhq/design-tokens';
+import { Tooltip, Typography } from 'antd';
 import { isAxiosError } from 'axios';
 import classNames from 'classnames';
+import YAxisUnitSelector from 'components/YAxisUnitSelector';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { useMemo, useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -24,6 +28,13 @@ import { splitQueryIntoOneChartPerQuery } from './utils';
 function TimeSeries({
 	showOneChartPerQuery,
 	setWarning,
+	isMetricUnitsLoading,
+	metricUnits,
+	metricNames,
+	handleOpenMetricDetails,
+	yAxisUnit,
+	setYAxisUnit,
+	showYAxisUnitSelector,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -56,13 +67,14 @@ function TimeSeries({
 			showOneChartPerQuery
 				? splitQueryIntoOneChartPerQuery(
 						stagedQuery || initialQueriesMap[DataSource.METRICS],
+						metricNames,
+						metricUnits,
 				  )
 				: [stagedQuery || initialQueriesMap[DataSource.METRICS]],
-		[showOneChartPerQuery, stagedQuery],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[showOneChartPerQuery, stagedQuery, JSON.stringify(metricUnits)],
 	);
 
-	const [yAxisUnit, setYAxisUnit] = useState<string>('');
-
 	const queries = useQueries(
 		queryPayloads.map((payload, index) => ({
 			queryKey: [
@@ -126,32 +138,148 @@ function TimeSeries({
 		setYAxisUnit(value);
 	};
 
+	// TODO: Enable once we have resolved all related metrics v2 api issues
+	// Show the save unit button if
+	// 1. There is only one metric
+	// 2. The metric has no saved unit
+	// 3. The user has selected a unit
+	// const showSaveUnitButton = useMemo(
+	// 	() =>
+	// 		metricUnits.length === 1 &&
+	// 		Boolean(metrics?.[0]) &&
+	// 		!metricUnits[0] &&
+	// 		yAxisUnit,
+	// 	[metricUnits, metrics, yAxisUnit],
+	// );
+
+	// const {
+	// 	mutate: updateMetricMetadata,
+	// 	isLoading: isUpdatingMetricMetadata,
+	// } = useUpdateMetricMetadata();
+
+	// const handleSaveUnit = (): void => {
+	// 	updateMetricMetadata(
+	// 		{
+	// 			metricName: metricNames[0],
+	// 			payload: {
+	// 				unit: yAxisUnit,
+	// 				description: metrics[0]?.description ?? '',
+	// 				metricType: metrics[0]?.type as MetricType,
+	// 				temporality: metrics[0]?.temporality,
+	// 			},
+	// 		},
+	// 		{
+	// 			onSuccess: () => {
+	// 				notifications.success({
+	// 					message: 'Unit saved successfully',
+	// 				});
+	// 				queryClient.invalidateQueries([
+	// 					REACT_QUERY_KEY.GET_METRIC_DETAILS,
+	// 					metricNames[0],
+	// 				]);
+	// 			},
+	// 			onError: () => {
+	// 				notifications.error({
+	// 					message: 'Failed to save unit',
+	// 				});
+	// 			},
+	// 		},
+	// 	);
+	// };
+
 	return (
 		<>
-			<BuilderUnitsFilter onChange={onUnitChangeHandler} yAxisUnit={yAxisUnit} />
+			<div className="y-axis-unit-selector-container">
+				{showYAxisUnitSelector && (
+					<>
+						<YAxisUnitSelector
+							onChange={onUnitChangeHandler}
+							value={yAxisUnit}
+							source={YAxisSource.EXPLORER}
+							data-testid="y-axis-unit-selector"
+						/>
+						{/* TODO: Enable once we have resolved all related metrics v2 api issues */}
+						{/* {showSaveUnitButton && (
+							<div className="save-unit-container">
+								<Typography.Text>
+									Save the selected unit for this metric?
+								</Typography.Text>
+								<Button
+									type="primary"
+									size="small"
+									disabled={isUpdatingMetricMetadata}
+									onClick={handleSaveUnit}
+								>
+									<Typography.Paragraph>Yes</Typography.Paragraph>
+								</Button>
+							</div>
+						)} */}
+					</>
+				)}
+			</div>
 			<div
 				className={classNames({
 					'time-series-container': changeLayoutForOneChartPerQuery,
 				})}
 			>
-				{responseData.map((datapoint, index) => (
-					<div
-						className="time-series-view"
-						// eslint-disable-next-line react/no-array-index-key
-						key={index}
-					>
-						<TimeSeriesView
-							isFilterApplied={false}
-							isError={queries[index].isError}
-							isLoading={queries[index].isLoading}
-							data={datapoint}
-							yAxisUnit={yAxisUnit}
-							dataSource={DataSource.METRICS}
-							error={queries[index].error as APIError}
-							setWarning={setWarning}
-						/>
-					</div>
-				))}
+				{responseData.map((datapoint, index) => {
+					const isQueryDataItem = index < metricNames.length;
+					const metricName = isQueryDataItem ? metricNames[index] : undefined;
+					const metricUnit = isQueryDataItem ? metricUnits[index] : undefined;
+
+					// Show the no unit warning if -
+					// 1. The metric query is not loading
+					// 2. The metric units are not loading
+					// 3. There are more than one metric
+					// 4. The current metric unit is empty
+					// 5. Is a queryData item
+					const isMetricUnitEmpty =
+						isQueryDataItem &&
+						!queries[index].isLoading &&
+						!isMetricUnitsLoading &&
+						metricUnits.length > 1 &&
+						!metricUnit &&
+						metricName;
+
+					const currentYAxisUnit = yAxisUnit || metricUnit;
+
+					return (
+						<div
+							className="time-series-view"
+							// eslint-disable-next-line react/no-array-index-key
+							key={index}
+						>
+							{isMetricUnitEmpty && metricName && (
+								<Tooltip
+									className="no-unit-warning"
+									title={
+										<Typography.Text>
+											This metric does not have a unit. Please set one for it in the{' '}
+											<Typography.Link
+												onClick={(): void => handleOpenMetricDetails(metricName)}
+											>
+												metric details
+											</Typography.Link>{' '}
+											page.
+										</Typography.Text>
+									}
+								>
+									<AlertTriangle size={16} color={Color.BG_AMBER_400} />
+								</Tooltip>
+							)}
+							<TimeSeriesView
+								isFilterApplied={false}
+								isError={queries[index].isError}
+								isLoading={queries[index].isLoading || isMetricUnitsLoading}
+								data={datapoint}
+								yAxisUnit={currentYAxisUnit}
+								dataSource={DataSource.METRICS}
+								error={queries[index].error as APIError}
+								setWarning={setWarning}
+							/>
+						</div>
+					);
+				})}
 			</div>
 		</>
 	);

frontend/src/container/MetricsExplorer/Explorer/__tests__/Explorer.test.tsx

@@ -1,4 +1,6 @@
 import { render, screen } from '@testing-library/react';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import * as useOptionsMenuHooks from 'container/OptionsMenu';
 import * as useUpdateDashboardHooks from 'hooks/dashboard/useUpdateDashboard';
@@ -12,13 +14,18 @@ import { MemoryRouter } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import store from 'store';
 import { LicenseEvent } from 'types/api/licensesV3/getActive';
-import { DataSource } from 'types/common/queryBuilder';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
 
 import Explorer from '../Explorer';
+import * as useGetMetricsHooks from '../utils';
 
 const mockSetSearchParams = jest.fn();
 const queryClient = new QueryClient();
-const mockUpdateAllQueriesOperators = jest.fn();
+const mockUpdateAllQueriesOperators = jest
+	.fn()
+	.mockReturnValue(initialQueriesMap[DataSource.METRICS]);
 const mockUseQueryBuilderData = {
 	handleRunQuery: jest.fn(),
 	stagedQuery: initialQueriesMap[DataSource.METRICS],
@@ -126,6 +133,30 @@ jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
 	...mockUseQueryBuilderData,
 } as any);
 
+const Y_AXIS_UNIT_SELECTOR_TEST_ID = 'y-axis-unit-selector';
+
+const mockMetric: MetricMetadata = {
+	type: MetricType.SUM,
+	description: 'metric1 description',
+	unit: 'metric1 unit',
+	temporality: Temporality.CUMULATIVE,
+	isMonotonic: true,
+};
+
+function renderExplorer(): void {
+	render(
+		<QueryClientProvider client={queryClient}>
+			<MemoryRouter>
+				<Provider store={store}>
+					<ErrorModalProvider>
+						<Explorer />
+					</ErrorModalProvider>
+				</Provider>
+			</MemoryRouter>
+		</QueryClientProvider>,
+	);
+}
+
 describe('Explorer', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
@@ -142,17 +173,7 @@ describe('Explorer', () => {
 			mockSetSearchParams,
 		]);
 
-		render(
-			<QueryClientProvider client={queryClient}>
-				<MemoryRouter>
-					<Provider store={store}>
-						<ErrorModalProvider>
-							<Explorer />
-						</ErrorModalProvider>
-					</Provider>
-				</MemoryRouter>
-			</QueryClientProvider>,
-		);
+		renderExplorer();
 
 		expect(mockUpdateAllQueriesOperators).toHaveBeenCalledWith(
 			initialQueriesMap[DataSource.METRICS],
@@ -166,18 +187,13 @@ describe('Explorer', () => {
 			new URLSearchParams({ isOneChartPerQueryEnabled: 'true' }),
 			mockSetSearchParams,
 		]);
+		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric, mockMetric],
+		});
 
-		render(
-			<QueryClientProvider client={queryClient}>
-				<MemoryRouter>
-					<Provider store={store}>
-						<ErrorModalProvider>
-							<Explorer />
-						</ErrorModalProvider>
-					</Provider>
-				</MemoryRouter>
-			</QueryClientProvider>,
-		);
+		renderExplorer();
 
 		const toggle = screen.getByRole('switch');
 		expect(toggle).toBeChecked();
@@ -188,20 +204,132 @@ describe('Explorer', () => {
 			new URLSearchParams({ isOneChartPerQueryEnabled: 'false' }),
 			mockSetSearchParams,
 		]);
+		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric, mockMetric],
+		});
 
-		render(
-			<QueryClientProvider client={queryClient}>
-				<MemoryRouter>
-					<Provider store={store}>
-						<ErrorModalProvider>
-							<Explorer />
-						</ErrorModalProvider>
-					</Provider>
-				</MemoryRouter>
-			</QueryClientProvider>,
-		);
+		renderExplorer();
 
 		const toggle = screen.getByRole('switch');
 		expect(toggle).not.toBeChecked();
 	});
+
+	it('should not render y axis unit selector for single metric which has a unit', () => {
+		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric],
+		});
+
+		renderExplorer();
+
+		const yAxisUnitSelector = screen.queryByTestId(Y_AXIS_UNIT_SELECTOR_TEST_ID);
+		expect(yAxisUnitSelector).not.toBeInTheDocument();
+	});
+
+	it('should not render y axis unit selector for mutliple metrics with same unit', () => {
+		(useSearchParams as jest.Mock).mockReturnValueOnce([
+			new URLSearchParams({ isOneChartPerQueryEnabled: 'true' }),
+			mockSetSearchParams,
+		]);
+		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric, mockMetric],
+		});
+
+		renderExplorer();
+
+		const yAxisUnitSelector = screen.queryByTestId(Y_AXIS_UNIT_SELECTOR_TEST_ID);
+		expect(yAxisUnitSelector).not.toBeInTheDocument();
+	});
+
+	it('should hide y axis unit selector for multiple metrics with different units', () => {
+		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric, mockMetric],
+		});
+
+		renderExplorer();
+
+		const yAxisUnitSelector = screen.queryByTestId(Y_AXIS_UNIT_SELECTOR_TEST_ID);
+		expect(yAxisUnitSelector).not.toBeInTheDocument();
+
+		// One chart per query toggle should be disabled
+		const oneChartPerQueryToggle = screen.getByRole('switch');
+		expect(oneChartPerQueryToggle).toBeDisabled();
+	});
+
+	it('should render empty y axis unit selector for a single metric with no unit', () => {
+		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
+			isLoading: false,
+			isError: false,
+			metrics: [
+				{
+					type: MetricType.SUM,
+					description: 'metric1 description',
+					unit: '',
+					temporality: Temporality.CUMULATIVE,
+					isMonotonic: true,
+				},
+			],
+		});
+
+		renderExplorer();
+
+		const yAxisUnitSelector = screen.queryByTestId(Y_AXIS_UNIT_SELECTOR_TEST_ID);
+		expect(yAxisUnitSelector).toBeInTheDocument();
+		expect(yAxisUnitSelector).toHaveTextContent('Please select a unit');
+	});
+
+	it('one chart per query should be off and disabled when there is only one query', () => {
+		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric],
+		});
+
+		renderExplorer();
+
+		const oneChartPerQueryToggle = screen.getByRole('switch');
+		expect(oneChartPerQueryToggle).not.toBeChecked();
+		expect(oneChartPerQueryToggle).toBeDisabled();
+	});
+
+	it('one chart per query should enabled by default when there are multiple metrics with the same unit', () => {
+		const mockQueryData = {
+			...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
+			aggregateAttribute: {
+				...(initialQueriesMap[DataSource.METRICS].builder.queryData[0]
+					.aggregateAttribute as BaseAutocompleteData),
+				key: 'metric1',
+			},
+		};
+		const mockStagedQueryWithMultipleQueries = {
+			...initialQueriesMap[DataSource.METRICS],
+			builder: {
+				...initialQueriesMap[DataSource.METRICS].builder,
+				queryData: [mockQueryData, mockQueryData],
+			},
+		};
+
+		jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue(({
+			...mockUseQueryBuilderData,
+			stagedQuery: mockStagedQueryWithMultipleQueries,
+		} as Partial<QueryBuilderContextType>) as QueryBuilderContextType);
+
+		jest.spyOn(useGetMetricsHooks, 'useGetMetrics').mockReturnValue({
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric, mockMetric],
+		});
+
+		renderExplorer();
+
+		const oneChartPerQueryToggle = screen.getByRole('switch');
+		expect(oneChartPerQueryToggle).toBeEnabled();
+	});
 });

frontend/src/container/MetricsExplorer/Explorer/__tests__/TimeSeries.test.tsx

@@ -0,0 +1,180 @@
+import { render, RenderResult, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { UpdateMetricMetadataResponse } from 'api/metricsExplorer/updateMetricMetadata';
+import * as useUpdateMetricMetadataHooks from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import { UseUpdateMetricMetadataProps } from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import { UseMutationResult } from 'react-query';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
+
+import TimeSeries from '../TimeSeries';
+import { TimeSeriesProps } from '../types';
+
+type MockUpdateMetricMetadata = UseMutationResult<
+	SuccessResponse<UpdateMetricMetadataResponse> | ErrorResponse,
+	Error,
+	UseUpdateMetricMetadataProps
+>;
+const mockUpdateMetricMetadata = jest.fn();
+jest
+	.spyOn(useUpdateMetricMetadataHooks, 'useUpdateMetricMetadata')
+	.mockReturnValue(({
+		mutate: mockUpdateMetricMetadata,
+		isLoading: false,
+	} as Partial<MockUpdateMetricMetadata>) as MockUpdateMetricMetadata);
+
+jest.mock('container/TimeSeriesView/TimeSeriesView', () => ({
+	__esModule: true,
+	default: jest.fn().mockReturnValue(
+		<div role="img" aria-label="warning">
+			TimeSeriesView
+		</div>,
+	),
+}));
+
+jest.mock('react-query', () => ({
+	...jest.requireActual('react-query'),
+	useQueryClient: jest.fn().mockReturnValue({
+		invalidateQueries: jest.fn(),
+	}),
+	useQueries: jest.fn().mockImplementation((queries: any[]) =>
+		queries.map(() => ({
+			data: undefined,
+			isLoading: false,
+			isError: false,
+			error: undefined,
+		})),
+	),
+}));
+
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useSelector: jest.fn().mockReturnValue({
+		globalTime: {
+			selectedTime: '5min',
+			maxTime: 1713738000000,
+			minTime: 1713734400000,
+		},
+	}),
+}));
+
+const mockMetric: MetricMetadata = {
+	type: MetricType.SUM,
+	description: 'metric1 description',
+	unit: 'metric1 unit',
+	temporality: Temporality.CUMULATIVE,
+	isMonotonic: true,
+};
+
+const mockSetWarning = jest.fn();
+const mockSetIsMetricDetailsOpen = jest.fn();
+const mockSetYAxisUnit = jest.fn();
+
+function renderTimeSeries(
+	overrides: Partial<TimeSeriesProps> = {},
+): RenderResult {
+	return render(
+		<TimeSeries
+			showOneChartPerQuery={false}
+			setWarning={mockSetWarning}
+			areAllMetricUnitsSame={false}
+			isMetricUnitsLoading={false}
+			metricUnits={[]}
+			metricNames={[]}
+			metrics={[]}
+			isMetricUnitsError={false}
+			handleOpenMetricDetails={mockSetIsMetricDetailsOpen}
+			yAxisUnit="count"
+			setYAxisUnit={mockSetYAxisUnit}
+			showYAxisUnitSelector={false}
+			// eslint-disable-next-line react/jsx-props-no-spreading
+			{...overrides}
+		/>,
+	);
+}
+
+describe('TimeSeries', () => {
+	it('should render a warning icon when a metric has no unit among multiple metrics', () => {
+		const user = userEvent.setup();
+		const { container } = renderTimeSeries({
+			metricUnits: ['', 'count'],
+			metricNames: ['metric1', 'metric2'],
+			metrics: [undefined, undefined],
+		});
+
+		const alertIcon = container.querySelector('.no-unit-warning') as HTMLElement;
+		user.hover(alertIcon);
+		waitFor(() =>
+			expect(
+				screen.findByText('This metric does not have a unit'),
+			).toBeInTheDocument(),
+		);
+	});
+
+	it('clicking on warning icon tooltip should open metric details modal', async () => {
+		const user = userEvent.setup();
+		const { container } = renderTimeSeries({
+			metricUnits: ['', 'count'],
+			metricNames: ['metric1', 'metric2'],
+			metrics: [mockMetric, mockMetric],
+			yAxisUnit: 'seconds',
+		});
+
+		const alertIcon = container.querySelector('.no-unit-warning') as HTMLElement;
+		user.hover(alertIcon);
+
+		const metricDetailsLink = await screen.findByText('metric details');
+		user.click(metricDetailsLink);
+
+		waitFor(() =>
+			expect(mockSetIsMetricDetailsOpen).toHaveBeenCalledWith('metric1'),
+		);
+	});
+
+	// TODO: Unskip this test once the save unit button is implemented
+	// Tracking at - https://github.com/SigNoz/engineering-pod/issues/3495
+	it.skip('shows Save unit button when metric had no unit but one is selected', () => {
+		const { findByText, getByRole } = renderTimeSeries({
+			metricUnits: [undefined],
+			metricNames: ['metric1'],
+			metrics: [mockMetric],
+			yAxisUnit: 'seconds',
+		});
+
+		expect(
+			findByText('Save the selected unit for this metric?'),
+		).toBeInTheDocument();
+
+		const yesButton = getByRole('button', { name: 'Yes' });
+		expect(yesButton).toBeInTheDocument();
+		expect(yesButton).toBeEnabled();
+	});
+
+	// TODO: Unskip this test once the save unit button is implemented
+	// Tracking at - https://github.com/SigNoz/engineering-pod/issues/3495
+	it.skip('clicking on save unit button shoould upated metric metadata', () => {
+		const user = userEvent.setup();
+		const { getByRole } = renderTimeSeries({
+			metricUnits: [''],
+			metricNames: ['metric1'],
+			metrics: [mockMetric],
+			yAxisUnit: 'seconds',
+		});
+
+		const yesButton = getByRole('button', { name: /Yes/i });
+		user.click(yesButton);
+
+		expect(mockUpdateMetricMetadata).toHaveBeenCalledWith(
+			{
+				metricName: 'metric1',
+				payload: expect.objectContaining({ unit: 'seconds' }),
+			},
+			expect.objectContaining({
+				onSuccess: expect.any(Function),
+				onError: expect.any(Function),
+			}),
+		);
+	});
+});

frontend/src/container/MetricsExplorer/Explorer/__tests__/utils.test.tsx

@@ -0,0 +1,161 @@
+import { renderHook } from '@testing-library/react';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import * as useGetMultipleMetricsHook from 'hooks/metricsExplorer/useGetMultipleMetrics';
+import { UseQueryResult } from 'react-query';
+import { SuccessResponseV2 } from 'types/api';
+import {
+	MetricMetadata,
+	MetricMetadataResponse,
+} from 'types/api/metricsExplorer/v2/getMetricMetadata';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	IBuilderFormula,
+	IBuilderQuery,
+	Query,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import {
+	getMetricUnits,
+	splitQueryIntoOneChartPerQuery,
+	useGetMetrics,
+} from '../utils';
+
+const MOCK_QUERY_DATA_1: IBuilderQuery = {
+	...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
+	aggregateAttribute: {
+		...(initialQueriesMap[DataSource.METRICS].builder.queryData[0]
+			.aggregateAttribute as BaseAutocompleteData),
+		key: 'metric1',
+	},
+};
+
+const MOCK_QUERY_DATA_2: IBuilderQuery = {
+	...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
+	aggregateAttribute: {
+		...(initialQueriesMap[DataSource.METRICS].builder.queryData[0]
+			.aggregateAttribute as BaseAutocompleteData),
+		key: 'metric2',
+	},
+};
+const MOCK_FORMULA_DATA: IBuilderFormula = {
+	expression: '1 + 1',
+	disabled: false,
+	queryName: 'Mock Formula',
+	legend: 'Mock Legend',
+};
+
+const MOCK_QUERY_WITH_MULTIPLE_QUERY_DATA: Query = {
+	...initialQueriesMap[DataSource.METRICS],
+	builder: {
+		...initialQueriesMap[DataSource.METRICS].builder,
+		queryData: [MOCK_QUERY_DATA_1, MOCK_QUERY_DATA_2],
+		queryFormulas: [MOCK_FORMULA_DATA, MOCK_FORMULA_DATA],
+	},
+};
+
+describe('splitQueryIntoOneChartPerQuery', () => {
+	it('should split a query with multiple queryData to multiple distinct queries, each with a single queryData', () => {
+		const result = splitQueryIntoOneChartPerQuery(
+			MOCK_QUERY_WITH_MULTIPLE_QUERY_DATA,
+			['metric1', 'metric2'],
+			[undefined, 'unit2'],
+		);
+		expect(result).toHaveLength(4);
+		// Verify query 1 has the correct data
+		expect(result[0].builder.queryData).toHaveLength(1);
+		expect(result[0].builder.queryData[0]).toEqual(MOCK_QUERY_DATA_1);
+		expect(result[0].builder.queryFormulas).toHaveLength(0);
+		expect(result[0].unit).toBeUndefined();
+		// Verify query 2 has the correct data
+		expect(result[1].builder.queryData).toHaveLength(1);
+		expect(result[1].builder.queryData[0]).toEqual(MOCK_QUERY_DATA_2);
+		expect(result[1].builder.queryFormulas).toHaveLength(0);
+		expect(result[1].unit).toBe('unit2');
+		// Verify query 3 has the correct data
+		expect(result[2].builder.queryFormulas).toHaveLength(1);
+		expect(result[2].builder.queryFormulas[0]).toEqual(MOCK_FORMULA_DATA);
+		expect(result[2].builder.queryData).toHaveLength(2); // 2 disabled queries
+		expect(result[2].builder.queryData[0].disabled).toBe(true);
+		expect(result[2].builder.queryData[1].disabled).toBe(true);
+		expect(result[2].unit).toBeUndefined();
+		// Verify query 4 has the correct data
+		expect(result[3].builder.queryFormulas).toHaveLength(1);
+		expect(result[3].builder.queryFormulas[0]).toEqual(MOCK_FORMULA_DATA);
+		expect(result[3].builder.queryData).toHaveLength(2); // 2 disabled queries
+		expect(result[3].builder.queryData[0].disabled).toBe(true);
+		expect(result[3].builder.queryData[1].disabled).toBe(true);
+		expect(result[3].unit).toBeUndefined();
+	});
+});
+
+const MOCK_METRIC_METADATA: MetricMetadata = {
+	description: 'Metric 1 description',
+	unit: 'unit1',
+	type: MetricType.GAUGE,
+	temporality: Temporality.DELTA,
+	isMonotonic: true,
+};
+
+describe('useGetMetrics', () => {
+	beforeEach(() => {
+		jest
+			.spyOn(useGetMultipleMetricsHook, 'useGetMultipleMetrics')
+			.mockReturnValue([
+				({
+					isLoading: false,
+					isError: false,
+					data: {
+						httpStatusCode: 200,
+						data: {
+							status: 'success',
+							data: MOCK_METRIC_METADATA,
+						},
+					},
+				} as Partial<
+					UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>
+				>) as UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>,
+			]);
+	});
+
+	it('should return the correct metrics data', () => {
+		const { result } = renderHook(() => useGetMetrics(['metric1']));
+		expect(result.current.metrics).toHaveLength(1);
+		expect(result.current.metrics[0]).toBeDefined();
+		expect(result.current.metrics[0]).toEqual(MOCK_METRIC_METADATA);
+		expect(result.current.isLoading).toBe(false);
+		expect(result.current.isError).toBe(false);
+	});
+
+	it('should return array of undefined values of correct length when metrics data is not yet loaded', () => {
+		jest
+			.spyOn(useGetMultipleMetricsHook, 'useGetMultipleMetrics')
+			.mockReturnValue([
+				({
+					isLoading: true,
+					isError: false,
+				} as Partial<
+					UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>
+				>) as UseQueryResult<SuccessResponseV2<MetricMetadataResponse>, Error>,
+			]);
+		const { result } = renderHook(() => useGetMetrics(['metric1']));
+		expect(result.current.metrics).toHaveLength(1);
+		expect(result.current.metrics[0]).toBeUndefined();
+	});
+});
+
+describe('getMetricUnits', () => {
+	it('should return the same unit for units that are not known to the universal unit mapper', () => {
+		const result = getMetricUnits([MOCK_METRIC_METADATA]);
+		expect(result).toHaveLength(1);
+		expect(result[0]).toEqual(MOCK_METRIC_METADATA.unit);
+	});
+
+	it('should return universal unit for units that are known to the universal unit mapper', () => {
+		const result = getMetricUnits([{ ...MOCK_METRIC_METADATA, unit: 'seconds' }]);
+		expect(result).toHaveLength(1);
+		expect(result[0]).toBe('s');
+	});
+});

frontend/src/container/MetricsExplorer/Explorer/types.ts

@@ -3,6 +3,7 @@ import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
 import { SuccessResponse, Warning } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 
 export enum ExplorerTabs {
 	TIME_SERIES = 'time-series',
@@ -12,6 +13,16 @@ export enum ExplorerTabs {
 export interface TimeSeriesProps {
 	showOneChartPerQuery: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
+	areAllMetricUnitsSame: boolean;
+	isMetricUnitsLoading: boolean;
+	isMetricUnitsError: boolean;
+	metricUnits: (string | undefined)[];
+	metricNames: string[];
+	metrics: (MetricMetadata | undefined)[];
+	handleOpenMetricDetails: (metricName: string) => void;
+	yAxisUnit: string | undefined;
+	setYAxisUnit: (unit: string) => void;
+	showYAxisUnitSelector: boolean;
 }
 
 export interface RelatedMetricsProps {

frontend/src/container/MetricsExplorer/Explorer/utils.tsx

@@ -1,20 +1,40 @@
+import { mapMetricUnitToUniversalUnit } from 'components/YAxisUnitSelector/utils';
+import { useGetMultipleMetrics } from 'hooks/metricsExplorer/useGetMultipleMetrics';
+import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
-export const splitQueryIntoOneChartPerQuery = (query: Query): Query[] => {
+/**
+ * Split a query with multiple queryData to multiple distinct queries, each with a single queryData.
+ * @param query - The query to split
+ * @param units - The units of the metrics, can be undefined if the metric has no unit
+ * @returns The split queries
+ */
+export const splitQueryIntoOneChartPerQuery = (
+	query: Query,
+	metricNames: string[],
+	units: (string | undefined)[],
+): Query[] => {
 	const queries: Query[] = [];
 
 	query.builder.queryData.forEach((currentQuery) => {
-		const newQuery = {
-			...query,
-			id: uuid(),
-			builder: {
-				...query.builder,
-				queryData: [currentQuery],
-				queryFormulas: [],
-			},
-		};
-		queries.push(newQuery);
+		if (currentQuery.aggregateAttribute?.key) {
+			const metricIndex = metricNames.indexOf(
+				currentQuery.aggregateAttribute?.key,
+			);
+			const unit = metricIndex >= 0 ? units[metricIndex] : undefined;
+			const newQuery = {
+				...query,
+				id: uuid(),
+				builder: {
+					...query.builder,
+					queryData: [currentQuery],
+					queryFormulas: [],
+				},
+				unit,
+			};
+			queries.push(newQuery);
+		}
 	});
 
 	query.builder.queryFormulas.forEach((currentFormula) => {
@@ -35,3 +55,43 @@ export const splitQueryIntoOneChartPerQuery = (query: Query): Query[] => {
 
 	return queries;
 };
+
+/**
+ * Hook to get data for multiple metrics with a synchronous loading and error state
+ * @param metricNames - The names of the metrics to get
+ * @param isEnabled - Whether the hook is enabled
+ * @returns The loading state, the metrics data, and the error state
+ */
+export function useGetMetrics(
+	metricNames: string[],
+	isEnabled = true,
+): {
+	isLoading: boolean;
+	isError: boolean;
+	metrics: (MetricMetadata | undefined)[];
+} {
+	const metricsData = useGetMultipleMetrics(metricNames, {
+		enabled: metricNames.length > 0 && isEnabled,
+	});
+	return {
+		isLoading: metricsData.some((metric) => metric.isLoading),
+		metrics: metricsData
+			.map((metric) => metric.data?.data)
+			.map((data) => data?.data),
+		isError: metricsData.some((metric) => metric.isError),
+	};
+}
+
+/**
+ * To get the units of the metrics in the universal unit standard.
+ * If the unit is not known to the universal unit mapper, it will return the unit as is.
+ * @param metrics - The metrics to get the units for
+ * @returns The units of the metrics, can be undefined if the metric has no unit
+ */
+export function getMetricUnits(
+	metrics: (MetricMetadata | undefined)[],
+): (string | undefined)[] {
+	return metrics
+		.map((metric) => metric?.unit)
+		.map((unit) => mapMetricUnitToUniversalUnit(unit) || undefined);
+}

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -131,8 +131,8 @@ function MetricDetails({
 						>
 							Open in Explorer
 						</Button>
-						{/* Show the based on the feature flag. Will remove before releasing the feature */}
-						{showInspectFeature && (
+						{/* Show the inspect button if the metric type is GAUGE */}
+						{showInspectFeature && openInspectModal && (
 							<Button
 								className="inspect-metrics-button"
 								aria-label="Inspect Metric"