feat: implement service connection status retrieval for Azure integration

.github/CODEOWNERS

@@ -43,12 +43,6 @@
 /pkg/analytics/ @vikrantgupta25
 /pkg/statsreporter/ @vikrantgupta25
 
-# Emailing Owners
-
-/pkg/emailing/ @vikrantgupta25
-/pkg/types/emailtypes/ @vikrantgupta25
-/templates/email/ @vikrantgupta25
-
 # Querier Owners
 
 /pkg/querier/ @srikanthccv

.gitignore

@@ -1,11 +1,8 @@
 
 node_modules
 
-# editor
 .vscode
 !.vscode/settings.json
-.zed
-.idea
 
 deploy/docker/environment_tiny/common_test
 frontend/node_modules
@@ -34,6 +31,8 @@ frontend/yarn-debug.log*
 frontend/yarn-error.log*
 frontend/src/constants/env.ts
 
+.idea
+
 **/build
 **/storage
 **/locust-scripts/__pycache__/
@@ -230,3 +229,5 @@ cython_debug/
 pyrightconfig.json
 
 
+# cursor files
+frontend/.cursor/

.vscode/settings.json

@@ -14,8 +14,5 @@
 	},
 	"[sql]": {
 		"editor.defaultFormatter": "adpyke.vscode-sql-formatter"
-	},
-	"[html]": {
-		"editor.defaultFormatter": "vscode.html-language-features"
 	}
 }

README.de-de.md

@@ -176,6 +176,25 @@ Wir haben Benchmarks veröffentlicht, die Loki mit SigNoz vergleichen. Schauen S
 Wir ❤️ Beiträge zum Projekt, egal ob große oder kleine. Bitte lies dir zuerst die [CONTRIBUTING.md](CONTRIBUTING.md), durch, bevor du anfängst, Beiträge zu SigNoz zu machen.
 Du bist dir nicht sicher, wie du anfangen sollst? Schreib uns einfach auf dem #contributing Kanal in unserer [slack community](https://signoz.io/slack)
 
+### Unsere Projektbetreuer
+
+#### Backend
+
+- [Ankit Nayan](https://github.com/ankitnayan)
+- [Nityananda Gohain](https://github.com/nityanandagohain)
+- [Srikanth Chekuri](https://github.com/srikanthccv)
+- [Vishal Sharma](https://github.com/makeavish)
+
+#### Frontend
+
+- [Palash Gupta](https://github.com/palashgdev)
+- [Yunus M](https://github.com/YounixM)
+- [Rajat Dabade](https://github.com/Rajat-Dabade)
+
+#### DevOps
+
+- [Prashant Shahi](https://github.com/prashant-shahi)
+
 <br /><br />
 
 ## Dokumentation

README.md

@@ -221,6 +221,34 @@ We ❤️ contributions big or small. Please read [CONTRIBUTING.md](CONTRIBUTING
 
 Not sure how to get started? Just ping us on `#contributing` in our [slack community](https://signoz.io/slack)
 
+### Project maintainers
+
+#### Backend
+
+- [Ankit Nayan](https://github.com/ankitnayan)
+- [Nityananda Gohain](https://github.com/nityanandagohain)
+- [Srikanth Chekuri](https://github.com/srikanthccv)
+- [Vishal Sharma](https://github.com/makeavish)
+- [Shivanshu Raj Shrivastava](https://github.com/shivanshuraj1333)
+- [Ekansh Gupta](https://github.com/eKuG)
+- [Aniket Agarwal](https://github.com/aniketio-ctrl)
+
+#### Frontend
+
+- [Yunus M](https://github.com/YounixM)
+- [Vikrant Gupta](https://github.com/vikrantgupta25)
+- [Sagar Rajput](https://github.com/SagarRajput-7)
+- [Shaheer Kochai](https://github.com/ahmadshaheer)
+- [Amlan Kumar Nandy](https://github.com/amlannandy)
+- [Sahil Khan](https://github.com/sawhil)
+- [Aditya Singh](https://github.com/aks07)
+- [Abhi Kumar](https://github.com/ahrefabhi)
+
+#### DevOps
+
+- [Prashant Shahi](https://github.com/prashant-shahi)
+- [Vibhu Pandey](https://github.com/therealpandey)
+
 <br /><br />
 
 

README.zh-cn.md

@@ -187,6 +187,25 @@ Jaeger 仅仅是一个分布式追踪系统。 但是 SigNoz 可以提供 metric
 
 如果你不知道如何开始？ 只需要在 [slack 社区](https://signoz.io/slack) 通过 `#contributing` 频道联系我们。
 
+### 项目维护人员
+
+#### 后端
+
+- [Ankit Nayan](https://github.com/ankitnayan)
+- [Nityananda Gohain](https://github.com/nityanandagohain)
+- [Srikanth Chekuri](https://github.com/srikanthccv)
+- [Vishal Sharma](https://github.com/makeavish)
+
+#### 前端
+
+- [Palash Gupta](https://github.com/palashgdev)
+- [Yunus M](https://github.com/YounixM)
+- [Rajat Dabade](https://github.com/Rajat-Dabade)
+
+#### 运维开发
+
+- [Prashant Shahi](https://github.com/prashant-shahi)
+
 <br /><br />
 
 ## 文档

conf/example.yaml

@@ -193,15 +193,6 @@ emailing:
   templates:
     # The directory containing the email templates. This directory should contain a list of files defined at pkg/types/emailtypes/template.go.
     directory: /opt/signoz/conf/templates/email
-    format:
-      header:
-        enabled: false
-        logo_url: ""
-      help:
-        enabled: false
-        email: ""
-      footer:
-        enabled: false
   smtp:
     # The SMTP server address.
     address: localhost:25
@@ -294,6 +285,7 @@ flagger:
   config:
     boolean:
       use_span_metrics: true
+      interpolation_enabled: false
       kafka_span_eval: false
     string:
     float:
@@ -308,14 +300,3 @@ user:
       allow_self: true
       # The duration within which a user can reset their password.
       max_token_lifetime: 6h
-  root:
-    # Whether to enable the root user. When enabled, a root user is provisioned
-    # on startup using the email and password below. The root user cannot be
-    # deleted, updated, or have their password changed through the UI.
-    enabled: false
-    # The email address of the root user.
-    email: ""
-    # The password of the root user. Must meet password requirements.
-    password: ""
-    # The name of the organization to create or look up for the root user.
-    org_name: default

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

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

@@ -1,6 +1,7 @@
 package api
 
 import (
+	"log/slog"
 	"net/http"
 	"net/http/httputil"
 	"time"
@@ -10,11 +11,9 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/global"
-	"github.com/SigNoz/signoz/pkg/http/handler"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	querierAPI "github.com/SigNoz/signoz/pkg/querier"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
@@ -31,13 +30,13 @@ type APIHandlerOptions struct {
 	RulesManager                  *rules.Manager
 	UsageManager                  *usage.Manager
 	IntegrationsController        *integrations.Controller
-	CloudIntegrationsController   *cloudintegrations.Controller
 	LogsParsingPipelineController *logparsingpipeline.LogParsingPipelineController
 	Gateway                       *httputil.ReverseProxy
 	GatewayUrl                    string
 	// Querier Influx Interval
 	FluxInterval time.Duration
 	GlobalConfig global.Config
+	Logger       *slog.Logger // this is present in Signoz.Instrumentation but adding for quick access
 }
 
 type APIHandler struct {
@@ -46,12 +45,11 @@ type APIHandler struct {
 }
 
 // NewAPIHandler returns an APIHandler
-func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.Config) (*APIHandler, error) {
+func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler, error) {
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		RuleManager:                   opts.RulesManager,
 		IntegrationsController:        opts.IntegrationsController,
-		CloudIntegrationsController:   opts.CloudIntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		FluxInterval:                  opts.FluxInterval,
 		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
@@ -59,7 +57,8 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
-	}, config)
+		Logger:                        opts.Logger,
+	})
 
 	if err != nil {
 		return nil, err
@@ -107,10 +106,7 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v4/query_range", am.ViewAccess(ah.queryRangeV4)).Methods(http.MethodPost)
 
 	// v5
-	router.Handle("/api/v5/query_range", handler.New(
-		am.ViewAccess(ah.queryRangeV5),
-		querierAPI.QueryRangeV5OpenAPIDef,
-	)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v5/query_range", am.ViewAccess(ah.queryRangeV5)).Methods(http.MethodPost)
 
 	router.HandleFunc("/api/v5/substitute_vars", am.ViewAccess(ah.QuerierAPI.ReplaceVariables)).Methods(http.MethodPost)
 
@@ -122,14 +118,12 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 }
 
 func (ah *APIHandler) RegisterCloudIntegrationsRoutes(router *mux.Router, am *middleware.AuthZ) {
-
 	ah.APIHandler.RegisterCloudIntegrationsRoutes(router, am)
 
 	router.HandleFunc(
 		"/api/v1/cloud-integrations/{cloudProvider}/accounts/generate-connection-params",
 		am.EditAccess(ah.CloudIntegrationsGenerateConnectionParams),
 	).Methods(http.MethodGet)
-
 }
 
 func (ah *APIHandler) getVersion(w http.ResponseWriter, r *http.Request) {

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

@@ -6,6 +6,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
+	"log/slog"
 	"net/http"
 	"strings"
 	"time"
@@ -13,20 +14,14 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/SigNoz/signoz/pkg/modules/user"
-	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/integrationstypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/gorilla/mux"
-	"go.uber.org/zap"
 )
 
-type CloudIntegrationConnectionParamsResponse struct {
-	IngestionUrl string `json:"ingestion_url,omitempty"`
-	IngestionKey string `json:"ingestion_key,omitempty"`
-	SigNozAPIUrl string `json:"signoz_api_url,omitempty"`
-	SigNozAPIKey string `json:"signoz_api_key,omitempty"`
-}
+// TODO: move this file with other cloud integration related code
 
 func (ah *APIHandler) CloudIntegrationsGenerateConnectionParams(w http.ResponseWriter, r *http.Request) {
 	claims, err := authtypes.ClaimsFromContext(r.Context())
@@ -41,23 +36,21 @@ func (ah *APIHandler) CloudIntegrationsGenerateConnectionParams(w http.ResponseW
 		return
 	}
 
-	cloudProvider := mux.Vars(r)["cloudProvider"]
-	if cloudProvider != "aws" {
-		RespondError(w, basemodel.BadRequest(fmt.Errorf(
-			"cloud provider not supported: %s", cloudProvider,
-		)), nil)
+	cloudProviderString := mux.Vars(r)["cloudProvider"]
+
+	cloudProvider, err := integrationstypes.NewCloudProvider(cloudProviderString)
+	if err != nil {
+		render.Error(w, err)
 		return
 	}
 
-	apiKey, apiErr := ah.getOrCreateCloudIntegrationPAT(r.Context(), claims.OrgID, cloudProvider)
-	if apiErr != nil {
-		RespondError(w, basemodel.WrapApiError(
-			apiErr, "couldn't provision PAT for cloud integration:",
-		), nil)
+	apiKey, err := ah.getOrCreateCloudIntegrationPAT(r.Context(), claims.OrgID, cloudProvider)
+	if err != nil {
+		render.Error(w, err)
 		return
 	}
 
-	result := CloudIntegrationConnectionParamsResponse{
+	result := integrationstypes.GettableCloudIntegrationConnectionParams{
 		SigNozAPIKey: apiKey,
 	}
 
@@ -71,16 +64,17 @@ func (ah *APIHandler) CloudIntegrationsGenerateConnectionParams(w http.ResponseW
 		// Return the API Key (PAT) even if the rest of the params can not be deduced.
 		// Params not returned from here will be requested from the user via form inputs.
 		// This enables gracefully degraded but working experience even for non-cloud deployments.
-		zap.L().Info("ingestion params and signoz api url can not be deduced since no license was found")
-		ah.Respond(w, result)
+		ah.opts.Logger.InfoContext(
+			r.Context(),
+			"ingestion params and signoz api url can not be deduced since no license was found",
+		)
+		render.Success(w, http.StatusOK, result)
 		return
 	}
 
-	signozApiUrl, apiErr := ah.getIngestionUrlAndSigNozAPIUrl(r.Context(), license.Key)
-	if apiErr != nil {
-		RespondError(w, basemodel.WrapApiError(
-			apiErr, "couldn't deduce ingestion url and signoz api url",
-		), nil)
+	signozApiUrl, err := ah.getIngestionUrlAndSigNozAPIUrl(r.Context(), license.Key)
+	if err != nil {
+		render.Error(w, err)
 		return
 	}
 
@@ -89,48 +83,41 @@ func (ah *APIHandler) CloudIntegrationsGenerateConnectionParams(w http.ResponseW
 
 	gatewayUrl := ah.opts.GatewayUrl
 	if len(gatewayUrl) > 0 {
-
-		ingestionKey, apiErr := getOrCreateCloudProviderIngestionKey(
+		ingestionKeyString, err := ah.getOrCreateCloudProviderIngestionKey(
 			r.Context(), gatewayUrl, license.Key, cloudProvider,
 		)
-		if apiErr != nil {
-			RespondError(w, basemodel.WrapApiError(
-				apiErr, "couldn't get or create ingestion key",
-			), nil)
+		if err != nil {
+			render.Error(w, err)
 			return
 		}
 
-		result.IngestionKey = ingestionKey
-
+		result.IngestionKey = ingestionKeyString
 	} else {
-		zap.L().Info("ingestion key can't be deduced since no gateway url has been configured")
+		ah.opts.Logger.InfoContext(
+			r.Context(),
+			"ingestion key can't be deduced since no gateway url has been configured",
+		)
 	}
 
-	ah.Respond(w, result)
+	render.Success(w, http.StatusOK, result)
 }
 
-func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId string, cloudProvider string) (
-	string, *basemodel.ApiError,
-) {
+func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId string, cloudProvider valuer.String) (string, error) {
 	integrationPATName := fmt.Sprintf("%s integration", cloudProvider)
 
-	integrationUser, apiErr := ah.getOrCreateCloudIntegrationUser(ctx, orgId, cloudProvider)
-	if apiErr != nil {
-		return "", apiErr
+	integrationUser, err := ah.getOrCreateCloudIntegrationUser(ctx, orgId, cloudProvider)
+	if err != nil {
+		return "", err
 	}
 
 	orgIdUUID, err := valuer.NewUUID(orgId)
 	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't parse orgId: %w", err,
-		))
+		return "", err
 	}
 
 	allPats, err := ah.Signoz.Modules.User.ListAPIKeys(ctx, orgIdUUID)
 	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't list PATs: %w", err,
-		))
+		return "", err
 	}
 	for _, p := range allPats {
 		if p.UserID == integrationUser.ID && p.Name == integrationPATName {
@@ -138,9 +125,10 @@ func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId
 		}
 	}
 
-	zap.L().Info(
+	ah.opts.Logger.InfoContext(
+		ctx,
 		"no PAT found for cloud integration, creating a new one",
-		zap.String("cloudProvider", cloudProvider),
+		slog.String("cloudProvider", cloudProvider.String()),
 	)
 
 	newPAT, err := types.NewStorableAPIKey(
@@ -150,68 +138,48 @@ func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId
 		0,
 	)
 	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't create cloud integration PAT: %w", err,
-		))
+		return "", err
 	}
 
 	err = ah.Signoz.Modules.User.CreateAPIKey(ctx, newPAT)
 	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't create cloud integration PAT: %w", err,
-		))
+		return "", err
 	}
 	return newPAT.Token, nil
 }
 
-func (ah *APIHandler) getOrCreateCloudIntegrationUser(
-	ctx context.Context, orgId string, cloudProvider string,
-) (*types.User, *basemodel.ApiError) {
-	cloudIntegrationUserName := fmt.Sprintf("%s-integration", cloudProvider)
+// TODO: move this function out of handler and use proper module structure
+func (ah *APIHandler) getOrCreateCloudIntegrationUser(ctx context.Context, orgId string, cloudProvider valuer.String) (*types.User, error) {
+	cloudIntegrationUserName := fmt.Sprintf("%s-integration", cloudProvider.String())
 	email := valuer.MustNewEmail(fmt.Sprintf("%s@signoz.io", cloudIntegrationUserName))
 
 	cloudIntegrationUser, err := types.NewUser(cloudIntegrationUserName, email, types.RoleViewer, valuer.MustNewUUID(orgId))
 	if err != nil {
-		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration user: %w", err))
+		return nil, err
 	}
 
 	password := types.MustGenerateFactorPassword(cloudIntegrationUser.ID.StringValue())
 
 	cloudIntegrationUser, err = ah.Signoz.Modules.User.GetOrCreateUser(ctx, cloudIntegrationUser, user.WithFactorPassword(password))
 	if err != nil {
-		return nil, basemodel.InternalError(fmt.Errorf("couldn't look for integration user: %w", err))
+		return nil, err
 	}
 
 	return cloudIntegrationUser, nil
 }
 
-func (ah *APIHandler) getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licenseKey string) (
-	string, *basemodel.ApiError,
-) {
-	// TODO: remove this struct from here
-	type deploymentResponse struct {
-		Name        string `json:"name"`
-		ClusterInfo struct {
-			Region struct {
-				DNS string `json:"dns"`
-			} `json:"region"`
-		} `json:"cluster"`
-	}
-
+// TODO: move this function out of handler and use proper module structure
+func (ah *APIHandler) getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licenseKey string) (string, error) {
 	respBytes, err := ah.Signoz.Zeus.GetDeployment(ctx, licenseKey)
 	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't query for deployment info: error: %w", err,
-		))
+		return "", errors.WrapInternalf(err, errors.CodeInternal, "couldn't query for deployment info: error")
 	}
 
-	resp := new(deploymentResponse)
+	resp := new(integrationstypes.GettableDeployment)
 
 	err = json.Unmarshal(respBytes, resp)
 	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't unmarshal deployment info response: error: %w", err,
-		))
+		return "", errors.WrapInternalf(err, errors.CodeInternal, "couldn't unmarshal deployment info response")
 	}
 
 	regionDns := resp.ClusterInfo.Region.DNS
@@ -219,9 +187,11 @@ func (ah *APIHandler) getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licens
 
 	if len(regionDns) < 1 || len(deploymentName) < 1 {
 		// Fail early if actual response structure and expectation here ever diverge
-		return "", basemodel.InternalError(fmt.Errorf(
+		return "", errors.WrapInternalf(
+			err,
+			errors.CodeInternal,
 			"deployment info response not in expected shape. couldn't determine region dns and deployment name",
-		))
+		)
 	}
 
 	signozApiUrl := fmt.Sprintf("https://%s.%s", deploymentName, regionDns)
@@ -229,102 +199,85 @@ func (ah *APIHandler) getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licens
 	return signozApiUrl, nil
 }
 
-type ingestionKey struct {
-	Name  string `json:"name"`
-	Value string `json:"value"`
-	// other attributes from gateway response not included here since they are not being used.
-}
-
-type ingestionKeysSearchResponse struct {
-	Status string         `json:"status"`
-	Data   []ingestionKey `json:"data"`
-	Error  string         `json:"error"`
-}
-
-type createIngestionKeyResponse struct {
-	Status string       `json:"status"`
-	Data   ingestionKey `json:"data"`
-	Error  string       `json:"error"`
-}
-
-func getOrCreateCloudProviderIngestionKey(
-	ctx context.Context, gatewayUrl string, licenseKey string, cloudProvider string,
-) (string, *basemodel.ApiError) {
+func (ah *APIHandler) getOrCreateCloudProviderIngestionKey(
+	ctx context.Context, gatewayUrl string, licenseKey string, cloudProvider valuer.String,
+) (string, error) {
 	cloudProviderKeyName := fmt.Sprintf("%s-integration", cloudProvider)
 
 	// see if the key already exists
-	searchResult, apiErr := requestGateway[ingestionKeysSearchResponse](
+	searchResult, err := requestGateway[integrationstypes.GettableIngestionKeysSearch](
 		ctx,
 		gatewayUrl,
 		licenseKey,
 		fmt.Sprintf("/v1/workspaces/me/keys/search?name=%s", cloudProviderKeyName),
 		nil,
+		ah.opts.Logger,
 	)
-
-	if apiErr != nil {
-		return "", basemodel.WrapApiError(
-			apiErr, "couldn't search for cloudprovider ingestion key",
-		)
+	if err != nil {
+		return "", err
 	}
 
 	if searchResult.Status != "success" {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't search for cloudprovider ingestion key: status: %s, error: %s",
+		return "", errors.NewInternalf(
+			errors.CodeInternal,
+			"couldn't search for cloud provider ingestion key: status: %s, error: %s",
 			searchResult.Status, searchResult.Error,
-		))
-	}
-
-	for _, k := range searchResult.Data {
-		if k.Name == cloudProviderKeyName {
-			if len(k.Value) < 1 {
-				// Fail early if actual response structure and expectation here ever diverge
-				return "", basemodel.InternalError(fmt.Errorf(
-					"ingestion keys search response not as expected",
-				))
-			}
-
-			return k.Value, nil
-		}
-	}
-
-	zap.L().Info(
-		"no existing ingestion key found for cloud integration, creating a new one",
-		zap.String("cloudProvider", cloudProvider),
-	)
-	createKeyResult, apiErr := requestGateway[createIngestionKeyResponse](
-		ctx, gatewayUrl, licenseKey, "/v1/workspaces/me/keys",
-		map[string]any{
-			"name": cloudProviderKeyName,
-			"tags": []string{"integration", cloudProvider},
-		},
-	)
-	if apiErr != nil {
-		return "", basemodel.WrapApiError(
-			apiErr, "couldn't create cloudprovider ingestion key",
 		)
 	}
 
+	for _, k := range searchResult.Data {
+		if k.Name != cloudProviderKeyName {
+			continue
+		}
+
+		if len(k.Value) < 1 {
+			// Fail early if actual response structure and expectation here ever diverge
+			return "", errors.NewInternalf(errors.CodeInternal, "ingestion keys search response not as expected")
+		}
+
+		return k.Value, nil
+	}
+
+	ah.opts.Logger.InfoContext(
+		ctx,
+		"no existing ingestion key found for cloud integration, creating a new one",
+		slog.String("cloudProvider", cloudProvider.String()),
+	)
+
+	createKeyResult, err := requestGateway[integrationstypes.GettableCreateIngestionKey](
+		ctx, gatewayUrl, licenseKey, "/v1/workspaces/me/keys",
+		map[string]any{
+			"name": cloudProviderKeyName,
+			"tags": []string{"integration", cloudProvider.String()},
+		},
+		ah.opts.Logger,
+	)
+	if err != nil {
+		return "", err
+	}
+
 	if createKeyResult.Status != "success" {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't create cloudprovider ingestion key: status: %s, error: %s",
+		return "", errors.NewInternalf(
+			errors.CodeInternal,
+			"couldn't create cloud provider ingestion key: status: %s, error: %s",
 			createKeyResult.Status, createKeyResult.Error,
-		))
+		)
 	}
 
-	ingestionKey := createKeyResult.Data.Value
-	if len(ingestionKey) < 1 {
+	ingestionKeyString := createKeyResult.Data.Value
+	if len(ingestionKeyString) < 1 {
 		// Fail early if actual response structure and expectation here ever diverge
-		return "", basemodel.InternalError(fmt.Errorf(
+		return "", errors.NewInternalf(errors.CodeInternal,
 			"ingestion key creation response not as expected",
-		))
+		)
 	}
 
-	return ingestionKey, nil
+	return ingestionKeyString, nil
 }
 
 func requestGateway[ResponseType any](
-	ctx context.Context, gatewayUrl string, licenseKey string, path string, payload any,
-) (*ResponseType, *basemodel.ApiError) {
+	ctx context.Context, gatewayUrl, licenseKey, path string, payload any, logger *slog.Logger,
+) (*ResponseType, error) {
 
 	baseUrl := strings.TrimSuffix(gatewayUrl, "/")
 	reqUrl := fmt.Sprintf("%s%s", baseUrl, path)
@@ -335,13 +288,12 @@ func requestGateway[ResponseType any](
 		"X-Consumer-Groups":      "ns:default",
 	}
 
-	return requestAndParseResponse[ResponseType](ctx, reqUrl, headers, payload)
+	return requestAndParseResponse[ResponseType](ctx, reqUrl, headers, payload, logger)
 }
 
 func requestAndParseResponse[ResponseType any](
-	ctx context.Context, url string, headers map[string]string, payload any,
-) (*ResponseType, *basemodel.ApiError) {
-
+	ctx context.Context, url string, headers map[string]string, payload any, logger *slog.Logger,
+) (*ResponseType, error) {
 	reqMethod := http.MethodGet
 	var reqBody io.Reader
 	if payload != nil {
@@ -349,18 +301,14 @@ func requestAndParseResponse[ResponseType any](
 
 		bodyJson, err := json.Marshal(payload)
 		if err != nil {
-			return nil, basemodel.InternalError(fmt.Errorf(
-				"couldn't serialize request payload to JSON: %w", err,
-			))
+			return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't marshal payload")
 		}
-		reqBody = bytes.NewBuffer([]byte(bodyJson))
+		reqBody = bytes.NewBuffer(bodyJson)
 	}
 
 	req, err := http.NewRequestWithContext(ctx, reqMethod, url, reqBody)
 	if err != nil {
-		return nil, basemodel.InternalError(fmt.Errorf(
-			"couldn't prepare request: %w", err,
-		))
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't create req")
 	}
 
 	for k, v := range headers {
@@ -373,23 +321,26 @@ func requestAndParseResponse[ResponseType any](
 
 	response, err := client.Do(req)
 	if err != nil {
-		return nil, basemodel.InternalError(fmt.Errorf("couldn't make request: %w", err))
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't make req")
 	}
 
-	defer response.Body.Close()
+	defer func() {
+		err = response.Body.Close()
+		if err != nil {
+			logger.ErrorContext(ctx, "couldn't close response body", "error", err)
+		}
+	}()
 
 	respBody, err := io.ReadAll(response.Body)
 	if err != nil {
-		return nil, basemodel.InternalError(fmt.Errorf("couldn't read response: %w", err))
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't read response body")
 	}
 
 	var resp ResponseType
 
 	err = json.Unmarshal(respBody, &resp)
 	if err != nil {
-		return nil, basemodel.InternalError(fmt.Errorf(
-			"couldn't unmarshal gateway response into %T", resp,
-		))
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't unmarshal response body")
 	}
 
 	return &resp, nil

ee/query-service/app/server.go

@@ -38,7 +38,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/app/opamp"
@@ -127,13 +126,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		)
 	}
 
-	cloudIntegrationsController, err := cloudintegrations.NewController(signoz.SQLStore)
-	if err != nil {
-		return nil, fmt.Errorf(
-			"couldn't create cloud provider integrations controller: %w", err,
-		)
-	}
-
 	// ingestion pipelines manager
 	logParsingPipelineController, err := logparsingpipeline.NewLogParsingPipelinesController(
 		signoz.SQLStore,
@@ -167,15 +159,15 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		RulesManager:                  rm,
 		UsageManager:                  usageManager,
 		IntegrationsController:        integrationsController,
-		CloudIntegrationsController:   cloudIntegrationsController,
 		LogsParsingPipelineController: logParsingPipelineController,
 		FluxInterval:                  config.Querier.FluxInterval,
 		Gateway:                       gatewayProxy,
 		GatewayUrl:                    config.Gateway.URL.String(),
 		GlobalConfig:                  config.Global,
+		Logger:                        signoz.Instrumentation.Logger(),
 	}
 
-	apiHandler, err := api.NewAPIHandler(apiOpts, signoz, config)
+	apiHandler, err := api.NewAPIHandler(apiOpts, signoz)
 	if err != nil {
 		return nil, err
 	}

frontend/.cursor/rules/testing-conventions.mdc

@@ -1,74 +0,0 @@
----
-description: Core testing conventions - imports, rendering, MSW, interactions, queries
-globs: **/*.test.{ts,tsx}
-alwaysApply: false
----
-
-# Testing Conventions
-
-## Imports
-
-Always import from the test harness, never directly from `@testing-library/react`:
-
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { server, rest } from 'mocks-server/server';
-```
-
-## Router
-
-Use the built-in router in `render`:
-
-```ts
-render(<Page />, undefined, { initialRoute: '/traces-explorer' });
-```
-
-Only mock `useLocation` / `useParams` if the test depends on their values.
-
-## MSW
-
-Global MSW server runs automatically. Override per-test:
-
-```ts
-server.use(
-  rest.get('*/api/v1/foo', (_req, res, ctx) =>
-    res(ctx.status(200), ctx.json({ ok: true })))
-);
-```
-
-Keep large response fixtures in `mocks-server/__mockdata_`.
-
-## Interactions
-
-- Prefer `userEvent` for real user interactions (click, type, select, tab).
-- Use `fireEvent` only for low-level events not covered by `userEvent` (e.g., scroll, resize). Wrap in `act(...)` if needed.
-- Always `await` interactions:
-
-```ts
-const user = userEvent.setup({ pointerEventsCheck: 0 });
-await user.click(screen.getByRole('button', { name: /save/i }));
-```
-
-## Timers
-
-No global fake timers. Per-test only, for debounce/throttle:
-
-```ts
-jest.useFakeTimers();
-const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
-await user.type(screen.getByRole('textbox'), 'query');
-jest.advanceTimersByTime(400);
-jest.useRealTimers();
-```
-
-## Queries
-
-Prefer accessible queries: `getByRole` > `findByRole` > `getByLabelText` > visible text > `data-testid` (last resort).
-
-## Anti-patterns
-
-- Never import from `@testing-library/react` directly
-- Never use global fake timers
-- Never wrap `render` in `act(...)`
-- Never mock infra dependencies locally (router, react-query)
-- Limit to 3-5 focused tests per file

frontend/.cursor/rules/testing-mock-strategy.mdc

@@ -1,54 +0,0 @@
----
-description: When to use global vs local mocks in tests
-globs: **/*.test.{ts,tsx}
-alwaysApply: false
----
-
-# Mock Strategy
-
-## Use Global Mocks For
-
-High-frequency dependencies (20+ test files):
-- Core infrastructure: react-router-dom, react-query, antd
-- Browser APIs: ResizeObserver, matchMedia, localStorage
-- Utility libraries: date-fns, lodash
-
-Available global mock files (from jest.config.ts):
-- `uplot` -> `__mocks__/uplotMock.ts`
-
-## Use Local Mocks For
-
-- Business logic dependencies (API endpoints, custom hooks, domain components)
-- Test-specific behavior (different data per test, error scenarios, loading states)
-
-## Decision Tree
-
-```
-Used in 20+ test files?
-  YES -> Global mock
-  NO  -> Business logic or test-specific?
-    YES -> Local mock
-    NO  -> Consider global if usage grows
-```
-
-## Correct Usage
-
-```ts
-// Global mocks are already available - just import
-import { useLocation } from 'react-router-dom';
-
-// Local mocks for business logic
-jest.mock('../api/tracesService', () => ({
-  getTraces: jest.fn(() => mockTracesData),
-}));
-```
-
-## Anti-patterns
-
-```ts
-// Never re-mock globally mocked dependencies locally
-jest.mock('react-router-dom', () => ({ ... }));
-
-// Never put test-specific data in global mocks
-jest.mock('../api/tracesService', () => ({ getTraces: jest.fn(() => specificTestData) }));
-```

frontend/.cursor/rules/testing-type-safety.mdc

@@ -1,54 +0,0 @@
----
-description: TypeScript type safety requirements for Jest tests
-globs: **/*.test.{ts,tsx}
-alwaysApply: false
----
-
-# TypeScript Type Safety in Tests
-
-All Jest tests must be fully type-safe. Never use `any`.
-
-## Mock Function Typing
-
-```ts
-// Use jest.mocked for module mocks
-import useFoo from 'hooks/useFoo';
-jest.mock('hooks/useFoo');
-const mockUseFoo = jest.mocked(useFoo);
-
-// Use jest.MockedFunction for standalone mocks
-const mockFetch = jest.fn() as jest.MockedFunction<(id: number) => Promise<User>>;
-```
-
-## Mock Data
-
-Define interfaces for all mock data:
-
-```ts
-const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
-
-const mockProps: ComponentProps = {
-  title: 'Test',
-  data: [mockUser],
-  onSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
-};
-```
-
-## Hook Mocking Pattern
-
-```ts
-import useFoo from 'hooks/useFoo';
-jest.mock('hooks/useFoo');
-const mockUseFoo = jest.mocked(useFoo);
-mockUseFoo.mockReturnValue(/* minimal shape */);
-```
-
-Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
-
-## Checklist
-
-- All mock functions use `jest.MockedFunction<T>` or `jest.mocked()`
-- All mock data has proper interfaces
-- No `any` types in test files
-- Component props are typed
-- API response types are defined

frontend/.cursorrules

@@ -0,0 +1,484 @@
+# Persona
+You are an expert developer with deep knowledge of Jest, React Testing Library, MSW, and TypeScript, tasked with creating unit tests for this repository.
+
+# Auto-detect TypeScript Usage
+Check for TypeScript in the project through tsconfig.json or package.json dependencies.
+Adjust syntax based on this detection.
+
+# TypeScript Type Safety for Jest Tests
+**CRITICAL**: All Jest tests MUST be fully type-safe with proper TypeScript types.
+
+**Type Safety Requirements:**
+- Use proper TypeScript interfaces for all mock data
+- Type all Jest mock functions with `jest.MockedFunction<T>`
+- Use generic types for React components and hooks
+- Define proper return types for mock functions
+- Use `as const` for literal types when needed
+- Avoid `any` type – use proper typing instead
+
+# Unit Testing Focus
+Focus on critical functionality (business logic, utility functions, component behavior)
+Mock dependencies (API calls, external modules) before imports
+Test multiple data scenarios (valid inputs, invalid inputs, edge cases)
+Write maintainable tests with descriptive names grouped in describe blocks
+
+# Global vs Local Mocks
+**Use Global Mocks for:**
+- High-frequency dependencies (20+ test files)
+- Core infrastructure (react-router-dom, react-query, antd)
+- Standard implementations across the app
+- Browser APIs (ResizeObserver, matchMedia, localStorage)
+- Utility libraries (date-fns, lodash)
+
+**Use Local Mocks for:**
+- Business logic dependencies (5-15 test files)
+- Test-specific behavior (different data per test)
+- API endpoints with specific responses
+- Domain-specific components
+- Error scenarios and edge cases
+
+**Global Mock Files Available (from jest.config.ts):**
+- `uplot` → `__mocks__/uplotMock.ts`
+
+# Repo-specific Testing Conventions
+
+## Imports
+Always import from our harness:
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+```
+For API mocks:
+```ts
+import { server, rest } from 'mocks-server/server';
+```
+Do not import directly from `@testing-library/react`.
+
+## Router
+Use the router built into render:
+```ts
+render(<Page />, undefined, { initialRoute: '/traces-explorer' });
+```
+Only mock `useLocation` / `useParams` if the test depends on them.
+
+## Hook Mocks
+Pattern:
+```ts
+import useFoo from 'hooks/useFoo';
+jest.mock('hooks/useFoo');
+const mockUseFoo = jest.mocked(useFoo);
+mockUseFoo.mockReturnValue(/* minimal shape */ as any);
+```
+Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
+
+## MSW
+Global MSW server runs automatically.
+Override per-test:
+```ts
+server.use(
+  rest.get('*/api/v1/foo', (_req, res, ctx) => res(ctx.status(200), ctx.json({ ok: true })))
+);
+```
+Keep large responses in `mocks-server/__mockdata_`.
+
+## Interactions
+- Prefer `userEvent` for real user interactions (click, type, select, tab).
+- Use `fireEvent` only for low-level/programmatic events not covered by `userEvent` (e.g., scroll, resize, setting `element.scrollTop` for virtualization). Wrap in `act(...)` if needed.
+- Always await interactions:
+```ts
+const user = userEvent.setup({ pointerEventsCheck: 0 });
+await user.click(screen.getByRole('button', { name: /save/i }));
+```
+
+```ts
+// Example: virtualized list scroll (no userEvent helper)
+const scroller = container.querySelector('[data-test-id="virtuoso-scroller"]') as HTMLElement;
+scroller.scrollTop = targetScrollTop;
+act(() => { fireEvent.scroll(scroller); });
+```
+
+## Timers
+❌ No global fake timers.
+✅ Per-test only, for debounce/throttle:
+```ts
+jest.useFakeTimers();
+const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
+await user.type(screen.getByRole('textbox'), 'query');
+jest.advanceTimersByTime(400);
+jest.useRealTimers();
+```
+
+## Queries
+Prefer accessible queries (`getByRole`, `findByRole`, `getByLabelText`).
+Fallback: visible text.
+Last resort: `data-testid`.
+
+# Example Test (using only configured global mocks)
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { server, rest } from 'mocks-server/server';
+import MyComponent from '../MyComponent';
+
+describe('MyComponent', () => {
+  it('renders and interacts', async () => {
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+    server.use(
+      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
+    );
+
+    render(<MyComponent />, undefined, { initialRoute: '/foo' });
+
+    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /refresh/i }));
+    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
+  });
+});
+```
+
+# Anti-patterns
+❌ Importing RTL directly
+❌ Using global fake timers
+❌ Wrapping render in `act(...)`
+❌ Mocking infra dependencies locally (router, react-query)
+✅ Use our harness (`tests/test-utils`)
+✅ Use MSW for API overrides
+✅ Use userEvent + await
+✅ Pin time only in tests that assert relative dates
+
+# Best Practices
+- **Critical Functionality**: Prioritize testing business logic and utilities
+- **Dependency Mocking**: Global mocks for infra, local mocks for business logic
+- **Data Scenarios**: Always test valid, invalid, and edge cases
+- **Descriptive Names**: Make test intent clear
+- **Organization**: Group related tests in describe
+- **Consistency**: Match repo conventions
+- **Edge Cases**: Test null, undefined, unexpected values
+- **Limit Scope**: 3–5 focused tests per file
+- **Use Helpers**: `rqSuccess`, `makeUser`, etc.
+- **No Any**: Enforce type safety
+
+# Example Test
+```ts
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { server, rest } from 'mocks-server/server';
+import MyComponent from '../MyComponent';
+
+describe('MyComponent', () => {
+  it('renders and interacts', async () => {
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+    server.use(
+      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
+    );
+
+    render(<MyComponent />, undefined, { initialRoute: '/foo' });
+
+    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /refresh/i }));
+    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
+  });
+});
+```
+
+# Anti-patterns
+❌ Importing RTL directly
+❌ Using global fake timers
+❌ Wrapping render in `act(...)`
+❌ Mocking infra dependencies locally (router, react-query)
+✅ Use our harness (`tests/test-utils`)
+✅ Use MSW for API overrides
+✅ Use userEvent + await
+✅ Pin time only in tests that assert relative dates
+
+# TypeScript Type Safety Examples
+
+## Proper Mock Typing
+```ts
+// ✅ GOOD - Properly typed mocks
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+interface ApiResponse<T> {
+  data: T;
+  status: number;
+  message: string;
+}
+
+// Type the mock functions
+const mockFetchUser = jest.fn() as jest.MockedFunction<(id: number) => Promise<ApiResponse<User>>>;
+const mockUpdateUser = jest.fn() as jest.MockedFunction<(user: User) => Promise<ApiResponse<User>>>;
+
+// Mock implementation with proper typing
+mockFetchUser.mockResolvedValue({
+  data: { id: 1, name: 'John Doe', email: 'john@example.com' },
+  status: 200,
+  message: 'Success'
+});
+
+// ❌ BAD - Using any type
+const mockFetchUser = jest.fn() as any; // Don't do this
+```
+
+## React Component Testing with Types
+```ts
+// ✅ GOOD - Properly typed component testing
+interface ComponentProps {
+  title: string;
+  data: User[];
+  onUserSelect: (user: User) => void;
+  isLoading?: boolean;
+}
+
+const TestComponent: React.FC<ComponentProps> = ({ title, data, onUserSelect, isLoading = false }) => {
+  // Component implementation
+};
+
+describe('TestComponent', () => {
+  it('should render with proper props', () => {
+    // Arrange - Type the props properly
+    const mockProps: ComponentProps = {
+      title: 'Test Title',
+      data: [{ id: 1, name: 'John', email: 'john@example.com' }],
+      onUserSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
+      isLoading: false
+    };
+    
+    // Act
+    render(<TestComponent {...mockProps} />);
+    
+    // Assert
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+  });
+});
+```
+
+## Hook Testing with Types
+```ts
+// ✅ GOOD - Properly typed hook testing
+interface UseUserDataReturn {
+  user: User | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+const useUserData = (id: number): UseUserDataReturn => {
+  // Hook implementation
+};
+
+describe('useUserData', () => {
+  it('should return user data with proper typing', () => {
+    // Arrange
+    const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
+    mockFetchUser.mockResolvedValue({
+      data: mockUser,
+      status: 200,
+      message: 'Success'
+    });
+    
+    // Act
+    const { result } = renderHook(() => useUserData(1));
+    
+    // Assert
+    expect(result.current.user).toEqual(mockUser);
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+});
+```
+
+## Global Mock Type Safety
+```ts
+// ✅ GOOD - Type-safe global mocks
+// In __mocks__/routerMock.ts
+export const mockUseLocation = (overrides: Partial<Location> = {}): Location => ({
+  pathname: '/traces',
+  search: '',
+  hash: '',
+  state: null,
+  key: 'test-key',
+  ...overrides,
+});
+
+// In test files
+const location = useLocation(); // Properly typed from global mock
+expect(location.pathname).toBe('/traces');
+```
+
+# TypeScript Configuration for Jest
+
+## Required Jest Configuration
+```json
+// jest.config.ts
+{
+  "preset": "ts-jest/presets/js-with-ts-esm",
+  "globals": {
+    "ts-jest": {
+      "useESM": true,
+      "isolatedModules": true,
+      "tsconfig": "<rootDir>/tsconfig.jest.json"
+    }
+  },
+  "extensionsToTreatAsEsm": [".ts", ".tsx"],
+  "moduleFileExtensions": ["ts", "tsx", "js", "json"]
+}
+```
+
+## TypeScript Jest Configuration
+```json
+// tsconfig.jest.json
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["jest", "@testing-library/jest-dom"],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node"
+  },
+  "include": [
+    "src/**/*",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "__mocks__/**/*"
+  ]
+}
+```
+
+## Common Type Safety Patterns
+
+### Mock Function Typing
+```ts
+// ✅ GOOD - Proper mock function typing
+const mockApiCall = jest.fn() as jest.MockedFunction<typeof apiCall>;
+const mockEventHandler = jest.fn() as jest.MockedFunction<(event: Event) => void>;
+
+// ❌ BAD - Using any
+const mockApiCall = jest.fn() as any;
+```
+
+### Generic Mock Typing
+```ts
+// ✅ GOOD - Generic mock typing
+interface MockApiResponse<T> {
+  data: T;
+  status: number;
+}
+
+const mockFetchData = jest.fn() as jest.MockedFunction<
+  <T>(endpoint: string) => Promise<MockApiResponse<T>>
+>;
+
+// Usage
+mockFetchData<User>('/users').mockResolvedValue({
+  data: { id: 1, name: 'John' },
+  status: 200
+});
+```
+
+### React Testing Library with Types
+```ts
+// ✅ GOOD - Typed testing utilities
+import { render, screen, RenderResult } from '@testing-library/react';
+import { ComponentProps } from 'react';
+
+type TestComponentProps = ComponentProps<typeof TestComponent>;
+
+const renderTestComponent = (props: Partial<TestComponentProps> = {}): RenderResult => {
+  const defaultProps: TestComponentProps = {
+    title: 'Test',
+    data: [],
+    onSelect: jest.fn(),
+    ...props
+  };
+  
+  return render(<TestComponent {...defaultProps} />);
+};
+```
+
+### Error Handling with Types
+```ts
+// ✅ GOOD - Typed error handling
+interface ApiError {
+  message: string;
+  code: number;
+  details?: Record<string, unknown>;
+}
+
+const mockApiError: ApiError = {
+  message: 'API Error',
+  code: 500,
+  details: { endpoint: '/users' }
+};
+
+mockFetchUser.mockRejectedValue(new Error(JSON.stringify(mockApiError)));
+```
+
+## Type Safety Checklist
+- [ ] All mock functions use `jest.MockedFunction<T>`
+- [ ] All mock data has proper interfaces
+- [ ] No `any` types in test files
+- [ ] Generic types are used where appropriate
+- [ ] Error types are properly defined
+- [ ] Component props are typed
+- [ ] Hook return types are defined
+- [ ] API response types are defined
+- [ ] Global mocks are type-safe
+- [ ] Test utilities are properly typed
+
+# Mock Decision Tree
+```
+Is it used in 20+ test files?
+├─ YES → Use Global Mock
+│   ├─ react-router-dom
+│   ├─ react-query
+│   ├─ antd components
+│   └─ browser APIs
+│
+└─ NO → Is it business logic?
+    ├─ YES → Use Local Mock
+    │   ├─ API endpoints
+    │   ├─ Custom hooks
+    │   └─ Domain components
+    │
+    └─ NO → Is it test-specific?
+        ├─ YES → Use Local Mock
+        │   ├─ Error scenarios
+        │   ├─ Loading states
+        │   └─ Specific data
+        │
+        └─ NO → Consider Global Mock
+            └─ If it becomes frequently used
+```
+
+# Common Anti-Patterns to Avoid
+
+❌ **Don't mock global dependencies locally:**
+```js
+// BAD - This is already globally mocked
+jest.mock('react-router-dom', () => ({ ... }));
+```
+
+❌ **Don't create global mocks for test-specific data:**
+```js
+// BAD - This should be local
+jest.mock('../api/tracesService', () => ({
+  getTraces: jest.fn(() => specificTestData)
+}));
+```
+
+✅ **Do use global mocks for infrastructure:**
+```js
+// GOOD - Use global mock
+import { useLocation } from 'react-router-dom';
+```
+
+✅ **Do create local mocks for business logic:**
+```js
+// GOOD - Local mock for specific test needs
+jest.mock('../api/tracesService', () => ({
+  getTraces: jest.fn(() => mockTracesData)
+}));
+```

frontend/__mocks__/uplotMock.ts

@@ -12,8 +12,6 @@ export interface MockUPlotInstance {
 export interface MockUPlotPaths {
 	spline: jest.Mock;
 	bars: jest.Mock;
-	linear: jest.Mock;
-	stepped: jest.Mock;
 }
 
 // Create mock instance methods
@@ -25,23 +23,10 @@ const createMockUPlotInstance = (): MockUPlotInstance => ({
 	setSeries: jest.fn(),
 });
 
-// Path builder: (self, seriesIdx, idx0, idx1) => paths or null
-const createMockPathBuilder = (name: string): jest.Mock =>
-	jest.fn(() => ({
-		name, // To test if the correct pathBuilder is used
-		stroke: jest.fn(),
-		fill: jest.fn(),
-		clip: jest.fn(),
-	}));
-
-// Create mock paths - linear, spline, stepped needed by UPlotSeriesBuilder.getPathBuilder
-const mockPaths = {
-	spline: jest.fn(() => createMockPathBuilder('spline')),
-	bars: jest.fn(() => createMockPathBuilder('bars')),
-	linear: jest.fn(() => createMockPathBuilder('linear')),
-	stepped: jest.fn((opts?: { align?: number }) =>
-		createMockPathBuilder(`stepped-(${opts?.align ?? 0})`),
-	),
+// Create mock paths
+const mockPaths: MockUPlotPaths = {
+	spline: jest.fn(),
+	bars: jest.fn(),
 };
 
 // Mock static methods

frontend/package.json

@@ -55,10 +55,8 @@
 		"@signozhq/icons": "0.1.0",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
-		"@signozhq/radio-group": "0.0.2",
 		"@signozhq/resizable": "0.0.0",
 		"@signozhq/sonner": "0.1.0",
-		"@signozhq/switch": "0.0.2",
 		"@signozhq/table": "0.3.7",
 		"@signozhq/tooltip": "0.0.2",
 		"@tanstack/react-table": "8.20.6",

frontend/public/locales/en-GB/routes.json

@@ -12,6 +12,5 @@
 	"pipeline": "Pipeline",
 	"pipelines": "Pipelines",
 	"archives": "Archives",
-	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles"
+	"logs_to_metrics": "Logs To Metrics"
 }

frontend/public/locales/en/routes.json

@@ -12,6 +12,5 @@
 	"pipeline": "Pipeline",
 	"pipelines": "Pipelines",
 	"archives": "Archives",
-	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles"
+	"logs_to_metrics": "Logs To Metrics"
 }

frontend/public/locales/en/titles.json

@@ -73,6 +73,5 @@
 	"API_MONITORING": "SigNoz | External APIs",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
-	"METER": "SigNoz | Meter",
-	"ROLES_SETTINGS": "SigNoz | Roles"
+	"METER": "SigNoz | Meter"
 }

frontend/src/api/dashboard/variables/dashboardVariablesQuery.ts

@@ -11,7 +11,6 @@ import {
 
 const dashboardVariablesQuery = async (
 	props: Props,
-	signal?: AbortSignal,
 ): Promise<SuccessResponse<VariableResponseProps> | ErrorResponse> => {
 	try {
 		const { globalTime } = store.getState();
@@ -33,7 +32,7 @@ const dashboardVariablesQuery = async (
 
 		payload.variables = { ...payload.variables, ...timeVariables };
 
-		const response = await axios.post(`/variables/query`, payload, { signal });
+		const response = await axios.post(`/variables/query`, payload);
 
 		return {
 			statusCode: 200,

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -19,7 +19,6 @@ export const getFieldValues = async (
 	startUnixMilli?: number,
 	endUnixMilli?: number,
 	existingQuery?: string,
-	abortSignal?: AbortSignal,
 ): Promise<SuccessResponseV2<FieldValueResponse>> => {
 	const params: Record<string, string> = {};
 
@@ -48,10 +47,7 @@ export const getFieldValues = async (
 	}
 
 	try {
-		const response = await axios.get('/fields/values', {
-			params,
-			signal: abortSignal,
-		});
+		const response = await axios.get('/fields/values', { params });
 
 		// Normalize values from different types (stringValues, boolValues, etc.)
 		if (response.data?.data?.values) {

frontend/src/api/generated/services/metrics/index.ts

@@ -20,20 +20,17 @@ import { useMutation, useQuery } from 'react-query';
 import { GeneratedAPIInstance } from '../../../index';
 import type {
 	GetMetricAlerts200,
-	GetMetricAlertsPathParameters,
+	GetMetricAlertsParams,
 	GetMetricAttributes200,
-	GetMetricAttributesParams,
-	GetMetricAttributesPathParameters,
 	GetMetricDashboards200,
-	GetMetricDashboardsPathParameters,
+	GetMetricDashboardsParams,
 	GetMetricHighlights200,
-	GetMetricHighlightsPathParameters,
+	GetMetricHighlightsParams,
 	GetMetricMetadata200,
-	GetMetricMetadataPathParameters,
+	GetMetricMetadataParams,
 	GetMetricsStats200,
 	GetMetricsTreemap200,
-	ListMetrics200,
-	ListMetricsParams,
+	MetricsexplorertypesMetricAttributesRequestDTO,
 	MetricsexplorertypesStatsRequestDTO,
 	MetricsexplorertypesTreemapRequestDTO,
 	MetricsexplorertypesUpdateMetricMetadataRequestDTO,
@@ -46,128 +43,30 @@ type AwaitedInput<T> = PromiseLike<T> | T;
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
 
 /**
- * This endpoint returns a list of distinct metric names within the specified time range
- * @summary List metric names
+ * This endpoint returns associated alerts for a specified metric
+ * @summary Get metric alerts
  */
-export const listMetrics = (
-	params?: ListMetricsParams,
+export const getMetricAlerts = (
+	params: GetMetricAlertsParams,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<ListMetrics200>({
-		url: `/api/v2/metrics`,
+	return GeneratedAPIInstance<GetMetricAlerts200>({
+		url: `/api/v2/metric/alerts`,
 		method: 'GET',
 		params,
 		signal,
 	});
 };
 
-export const getListMetricsQueryKey = (params?: ListMetricsParams) => {
-	return ['listMetrics', ...(params ? [params] : [])] as const;
-};
-
-export const getListMetricsQueryOptions = <
-	TData = Awaited<ReturnType<typeof listMetrics>>,
-	TError = RenderErrorResponseDTO
->(
-	params?: ListMetricsParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listMetrics>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListMetricsQueryKey(params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listMetrics>>> = ({
-		signal,
-	}) => listMetrics(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listMetrics>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListMetricsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listMetrics>>
->;
-export type ListMetricsQueryError = RenderErrorResponseDTO;
-
-/**
- * @summary List metric names
- */
-
-export function useListMetrics<
-	TData = Awaited<ReturnType<typeof listMetrics>>,
-	TError = RenderErrorResponseDTO
->(
-	params?: ListMetricsParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listMetrics>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListMetricsQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List metric names
- */
-export const invalidateListMetrics = async (
-	queryClient: QueryClient,
-	params?: ListMetricsParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListMetricsQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint returns associated alerts for a specified metric
- * @summary Get metric alerts
- */
-export const getMetricAlerts = (
-	{ metricName }: GetMetricAlertsPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetMetricAlerts200>({
-		url: `/api/v2/metrics/${metricName}/alerts`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetMetricAlertsQueryKey = ({
-	metricName,
-}: GetMetricAlertsPathParameters) => {
-	return ['getMetricAlerts'] as const;
+export const getGetMetricAlertsQueryKey = (params?: GetMetricAlertsParams) => {
+	return ['getMetricAlerts', ...(params ? [params] : [])] as const;
 };
 
 export const getGetMetricAlertsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
 	TError = RenderErrorResponseDTO
 >(
-	{ metricName }: GetMetricAlertsPathParameters,
+	params: GetMetricAlertsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAlerts>>,
@@ -178,19 +77,13 @@ export const getGetMetricAlertsQueryOptions = <
 ) => {
 	const { query: queryOptions } = options ?? {};
 
-	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricAlertsQueryKey({ metricName });
+	const queryKey = queryOptions?.queryKey ?? getGetMetricAlertsQueryKey(params);
 
 	const queryFn: QueryFunction<Awaited<ReturnType<typeof getMetricAlerts>>> = ({
 		signal,
-	}) => getMetricAlerts({ metricName }, signal);
+	}) => getMetricAlerts(params, signal);
 
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricAlerts>>,
 		TError,
 		TData
@@ -210,7 +103,7 @@ export function useGetMetricAlerts<
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
 	TError = RenderErrorResponseDTO
 >(
-	{ metricName }: GetMetricAlertsPathParameters,
+	params: GetMetricAlertsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAlerts>>,
@@ -219,7 +112,7 @@ export function useGetMetricAlerts<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricAlertsQueryOptions({ metricName }, options);
+	const queryOptions = getGetMetricAlertsQueryOptions(params, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -235,126 +128,11 @@ export function useGetMetricAlerts<
  */
 export const invalidateGetMetricAlerts = async (
 	queryClient: QueryClient,
-	{ metricName }: GetMetricAlertsPathParameters,
+	params: GetMetricAlertsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricAlertsQueryKey({ metricName }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint returns attribute keys and their unique values for a specified metric
- * @summary Get metric attributes
- */
-export const getMetricAttributes = (
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetMetricAttributes200>({
-		url: `/api/v2/metrics/${metricName}/attributes`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getGetMetricAttributesQueryKey = (
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
-) => {
-	return ['getMetricAttributes', ...(params ? [params] : [])] as const;
-};
-
-export const getGetMetricAttributesQueryOptions = <
-	TData = Awaited<ReturnType<typeof getMetricAttributes>>,
-	TError = RenderErrorResponseDTO
->(
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricAttributes>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ??
-		getGetMetricAttributesQueryKey({ metricName }, params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getMetricAttributes>>
-	> = ({ signal }) => getMetricAttributes({ metricName }, params, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricAttributes>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetMetricAttributesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getMetricAttributes>>
->;
-export type GetMetricAttributesQueryError = RenderErrorResponseDTO;
-
-/**
- * @summary Get metric attributes
- */
-
-export function useGetMetricAttributes<
-	TData = Awaited<ReturnType<typeof getMetricAttributes>>,
-	TError = RenderErrorResponseDTO
->(
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricAttributes>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricAttributesQueryOptions(
-		{ metricName },
-		params,
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get metric attributes
- */
-export const invalidateGetMetricAttributes = async (
-	queryClient: QueryClient,
-	{ metricName }: GetMetricAttributesPathParameters,
-	params?: GetMetricAttributesParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricAttributesQueryKey({ metricName }, params) },
+		{ queryKey: getGetMetricAlertsQueryKey(params) },
 		options,
 	);
 
@@ -366,27 +144,28 @@ export const invalidateGetMetricAttributes = async (
  * @summary Get metric dashboards
  */
 export const getMetricDashboards = (
-	{ metricName }: GetMetricDashboardsPathParameters,
+	params: GetMetricDashboardsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricDashboards200>({
-		url: `/api/v2/metrics/${metricName}/dashboards`,
+		url: `/api/v2/metric/dashboards`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getGetMetricDashboardsQueryKey = ({
-	metricName,
-}: GetMetricDashboardsPathParameters) => {
-	return ['getMetricDashboards'] as const;
+export const getGetMetricDashboardsQueryKey = (
+	params?: GetMetricDashboardsParams,
+) => {
+	return ['getMetricDashboards', ...(params ? [params] : [])] as const;
 };
 
 export const getGetMetricDashboardsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
 	TError = RenderErrorResponseDTO
 >(
-	{ metricName }: GetMetricDashboardsPathParameters,
+	params: GetMetricDashboardsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricDashboards>>,
@@ -398,18 +177,13 @@ export const getGetMetricDashboardsQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricDashboardsQueryKey({ metricName });
+		queryOptions?.queryKey ?? getGetMetricDashboardsQueryKey(params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getMetricDashboards>>
-	> = ({ signal }) => getMetricDashboards({ metricName }, signal);
+	> = ({ signal }) => getMetricDashboards(params, signal);
 
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricDashboards>>,
 		TError,
 		TData
@@ -429,7 +203,7 @@ export function useGetMetricDashboards<
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
 	TError = RenderErrorResponseDTO
 >(
-	{ metricName }: GetMetricDashboardsPathParameters,
+	params: GetMetricDashboardsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricDashboards>>,
@@ -438,10 +212,7 @@ export function useGetMetricDashboards<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricDashboardsQueryOptions(
-		{ metricName },
-		options,
-	);
+	const queryOptions = getGetMetricDashboardsQueryOptions(params, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -457,11 +228,11 @@ export function useGetMetricDashboards<
  */
 export const invalidateGetMetricDashboards = async (
 	queryClient: QueryClient,
-	{ metricName }: GetMetricDashboardsPathParameters,
+	params: GetMetricDashboardsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricDashboardsQueryKey({ metricName }) },
+		{ queryKey: getGetMetricDashboardsQueryKey(params) },
 		options,
 	);
 
@@ -473,27 +244,28 @@ export const invalidateGetMetricDashboards = async (
  * @summary Get metric highlights
  */
 export const getMetricHighlights = (
-	{ metricName }: GetMetricHighlightsPathParameters,
+	params: GetMetricHighlightsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricHighlights200>({
-		url: `/api/v2/metrics/${metricName}/highlights`,
+		url: `/api/v2/metric/highlights`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getGetMetricHighlightsQueryKey = ({
-	metricName,
-}: GetMetricHighlightsPathParameters) => {
-	return ['getMetricHighlights'] as const;
+export const getGetMetricHighlightsQueryKey = (
+	params?: GetMetricHighlightsParams,
+) => {
+	return ['getMetricHighlights', ...(params ? [params] : [])] as const;
 };
 
 export const getGetMetricHighlightsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
 	TError = RenderErrorResponseDTO
 >(
-	{ metricName }: GetMetricHighlightsPathParameters,
+	params: GetMetricHighlightsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricHighlights>>,
@@ -505,18 +277,13 @@ export const getGetMetricHighlightsQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricHighlightsQueryKey({ metricName });
+		queryOptions?.queryKey ?? getGetMetricHighlightsQueryKey(params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getMetricHighlights>>
-	> = ({ signal }) => getMetricHighlights({ metricName }, signal);
+	> = ({ signal }) => getMetricHighlights(params, signal);
 
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricHighlights>>,
 		TError,
 		TData
@@ -536,7 +303,7 @@ export function useGetMetricHighlights<
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
 	TError = RenderErrorResponseDTO
 >(
-	{ metricName }: GetMetricHighlightsPathParameters,
+	params: GetMetricHighlightsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricHighlights>>,
@@ -545,10 +312,7 @@ export function useGetMetricHighlights<
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricHighlightsQueryOptions(
-		{ metricName },
-		options,
-	);
+	const queryOptions = getGetMetricHighlightsQueryOptions(params, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -564,115 +328,11 @@ export function useGetMetricHighlights<
  */
 export const invalidateGetMetricHighlights = async (
 	queryClient: QueryClient,
-	{ metricName }: GetMetricHighlightsPathParameters,
+	params: GetMetricHighlightsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricHighlightsQueryKey({ metricName }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint returns metadata information like metric description, unit, type, temporality, monotonicity for a specified metric
- * @summary Get metric metadata
- */
-export const getMetricMetadata = (
-	{ metricName }: GetMetricMetadataPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetMetricMetadata200>({
-		url: `/api/v2/metrics/${metricName}/metadata`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetMetricMetadataQueryKey = ({
-	metricName,
-}: GetMetricMetadataPathParameters) => {
-	return ['getMetricMetadata'] as const;
-};
-
-export const getGetMetricMetadataQueryOptions = <
-	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
-	TError = RenderErrorResponseDTO
->(
-	{ metricName }: GetMetricMetadataPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricMetadata>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetMetricMetadataQueryKey({ metricName });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getMetricMetadata>>
-	> = ({ signal }) => getMetricMetadata({ metricName }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!metricName,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getMetricMetadata>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetMetricMetadataQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getMetricMetadata>>
->;
-export type GetMetricMetadataQueryError = RenderErrorResponseDTO;
-
-/**
- * @summary Get metric metadata
- */
-
-export function useGetMetricMetadata<
-	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
-	TError = RenderErrorResponseDTO
->(
-	{ metricName }: GetMetricMetadataPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getMetricMetadata>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetMetricMetadataQueryOptions({ metricName }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get metric metadata
- */
-export const invalidateGetMetricMetadata = async (
-	queryClient: QueryClient,
-	{ metricName }: GetMetricMetadataPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetMetricMetadataQueryKey({ metricName }) },
+		{ queryKey: getGetMetricHighlightsQueryKey(params) },
 		options,
 	);
 
@@ -778,6 +438,189 @@ export const useUpdateMetricMetadata = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint returns attribute keys and their unique values for a specified metric
+ * @summary Get metric attributes
+ */
+export const getMetricAttributes = (
+	metricsexplorertypesMetricAttributesRequestDTO: MetricsexplorertypesMetricAttributesRequestDTO,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetMetricAttributes200>({
+		url: `/api/v2/metrics/attributes`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: metricsexplorertypesMetricAttributesRequestDTO,
+		signal,
+	});
+};
+
+export const getGetMetricAttributesMutationOptions = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getMetricAttributes>>,
+		TError,
+		{ data: MetricsexplorertypesMetricAttributesRequestDTO },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof getMetricAttributes>>,
+	TError,
+	{ data: MetricsexplorertypesMetricAttributesRequestDTO },
+	TContext
+> => {
+	const mutationKey = ['getMetricAttributes'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+		  'mutationKey' in options.mutation &&
+		  options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof getMetricAttributes>>,
+		{ data: MetricsexplorertypesMetricAttributesRequestDTO }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return getMetricAttributes(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type GetMetricAttributesMutationResult = NonNullable<
+	Awaited<ReturnType<typeof getMetricAttributes>>
+>;
+export type GetMetricAttributesMutationBody = MetricsexplorertypesMetricAttributesRequestDTO;
+export type GetMetricAttributesMutationError = RenderErrorResponseDTO;
+
+/**
+ * @summary Get metric attributes
+ */
+export const useGetMetricAttributes = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getMetricAttributes>>,
+		TError,
+		{ data: MetricsexplorertypesMetricAttributesRequestDTO },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof getMetricAttributes>>,
+	TError,
+	{ data: MetricsexplorertypesMetricAttributesRequestDTO },
+	TContext
+> => {
+	const mutationOptions = getGetMetricAttributesMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint returns metadata information like metric description, unit, type, temporality, monotonicity for a specified metric
+ * @summary Get metric metadata
+ */
+export const getMetricMetadata = (
+	params: GetMetricMetadataParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetMetricMetadata200>({
+		url: `/api/v2/metrics/metadata`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetMetricMetadataQueryKey = (
+	params?: GetMetricMetadataParams,
+) => {
+	return ['getMetricMetadata', ...(params ? [params] : [])] as const;
+};
+
+export const getGetMetricMetadataQueryOptions = <
+	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
+	TError = RenderErrorResponseDTO
+>(
+	params: GetMetricMetadataParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricMetadata>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetMetricMetadataQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getMetricMetadata>>
+	> = ({ signal }) => getMetricMetadata(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricMetadata>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetMetricMetadataQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getMetricMetadata>>
+>;
+export type GetMetricMetadataQueryError = RenderErrorResponseDTO;
+
+/**
+ * @summary Get metric metadata
+ */
+
+export function useGetMetricMetadata<
+	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
+	TError = RenderErrorResponseDTO
+>(
+	params: GetMetricMetadataParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricMetadata>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetMetricMetadataQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get metric metadata
+ */
+export const invalidateGetMetricMetadata = async (
+	queryClient: QueryClient,
+	params: GetMetricMetadataParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetMetricMetadataQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint provides list of metrics with their number of samples and timeseries for the given time range
  * @summary Get metrics statistics

frontend/src/api/generated/services/query/index.ts

@@ -1,107 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	MutationFunction,
-	UseMutationOptions,
-	UseMutationResult,
-} from 'react-query';
-import { useMutation } from 'react-query';
-
-import { GeneratedAPIInstance } from '../../../index';
-import type {
-	Querybuildertypesv5QueryRangeRequestDTO,
-	QueryRangeV5200,
-	RenderErrorResponseDTO,
-} from '../sigNoz.schemas';
-
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
-/**
- * Execute a composite query over a time range. Supports builder queries (traces, logs, metrics), formulas, trace operators, PromQL, and ClickHouse SQL.
- * @summary Query range
- */
-export const queryRangeV5 = (
-	querybuildertypesv5QueryRangeRequestDTO: Querybuildertypesv5QueryRangeRequestDTO,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<QueryRangeV5200>({
-		url: `/api/v5/query_range`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: querybuildertypesv5QueryRangeRequestDTO,
-		signal,
-	});
-};
-
-export const getQueryRangeV5MutationOptions = <
-	TError = RenderErrorResponseDTO,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof queryRangeV5>>,
-		TError,
-		{ data: Querybuildertypesv5QueryRangeRequestDTO },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof queryRangeV5>>,
-	TError,
-	{ data: Querybuildertypesv5QueryRangeRequestDTO },
-	TContext
-> => {
-	const mutationKey = ['queryRangeV5'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof queryRangeV5>>,
-		{ data: Querybuildertypesv5QueryRangeRequestDTO }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return queryRangeV5(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type QueryRangeV5MutationResult = NonNullable<
-	Awaited<ReturnType<typeof queryRangeV5>>
->;
-export type QueryRangeV5MutationBody = Querybuildertypesv5QueryRangeRequestDTO;
-export type QueryRangeV5MutationError = RenderErrorResponseDTO;
-
-/**
- * @summary Query range
- */
-export const useQueryRangeV5 = <
-	TError = RenderErrorResponseDTO,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof queryRangeV5>>,
-		TError,
-		{ data: Querybuildertypesv5QueryRangeRequestDTO },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof queryRangeV5>>,
-	TError,
-	{ data: Querybuildertypesv5QueryRangeRequestDTO },
-	TContext
-> => {
-	const mutationOptions = getQueryRangeV5MutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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

@@ -11,10 +11,13 @@ export const getMetricMetadata = async (
 ): Promise<SuccessResponseV2<MetricMetadataResponse> | ErrorResponseV2> => {
 	try {
 		const encodedMetricName = encodeURIComponent(metricName);
-		const response = await axios.get(`/metrics/${encodedMetricName}/metadata`, {
-			signal,
-			headers,
-		});
+		const response = await axios.get(
+			`/metrics/metadata?metricName=${encodedMetricName}`,
+			{
+				signal,
+				headers,
+			},
+		);
 
 		return {
 			httpStatusCode: response.status,

frontend/src/api/v1/domains/id/delete.ts

@@ -0,0 +1,19 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+
+const deleteDomain = async (id: string): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.delete<null>(`/domains/${id}`);
+
+		return {
+			httpStatusCode: response.status,
+			data: null,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default deleteDomain;

frontend/src/api/v1/domains/id/put.ts

@@ -0,0 +1,25 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
+import { UpdatableAuthDomain } from 'types/api/v1/domains/put';
+
+const put = async (
+	props: UpdatableAuthDomain,
+): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.put<RawSuccessResponse<null>>(
+			`/domains/${props.id}`,
+			{ config: props.config },
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default put;

frontend/src/api/v1/domains/list.ts

@@ -0,0 +1,24 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
+import { GettableAuthDomain } from 'types/api/v1/domains/list';
+
+const listAllDomain = async (): Promise<
+	SuccessResponseV2<GettableAuthDomain[]>
+> => {
+	try {
+		const response = await axios.get<RawSuccessResponse<GettableAuthDomain[]>>(
+			`/domains`,
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default listAllDomain;

frontend/src/api/v1/domains/post.ts

@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
+import { GettableAuthDomain } from 'types/api/v1/domains/list';
+import { PostableAuthDomain } from 'types/api/v1/domains/post';
+
+const post = async (
+	props: PostableAuthDomain,
+): Promise<SuccessResponseV2<GettableAuthDomain>> => {
+	try {
+		const response = await axios.post<RawSuccessResponse<GettableAuthDomain>>(
+			`/domains`,
+			props,
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default post;

frontend/src/api/v5/queryRange/convertV5Response.test.ts

@@ -73,7 +73,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const v5Data: QueryRangeResponseV5 = {
 			type: 'time_series',
 			data: { results: [timeSeries] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
 		};
 
 		const params = makeBaseParams('time_series', [
@@ -156,7 +156,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const v5Data: QueryRangeResponseV5 = {
 			type: 'scalar',
 			data: { results: [scalar] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
 		};
 
 		const params = makeBaseParams('scalar', [
@@ -239,7 +239,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const v5Data: QueryRangeResponseV5 = {
 			type: 'scalar',
 			data: { results: [scalar] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
 		};
 
 		const params = makeBaseParams('scalar', [

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

@@ -388,7 +388,6 @@ export function convertV5ResponseToLegacy(
 					warnings: v5Data?.data?.warning || [],
 				},
 				warning: v5Data?.warning || undefined,
-				meta: v5Data?.meta,
 			},
 			warning: v5Data?.warning || undefined,
 		};
@@ -407,7 +406,6 @@ export function convertV5ResponseToLegacy(
 		payload: {
 			data: convertedData,
 			warning: v5Response.payload?.data?.warning || undefined,
-			meta: v5Data?.meta,
 		},
 	};
 

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

@@ -21,9 +21,7 @@ import '@signozhq/design-tokens';
 import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';
-import '@signozhq/radio-group';
 import '@signozhq/resizable';
 import '@signozhq/sonner';
-import '@signozhq/switch';
 import '@signozhq/table';
 import '@signozhq/tooltip';

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { Virtuoso } from 'react-virtuoso';
 import { Card } from 'antd';
-import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -11,8 +10,6 @@ import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
-import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
-import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -31,15 +28,6 @@ interface Props {
 }
 
 function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
-	const virtuosoRef = useRef<VirtuosoHandle>(null);
-	const {
-		activeLog,
-		onAddToQuery,
-		selectedTab,
-		handleSetActiveLog,
-		handleCloseLogDetail,
-	} = useLogDetailHandlers();
-
 	const basePayload = getHostLogsQueryPayload(
 		timeRange.startTime,
 		timeRange.endTime,
@@ -84,40 +72,29 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 		setIsPaginating(false);
 	}, [data, setIsPaginating]);
 
-	const handleScrollToLog = useScrollToLog({
-		logs,
-		virtuosoRef,
-	});
-
 	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => {
-			return (
-				<div key={logToRender.id}>
-					<RawLogView
-						isTextOverflowEllipsisDisabled
-						data={logToRender}
-						linesPerRow={5}
-						fontSize={FontSize.MEDIUM}
-						selectedFields={[
-							{
-								dataType: 'string',
-								type: '',
-								name: 'body',
-							},
-							{
-								dataType: 'string',
-								type: '',
-								name: 'timestamp',
-							},
-						]}
-						onSetActiveLog={handleSetActiveLog}
-						onClearActiveLog={handleCloseLogDetail}
-						isActiveLog={activeLog?.id === logToRender.id}
-					/>
-				</div>
-			);
-		},
-		[activeLog, handleSetActiveLog, handleCloseLogDetail],
+		(_: number, logToRender: ILog): JSX.Element => (
+			<RawLogView
+				isTextOverflowEllipsisDisabled
+				key={logToRender.id}
+				data={logToRender}
+				linesPerRow={5}
+				fontSize={FontSize.MEDIUM}
+				selectedFields={[
+					{
+						dataType: 'string',
+						type: '',
+						name: 'body',
+					},
+					{
+						dataType: 'string',
+						type: '',
+						name: 'timestamp',
+					},
+				]}
+			/>
+		),
+		[],
 	);
 
 	const renderFooter = useCallback(
@@ -141,7 +118,6 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 					<Virtuoso
 						className="host-metrics-logs-virtuoso"
 						key="host-metrics-logs-virtuoso"
-						ref={virtuosoRef}
 						data={logs}
 						endReached={loadMoreLogs}
 						totalCount={logs.length}
@@ -163,24 +139,7 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 			{!isLoading && !isError && logs.length === 0 && <NoLogsContainer />}
 			{isError && !isLoading && <LogsError />}
 			{!isLoading && !isError && logs.length > 0 && (
-				<div
-					className="host-metrics-logs-list-container"
-					data-log-detail-ignore="true"
-				>
-					{renderContent}
-				</div>
-			)}
-			{selectedTab && activeLog && (
-				<LogDetail
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					logs={logs}
-					onNavigateLog={handleSetActiveLog}
-					selectedTab={selectedTab}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					onScrollToLog={handleScrollToLog}
-				/>
+				<div className="host-metrics-logs-list-container">{renderContent}</div>
 			)}
 		</div>
 	);

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -13,9 +13,6 @@ export type LogDetailProps = {
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
-	logs?: ILog[];
-	onNavigateLog?: (log: ILog) => void;
-	onScrollToLog?: (logId: string) => void;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
 	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;

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

@@ -15,8 +15,6 @@
 		}
 
 		.log-detail-drawer__title-right {
-			display: flex;
-			align-items: center;
 			.ant-btn {
 				display: flex;
 				align-items: center;
@@ -68,10 +66,6 @@
 		margin-bottom: 16px;
 	}
 
-	.log-detail-drawer__content {
-		height: 100%;
-	}
-
 	.log-detail-drawer__log {
 		width: 100%;
 		display: flex;
@@ -189,115 +183,9 @@
 	.ant-drawer-close {
 		padding: 0px;
 	}
-	.log-detail-drawer__footer-hint {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		padding: 8px 16px;
-		text-align: left;
-		color: var(--text-vanilla-200);
-		background: var(--bg-ink-400);
-		z-index: 10;
-
-		.log-detail-drawer__footer-hint-content {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-		}
-
-		.log-detail-drawer__footer-hint-icon {
-			display: inline;
-			vertical-align: middle;
-			color: var(--text-vanilla-200);
-		}
-
-		.log-detail-drawer__footer-hint-text {
-			font-size: 13px;
-			margin: 0;
-		}
-	}
-	.log-arrows {
-		display: flex;
-		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
-		border-radius: 6px;
-		padding: 2px 6px;
-		align-items: center;
-		margin-left: 8px;
-	}
-
-	.log-arrow-btn {
-		padding: 0;
-		min-width: 28px;
-		height: 28px;
-		border-radius: 4px;
-		background: var(--bg-ink-400);
-		color: var(--text-vanilla-400);
-		border: 1px solid var(--bg-ink-300);
-		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: background-color 0.2s ease-in-out;
-	}
-
-	.log-arrow-btn-up,
-	.log-arrow-btn-down {
-		background: var(--bg-ink-400);
-	}
-
-	.log-arrow-btn:active,
-	.log-arrow-btn:focus {
-		background: var(--bg-ink-300);
-		color: var(--text-vanilla-100);
-	}
-
-	.log-arrow-btn[disabled] {
-		opacity: 0.5;
-		cursor: not-allowed;
-		background: var(--bg-ink-500);
-		color: var(--text-vanilla-200);
-
-		.log-arrow-btn:hover:not([disabled]) {
-			background: var(--bg-ink-300);
-			color: var(--text-vanilla-100);
-		}
-	}
 }
 
 .lightMode {
-	.log-arrows {
-		background: var(--bg-vanilla-100);
-		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
-	}
-
-	.log-arrow-btn {
-		background: var(--bg-vanilla-100);
-		color: var(--text-ink-400);
-		border: 1px solid var(--bg-vanilla-300);
-		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
-	}
-
-	.log-arrow-btn-up,
-	.log-arrow-btn-down {
-		background: var(--bg-vanilla-100);
-	}
-
-	.log-arrow-btn:active,
-	.log-arrow-btn:focus {
-		background: var(--bg-vanilla-200);
-		color: var(--text-ink-500);
-	}
-
-	.log-arrow-btn:hover:not([disabled]) {
-		background: var(--bg-vanilla-200);
-		color: var(--text-ink-500);
-	}
-
-	.log-arrow-btn[disabled] {
-		background: var(--bg-vanilla-100);
-		color: var(--text-ink-200);
-	}
 	.ant-drawer-header {
 		border-bottom: 1px solid var(--bg-vanilla-400);
 		background: var(--bg-vanilla-100);
@@ -364,33 +252,4 @@
 			color: var(--text-ink-300);
 		}
 	}
-
-	.log-detail-drawer__footer-hint {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		padding: 8px 16px;
-		text-align: left;
-		color: var(--text-vanilla-700);
-		background: var(--bg-vanilla-100);
-		z-index: 10;
-
-		.log-detail-drawer__footer-hint-content {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-		}
-
-		.log-detail-drawer__footer-hint-icon {
-			display: inline;
-			vertical-align: middle;
-			color: var(--text-vanilla-700);
-		}
-
-		.log-detail-drawer__footer-hint-text {
-			font-size: 13px;
-			margin: 0;
-		}
-	}
 }

frontend/src/components/LogDetail/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
@@ -32,12 +32,8 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import createQueryParams from 'lib/createQueryParams';
 import { cloneDeep } from 'lodash-es';
 import {
-	ArrowDown,
-	ArrowUp,
 	BarChart2,
 	Braces,
-	ChevronDown,
-	ChevronUp,
 	Compass,
 	Copy,
 	Filter,
@@ -64,9 +60,6 @@ function LogDetailInner({
 	isListViewPanel = false,
 	listViewPanelSelectedFields,
 	handleChangeSelectedView,
-	logs,
-	onNavigateLog,
-	onScrollToLog,
 }: LogDetailInnerProps): JSX.Element {
 	const initialContextQuery = useInitialQuery(log);
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
@@ -81,78 +74,6 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery, updateAllQueriesOperators } = useQueryBuilder();
 
-	// Handle clicks outside to close drawer, except on explicitly ignored regions
-	useEffect(() => {
-		const handleClickOutside = (e: MouseEvent): void => {
-			const target = e.target as HTMLElement;
-
-			// Don't close if clicking on explicitly ignored regions
-			if (target.closest('[data-log-detail-ignore="true"]')) {
-				return;
-			}
-
-			// Close the drawer for any other outside click
-			onClose?.(e as any);
-		};
-
-		document.addEventListener('mousedown', handleClickOutside);
-
-		return (): void => {
-			document.removeEventListener('mousedown', handleClickOutside);
-		};
-	}, [onClose]);
-
-	// Keyboard navigation - handle up/down arrow keys
-	// Only listen when in OVERVIEW tab
-	useEffect(() => {
-		if (
-			!logs ||
-			!onNavigateLog ||
-			logs.length === 0 ||
-			selectedView !== VIEW_TYPES.OVERVIEW
-		) {
-			return;
-		}
-
-		const handleKeyDown = (e: KeyboardEvent): void => {
-			const currentIndex = logs.findIndex((l) => l.id === log.id);
-			if (currentIndex === -1) {
-				return;
-			}
-
-			if (e.key === 'ArrowUp') {
-				e.preventDefault();
-				e.stopPropagation();
-				// Navigate to previous log
-				if (currentIndex > 0) {
-					const prevLog = logs[currentIndex - 1];
-					onNavigateLog(prevLog);
-					// Trigger scroll to the log element
-					if (onScrollToLog) {
-						onScrollToLog(prevLog.id);
-					}
-				}
-			} else if (e.key === 'ArrowDown') {
-				e.preventDefault();
-				e.stopPropagation();
-				// Navigate to next log
-				if (currentIndex < logs.length - 1) {
-					const nextLog = logs[currentIndex + 1];
-					onNavigateLog(nextLog);
-					// Trigger scroll to the log element
-					if (onScrollToLog) {
-						onScrollToLog(nextLog.id);
-					}
-				}
-			}
-		};
-
-		document.addEventListener('keydown', handleKeyDown);
-		return (): void => {
-			document.removeEventListener('keydown', handleKeyDown);
-		};
-	}, [log.id, logs, onNavigateLog, onScrollToLog, selectedView]);
-
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) {
 			return null;
@@ -306,87 +227,32 @@ function LogDetailInner({
 	);
 
 	const logType = log?.attributes_string?.log_level || LogType.INFO;
-	const currentLogIndex = logs ? logs.findIndex((l) => l.id === log.id) : -1;
-	const isPrevDisabled =
-		!logs || !onNavigateLog || logs.length === 0 || currentLogIndex <= 0;
-	const isNextDisabled =
-		!logs ||
-		!onNavigateLog ||
-		logs.length === 0 ||
-		currentLogIndex === logs.length - 1;
-
-	type HandleNavigateLogParams = {
-		direction: 'next' | 'previous';
-	};
-
-	const handleNavigateLog = ({ direction }: HandleNavigateLogParams): void => {
-		if (!logs || !onNavigateLog || currentLogIndex === -1) {
-			return;
-		}
-		if (direction === 'previous' && !isPrevDisabled) {
-			const prevLog = logs[currentLogIndex - 1];
-			onNavigateLog(prevLog);
-			onScrollToLog?.(prevLog.id);
-		} else if (direction === 'next' && !isNextDisabled) {
-			const nextLog = logs[currentLogIndex + 1];
-			onNavigateLog(nextLog);
-			onScrollToLog?.(nextLog.id);
-		}
-	};
 
 	return (
 		<Drawer
 			width="60%"
-			mask={false}
-			maskClosable={false}
+			maskStyle={{ background: 'none' }}
 			title={
-				<div className="log-detail-drawer__title" data-log-detail-ignore="true">
+				<div className="log-detail-drawer__title">
 					<div className="log-detail-drawer__title-left">
 						<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
 						<Typography.Text className="title">Log details</Typography.Text>
 					</div>
-					<div className="log-detail-drawer__title-right">
-						<div className="log-arrows">
-							<Tooltip
-								title={isPrevDisabled ? '' : 'Move to previous log'}
-								placement="top"
-								mouseLeaveDelay={0}
+					{showOpenInExplorerBtn && (
+						<div className="log-detail-drawer__title-right">
+							<Button
+								className="open-in-explorer-btn"
+								icon={<Compass size={16} />}
+								onClick={handleOpenInExplorer}
 							>
-								<Button
-									icon={<ChevronUp size={14} />}
-									className="log-arrow-btn log-arrow-btn-up"
-									disabled={isPrevDisabled}
-									onClick={(): void => handleNavigateLog({ direction: 'previous' })}
-								/>
-							</Tooltip>
-							<Tooltip
-								title={isNextDisabled ? '' : 'Move to next log'}
-								placement="top"
-								mouseLeaveDelay={0}
-							>
-								<Button
-									icon={<ChevronDown size={14} />}
-									className="log-arrow-btn log-arrow-btn-down"
-									disabled={isNextDisabled}
-									onClick={(): void => handleNavigateLog({ direction: 'next' })}
-								/>
-							</Tooltip>
+								Open in Explorer
+							</Button>
 						</div>
-						{showOpenInExplorerBtn && (
-							<div>
-								<Button
-									className="open-in-explorer-btn"
-									icon={<Compass size={16} />}
-									onClick={handleOpenInExplorer}
-								>
-									Open in Explorer
-								</Button>
-							</div>
-						)}
-					</div>
+					)}
 				</div>
 			}
 			placement="right"
+			// closable
 			onClose={drawerCloseHandler}
 			open={log !== null}
 			style={{
@@ -397,164 +263,138 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
-				<div className="log-detail-drawer__log">
-					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-					<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
-						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
-					</Tooltip>
+			<div className="log-detail-drawer__log">
+				<Divider type="vertical" className={cx('log-type-indicator', logType)} />
+				<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
+					<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
+				</Tooltip>
 
-					<div className="log-overflow-shadow">&nbsp;</div>
-				</div>
+				<div className="log-overflow-shadow">&nbsp;</div>
+			</div>
 
-				<div className="tabs-and-search">
-					<Radio.Group
-						className="views-tabs"
-						onChange={handleModeChange}
-						value={selectedView}
+			<div className="tabs-and-search">
+				<Radio.Group
+					className="views-tabs"
+					onChange={handleModeChange}
+					value={selectedView}
+				>
+					<Radio.Button
+						className={
+							// eslint-disable-next-line sonarjs/no-duplicate-string
+							selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
+						}
+						value={VIEW_TYPES.OVERVIEW}
 					>
-						<Radio.Button
-							className={
-								// eslint-disable-next-line sonarjs/no-duplicate-string
-								selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
-							}
-							value={VIEW_TYPES.OVERVIEW}
-						>
-							<div className="view-title">
-								<Table size={14} />
-								Overview
-							</div>
-						</Radio.Button>
-						<Radio.Button
-							className={
-								selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'
-							}
-							value={VIEW_TYPES.JSON}
-						>
-							<div className="view-title">
-								<Braces size={14} />
-								JSON
-							</div>
-						</Radio.Button>
-						<Radio.Button
-							className={
-								selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
-							}
-							value={VIEW_TYPES.CONTEXT}
-						>
-							<div className="view-title">
-								<TextSelect size={14} />
-								Context
-							</div>
-						</Radio.Button>
-						<Radio.Button
-							className={
-								selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
-							}
-							value={VIEW_TYPES.INFRAMETRICS}
-						>
-							<div className="view-title">
-								<BarChart2 size={14} />
-								Metrics
-							</div>
-						</Radio.Button>
-					</Radio.Group>
-
-					<div className="log-detail-drawer__actions">
-						{selectedView === VIEW_TYPES.CONTEXT && (
-							<Tooltip
-								title="Show Filters"
-								placement="topLeft"
-								aria-label="Show Filters"
-							>
-								<Button
-									className="action-btn"
-									icon={<Filter size={16} />}
-									onClick={handleFilterVisible}
-								/>
-							</Tooltip>
-						)}
+						<div className="view-title">
+							<Table size={14} />
+							Overview
+						</div>
+					</Radio.Button>
+					<Radio.Button
+						className={selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'}
+						value={VIEW_TYPES.JSON}
+					>
+						<div className="view-title">
+							<Braces size={14} />
+							JSON
+						</div>
+					</Radio.Button>
+					<Radio.Button
+						className={
+							selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
+						}
+						value={VIEW_TYPES.CONTEXT}
+					>
+						<div className="view-title">
+							<TextSelect size={14} />
+							Context
+						</div>
+					</Radio.Button>
+					<Radio.Button
+						className={
+							selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
+						}
+						value={VIEW_TYPES.INFRAMETRICS}
+					>
+						<div className="view-title">
+							<BarChart2 size={14} />
+							Metrics
+						</div>
+					</Radio.Button>
+				</Radio.Group>
 
+				<div className="log-detail-drawer__actions">
+					{selectedView === VIEW_TYPES.CONTEXT && (
 						<Tooltip
-							title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
+							title="Show Filters"
 							placement="topLeft"
-							aria-label={
-								selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
-							}
+							aria-label="Show Filters"
 						>
 							<Button
 								className="action-btn"
-								icon={<Copy size={16} />}
-								onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
+								icon={<Filter size={16} />}
+								onClick={handleFilterVisible}
 							/>
 						</Tooltip>
-					</div>
-				</div>
-				{isFilterVisible && contextQuery?.builder.queryData[0] && (
-					<div className="log-detail-drawer-query-container">
-						<QuerySearch
-							onChange={(value): void => handleQueryExpressionChange(value, 0)}
-							dataSource={DataSource.LOGS}
-							queryData={contextQuery?.builder.queryData[0]}
-							onRun={handleRunQuery}
+					)}
+
+					<Tooltip
+						title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
+						placement="topLeft"
+						aria-label={
+							selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
+						}
+					>
+						<Button
+							className="action-btn"
+							icon={<Copy size={16} />}
+							onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
 						/>
-					</div>
-				)}
-
-				{selectedView === VIEW_TYPES.OVERVIEW && (
-					<Overview
-						logData={log}
-						onAddToQuery={onAddToQuery}
-						onClickActionItem={onClickActionItem}
-						isListViewPanel={isListViewPanel}
-						selectedOptions={options}
-						listViewPanelSelectedFields={listViewPanelSelectedFields}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
-				)}
-				{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
-
-				{selectedView === VIEW_TYPES.CONTEXT && (
-					<ContextView
-						log={log}
-						filters={filters}
-						contextQuery={contextQuery}
-						isEdit={isEdit}
-					/>
-				)}
-				{selectedView === VIEW_TYPES.INFRAMETRICS && (
-					<InfraMetrics
-						clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
-						podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
-						nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
-						hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
-						timestamp={log.timestamp.toString()}
-						dataSource={DataSource.LOGS}
-					/>
-				)}
-
-				{selectedView === VIEW_TYPES.OVERVIEW && (
-					<div className="log-detail-drawer__footer-hint">
-						<div className="log-detail-drawer__footer-hint-content">
-							<Typography.Text
-								type="secondary"
-								className="log-detail-drawer__footer-hint-text"
-							>
-								Use
-							</Typography.Text>
-							<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
-							<span>/</span>
-							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
-							<Typography.Text
-								type="secondary"
-								className="log-detail-drawer__footer-hint-text"
-							>
-								to view previous/next log
-							</Typography.Text>
-						</div>
-					</div>
-				)}
+					</Tooltip>
+				</div>
 			</div>
+			{isFilterVisible && contextQuery?.builder.queryData[0] && (
+				<div className="log-detail-drawer-query-container">
+					<QuerySearch
+						onChange={(value): void => handleQueryExpressionChange(value, 0)}
+						dataSource={DataSource.LOGS}
+						queryData={contextQuery?.builder.queryData[0]}
+						onRun={handleRunQuery}
+					/>
+				</div>
+			)}
+
+			{selectedView === VIEW_TYPES.OVERVIEW && (
+				<Overview
+					logData={log}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onClickActionItem}
+					isListViewPanel={isListViewPanel}
+					selectedOptions={options}
+					listViewPanelSelectedFields={listViewPanelSelectedFields}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			)}
+			{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
+
+			{selectedView === VIEW_TYPES.CONTEXT && (
+				<ContextView
+					log={log}
+					filters={filters}
+					contextQuery={contextQuery}
+					isEdit={isEdit}
+				/>
+			)}
+			{selectedView === VIEW_TYPES.INFRAMETRICS && (
+				<InfraMetrics
+					clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
+					podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
+					nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
+					hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
+					timestamp={log.timestamp.toString()}
+					dataSource={DataSource.LOGS}
+				/>
+			)}
 		</Drawer>
 	);
 }

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

@@ -2,11 +2,13 @@ import { memo, useCallback, useMemo } from 'react';
 import { blue } from '@ant-design/colors';
 import { Typography } from 'antd';
 import cx from 'classnames';
+import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 // utils
@@ -102,17 +104,12 @@ function LogSelectedField({
 type ListLogViewProps = {
 	logData: ILog;
 	selectedFields: IField[];
-	onSetActiveLog: (
-		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
-	) => void;
+	onSetActiveLog: (log: ILog) => void;
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
 	linesPerRow: number;
 	fontSize: FontSize;
 	handleChangeSelectedView?: ChangeViewFunctionType;
-	isActiveLog?: boolean;
-	onClearActiveLog?: () => void;
 };
 
 function ListLogView({
@@ -123,8 +120,7 @@ function ListLogView({
 	activeLog,
 	linesPerRow,
 	fontSize,
-	isActiveLog,
-	onClearActiveLog,
+	handleChangeSelectedView,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
@@ -133,24 +129,35 @@ function ListLogView({
 	);
 	const isReadOnlyLog = !isLogsExplorerPage;
 
+	const {
+		activeLog: activeContextLog,
+		onAddToQuery: handleAddToQuery,
+		onSetActiveLog: handleSetActiveContextLog,
+		onClearActiveLog: handleClearActiveContextLog,
+	} = useActiveLog();
+
 	const isDarkMode = useIsDarkMode();
 
-	const handleDetailedView = useCallback(() => {
-		if (isActiveLog) {
-			onClearActiveLog?.();
-			return;
-		}
+	const handlerClearActiveContextLog = useCallback(
+		(event: React.MouseEvent | React.KeyboardEvent) => {
+			event.preventDefault();
+			event.stopPropagation();
+			handleClearActiveContextLog();
+		},
+		[handleClearActiveContextLog],
+	);
 
+	const handleDetailedView = useCallback(() => {
 		onSetActiveLog(logData);
-	}, [logData, onSetActiveLog, isActiveLog, onClearActiveLog]);
+	}, [logData, onSetActiveLog]);
 
 	const handleShowContext = useCallback(
 		(event: React.MouseEvent) => {
 			event.preventDefault();
 			event.stopPropagation();
-			onSetActiveLog(logData, VIEW_TYPES.CONTEXT);
+			handleSetActiveContextLog(logData);
 		},
-		[logData, onSetActiveLog],
+		[logData, handleSetActiveContextLog],
 	);
 
 	const updatedSelecedFields = useMemo(
@@ -179,7 +186,11 @@ function ListLogView({
 	return (
 		<>
 			<Container
-				$isActiveLog={isHighlighted || activeLog?.id === logData.id}
+				$isActiveLog={
+					isHighlighted ||
+					activeLog?.id === logData.id ||
+					activeContextLog?.id === logData.id
+				}
 				$isDarkMode={isDarkMode}
 				$logType={logType}
 				onClick={handleDetailedView}
@@ -240,6 +251,15 @@ function ListLogView({
 					/>
 				)}
 			</Container>
+			{activeContextLog && (
+				<LogDetail
+					log={activeContextLog}
+					onAddToQuery={handleAddToQuery}
+					selectedTab={VIEW_TYPES.CONTEXT}
+					onClose={handlerClearActiveContextLog}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			)}
 		</>
 	);
 }

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

@@ -1,15 +1,19 @@
 import {
+	KeyboardEvent,
 	memo,
 	MouseEvent,
 	MouseEventHandler,
 	useCallback,
 	useMemo,
+	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Tooltip } from 'antd';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
+import { DrawerProps, Tooltip } from 'antd';
+import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -35,8 +39,7 @@ function RawLogView({
 	selectedFields = [],
 	fontSize,
 	onLogClick,
-	onSetActiveLog,
-	onClearActiveLog,
+	handleChangeSelectedView,
 }: RawLogViewProps): JSX.Element {
 	const {
 		isHighlighted: isUrlHighlighted,
@@ -45,6 +48,15 @@ function RawLogView({
 	} = useCopyLogLink(data.id);
 	const flattenLogData = useMemo(() => FlatLogData(data), [data]);
 
+	const {
+		activeLog,
+		onSetActiveLog,
+		onClearActiveLog,
+		onAddToQuery,
+	} = useActiveLog();
+
+	const [selectedTab, setSelectedTab] = useState<VIEWS | undefined>();
+
 	const isDarkMode = useIsDarkMode();
 	const isReadOnlyLog = !isLogsExplorerPage || isReadOnly;
 
@@ -122,24 +134,34 @@ function RawLogView({
 			// Use custom click handler if provided, otherwise use default behavior
 			if (onLogClick) {
 				onLogClick(data, event);
-				return;
+			} else {
+				onSetActiveLog(data);
+				setSelectedTab(VIEW_TYPES.OVERVIEW);
 			}
-			if (isActiveLog) {
-				onClearActiveLog?.();
-				return;
-			}
-
-			onSetActiveLog?.(data);
 		},
-		[isReadOnly, onLogClick, isActiveLog, onSetActiveLog, data, onClearActiveLog],
+		[isReadOnly, data, onSetActiveLog, onLogClick],
+	);
+
+	const handleCloseLogDetail: DrawerProps['onClose'] = useCallback(
+		(
+			event: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>,
+		) => {
+			event.preventDefault();
+			event.stopPropagation();
+
+			onClearActiveLog();
+			setSelectedTab(undefined);
+		},
+		[onClearActiveLog],
 	);
 
 	const handleShowContext: MouseEventHandler<HTMLElement> = useCallback(
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-
-			onSetActiveLog?.(data, VIEW_TYPES.CONTEXT);
+			// handleSetActiveContextLog(data);
+			setSelectedTab(VIEW_TYPES.CONTEXT);
+			onSetActiveLog(data);
 		},
 		[data, onSetActiveLog],
 	);
@@ -159,7 +181,7 @@ function RawLogView({
 			$isDarkMode={isDarkMode}
 			$isReadOnly={isReadOnly}
 			$isHightlightedLog={isUrlHighlighted}
-			$isActiveLog={isActiveLog}
+			$isActiveLog={activeLog?.id === data.id || isActiveLog}
 			$isCustomHighlighted={isHighlighted}
 			$logType={logType}
 			fontSize={fontSize}
@@ -196,6 +218,17 @@ function RawLogView({
 					onLogCopy={onLogCopy}
 				/>
 			)}
+
+			{selectedTab && (
+				<LogDetail
+					selectedTab={selectedTab}
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					handleChangeSelectedView={handleChangeSelectedView}
+				/>
+			)}
 		</RawLogViewContainer>
 	);
 }

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

@@ -45,6 +45,9 @@ export const RawLogViewContainer = styled(Row)<{
 				: `margin: 2px 0;`}
 	}
 
+	${({ $isActiveLog, $logType }): string =>
+		getActiveLogBackground($isActiveLog, true, $logType)}
+
 	${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string =>
 		$isActiveLog
 			? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)

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

@@ -1,5 +1,4 @@
 import { MouseEvent } from 'react';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
@@ -17,11 +16,6 @@ export interface RawLogViewProps {
 	selectedFields?: IField[];
 	onLogClick?: (log: ILog, event: MouseEvent) => void;
 	handleChangeSelectedView?: ChangeViewFunctionType;
-	onSetActiveLog?: (
-		log: ILog,
-		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
-	) => void;
-	onClearActiveLog?: () => void;
 }
 
 export interface RawLogContentProps {

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -73,7 +73,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	enableRegexOption = false,
 	isDynamicVariable = false,
 	showRetryButton = true,
-	waitingMessage,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -1682,7 +1681,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{!loading &&
 						!errorMessage &&
 						!noDataMessage &&
-						!waitingMessage &&
 						!(showIncompleteDataMessage && isScrolledToBottom) && (
 							<section className="navigate">
 								<ArrowDown size={8} className="icons" />
@@ -1700,17 +1698,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
 					)}
-					{!loading && waitingMessage && (
-						<div className="navigation-loading">
-							<div className="navigation-icons">
-								<LoadingOutlined />
-							</div>
-							<div className="navigation-text" title={waitingMessage}>
-								{waitingMessage}
-							</div>
-						</div>
-					)}
-					{errorMessage && !loading && !waitingMessage && (
+					{errorMessage && !loading && (
 						<div className="navigation-error">
 							<div className="navigation-text">
 								{errorMessage || SOMETHING_WENT_WRONG}
@@ -1732,7 +1720,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{showIncompleteDataMessage &&
 						isScrolledToBottom &&
 						!loading &&
-						!waitingMessage &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
 								Don&apos;t see the value? Use search
@@ -1775,7 +1762,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		isDarkMode,
 		isDynamicVariable,
 		showRetryButton,
-		waitingMessage,
 	]);
 
 	// Custom handler for dropdown visibility changes

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -63,7 +63,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	showIncompleteDataMessage = false,
 	showRetryButton = true,
 	isDynamicVariable = false,
-	waitingMessage,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -569,7 +568,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{!loading &&
 						!errorMessage &&
 						!noDataMessage &&
-						!waitingMessage &&
 						!(showIncompleteDataMessage && isScrolledToBottom) && (
 							<section className="navigate">
 								<ArrowDown size={8} className="icons" />
@@ -585,16 +583,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
 					)}
-					{!loading && waitingMessage && (
-						<div className="navigation-loading">
-							<div className="navigation-icons">
-								<LoadingOutlined />
-							</div>
-							<div className="navigation-text" title={waitingMessage}>
-								{waitingMessage}
-							</div>
-						</div>
-					)}
 					{errorMessage && !loading && (
 						<div className="navigation-error">
 							<div className="navigation-text">
@@ -617,7 +605,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{showIncompleteDataMessage &&
 						isScrolledToBottom &&
 						!loading &&
-						!waitingMessage &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
 								Don&apos;t see the value? Use search
@@ -654,7 +641,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		showRetryButton,
 		isDarkMode,
 		isDynamicVariable,
-		waitingMessage,
 	]);
 
 	// Handle dropdown visibility changes

frontend/src/components/NewSelect/__test__/VariableItem.integration.test.tsx

@@ -78,10 +78,12 @@ function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
 describe('VariableItem Integration Tests', () => {
 	let user: ReturnType<typeof userEvent.setup>;
 	let mockOnValueUpdate: jest.Mock;
+	let mockSetVariablesToGetUpdated: jest.Mock;
 
 	beforeEach(() => {
 		user = userEvent.setup();
 		mockOnValueUpdate = jest.fn();
+		mockSetVariablesToGetUpdated = jest.fn();
 		jest.clearAllMocks();
 	});
 
@@ -100,6 +102,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -145,6 +150,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -187,6 +195,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -236,6 +247,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -258,6 +272,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -291,6 +308,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -324,6 +344,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -346,6 +369,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -379,6 +405,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -432,6 +461,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -476,6 +508,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -513,6 +548,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -544,6 +582,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);

frontend/src/components/NewSelect/types.ts

@@ -30,7 +30,6 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	showIncompleteDataMessage?: boolean;
 	showRetryButton?: boolean;
 	isDynamicVariable?: boolean;
-	waitingMessage?: string;
 }
 
 export interface CustomTagProps {
@@ -67,5 +66,4 @@ export interface CustomMultiSelectProps
 	enableRegexOption?: boolean;
 	isDynamicVariable?: boolean;
 	showRetryButton?: boolean;
-	waitingMessage?: string;
 }

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -282,11 +282,11 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 						size="small"
 						style={{ marginLeft: 'auto' }}
 						checked={showIP ?? true}
-						onChange={(checked): void => {
+						onClick={(): void => {
 							logEvent('API Monitoring: Show IP addresses clicked', {
-								showIP: checked,
+								showIP: !(showIP ?? true),
 							});
-							setParams({ showIP: checked });
+							setParams({ showIP });
 						}}
 					/>
 				</div>

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -1,8 +1,4 @@
 import { ENVIRONMENT } from 'constants/env';
-import {
-	ApiMonitoringParams,
-	useApiMonitoringParams,
-} from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
 	otherFiltersResponse,
@@ -22,15 +18,10 @@ import { QuickFiltersConfig } from './constants';
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: jest.fn(),
 }));
-jest.mock('container/ApiMonitoring/queryParams');
 
 const handleFilterVisibilityChange = jest.fn();
 const redirectWithQueryBuilderData = jest.fn();
 const putHandler = jest.fn();
-const mockSetApiMonitoringParams = jest.fn() as jest.MockedFunction<
-	(newParams: Partial<ApiMonitoringParams>, replace?: boolean) => void
->;
-const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);
 
 const BASE_URL = ENVIRONMENT.baseURL;
 const SIGNAL = SignalType.LOGS;
@@ -93,28 +84,6 @@ TestQuickFilters.defaultProps = {
 	config: QuickFiltersConfig,
 };
 
-function TestQuickFiltersApiMonitoring({
-	signal = SignalType.LOGS,
-	config = QuickFiltersConfig,
-}: {
-	signal?: SignalType;
-	config?: IQuickFiltersConfig[];
-}): JSX.Element {
-	return (
-		<QuickFilters
-			source={QuickFiltersSource.API_MONITORING}
-			config={config}
-			handleFilterVisibilityChange={handleFilterVisibilityChange}
-			signal={signal}
-		/>
-	);
-}
-
-TestQuickFiltersApiMonitoring.defaultProps = {
-	signal: '',
-	config: QuickFiltersConfig,
-};
-
 beforeAll(() => {
 	server.listen();
 });
@@ -143,10 +112,6 @@ beforeEach(() => {
 		lastUsedQuery: 0,
 		redirectWithQueryBuilderData,
 	});
-	mockUseApiMonitoringParams.mockReturnValue([
-		{ showIP: true } as ApiMonitoringParams,
-		mockSetApiMonitoringParams,
-	]);
 	setupServer();
 });
 
@@ -286,24 +251,6 @@ describe('Quick Filters', () => {
 			);
 		});
 	});
-	it('toggles Show IP addresses and updates API Monitoring params', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<TestQuickFiltersApiMonitoring />);
-
-		// Switch should be rendered and initially checked
-		expect(screen.getByText('Show IP addresses')).toBeInTheDocument();
-		const toggle = screen.getByRole('switch');
-		expect(toggle).toHaveAttribute('aria-checked', 'true');
-
-		await user.click(toggle);
-
-		await waitFor(() => {
-			expect(mockSetApiMonitoringParams).toHaveBeenCalledWith(
-				expect.objectContaining({ showIP: false }),
-			);
-		});
-	});
 });
 
 describe('Quick Filters with custom filters', () => {

frontend/src/constants/routes.ts

@@ -55,7 +55,6 @@ const ROUTES = {
 	LOGS_INDEX_FIELDS: '/logs-explorer/index-fields',
 	TRACE_EXPLORER: '/trace-explorer',
 	BILLING: '/settings/billing',
-	ROLES_SETTINGS: '/settings/roles',
 	SUPPORT: '/support',
 	LOGS_SAVE_VIEWS: '/logs/saved-views',
 	TRACES_SAVE_VIEWS: '/traces/saved-views',

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/constants.ts

@@ -14,6 +14,6 @@ export const VIEW_TYPES = {
 export const SPAN_ATTRIBUTES = {
 	URL_PATH: 'http.url',
 	RESPONSE_STATUS_CODE: 'response_status_code',
-	SERVER_NAME: 'http_host',
+	SERVER_NAME: 'net.peer.name',
 	SERVER_PORT: 'net.peer.port',
 } as const;

frontend/src/container/ApiMonitoring/__tests__/TopErrors.test.tsx

@@ -4,7 +4,6 @@ import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen, waitFor, within } from 'tests/test-utils';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
 import TopErrors from '../Explorer/Domains/DomainDetails/TopErrors';
 import { getTopErrorsQueryPayload } from '../utils';
 
@@ -216,7 +215,7 @@ describe('TopErrors', () => {
 					value: 'true',
 				}),
 				expect.objectContaining({
-					key: expect.objectContaining({ key: SPAN_ATTRIBUTES.SERVER_NAME }),
+					key: expect.objectContaining({ key: 'net.peer.name' }),
 					op: '=',
 					value: 'test-domain',
 				}),

frontend/src/container/ApiMonitoring/utils.tsx

@@ -638,7 +638,7 @@ export const getEndPointsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
-											type: '',
+											type: 'tag',
 										},
 										op: '=',
 										value: domainName,
@@ -685,7 +685,7 @@ export const getEndPointsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
-											type: '',
+											type: 'tag',
 										},
 										op: '=',
 										value: domainName,
@@ -733,7 +733,7 @@ export const getEndPointsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
-											type: '',
+											type: 'tag',
 										},
 										op: '=',
 										value: domainName,
@@ -780,7 +780,7 @@ export const getEndPointsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
-											type: '',
+											type: 'tag',
 										},
 										op: '=',
 										value: domainName,
@@ -1302,7 +1302,7 @@ export const getTopErrorsCoRelationQueryFilters = (
 		{
 			id: 'e8a043b7',
 			key: {
-				key: SPAN_ATTRIBUTES.SERVER_NAME,
+				key: 'net.peer.name',
 				dataType: DataTypes.String,
 				type: '',
 			},
@@ -2198,7 +2198,7 @@ export const getEndPointZeroStateQueryPayload = (
 									key: {
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										dataType: DataTypes.String,
-										type: '',
+										type: 'tag',
 									},
 									op: '=',
 									value: domainName,
@@ -2793,7 +2793,7 @@ export const getStatusCodeBarChartWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
-									type: '',
+									type: 'tag',
 								},
 								op: '=',
 								value: domainName,

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -9,6 +9,74 @@
 		padding: 0px;
 	}
 
+	.dashboard-header {
+		border-bottom: 1px solid var(--bg-slate-400);
+		display: flex;
+		justify-content: space-between;
+		gap: 16px;
+		align-items: center;
+		padding: 0 8px;
+		box-sizing: border-box;
+
+		.dashboard-breadcrumbs {
+			width: 100%;
+			height: 48px;
+			display: flex;
+			gap: 6px;
+			align-items: center;
+			max-width: 80%;
+
+			.dashboard-btn {
+				display: flex;
+				align-items: center;
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+				padding: 0px;
+				height: 20px;
+			}
+
+			.dashboard-btn:hover {
+				background-color: unset;
+			}
+
+			.id-btn {
+				display: flex;
+				align-items: center;
+				padding: 0px 2px;
+				border-radius: 2px;
+				background: rgba(113, 144, 249, 0.1);
+				color: var(--bg-robin-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				height: 20px;
+
+				max-width: calc(100% - 120px);
+
+				span {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+
+				.ant-btn-icon {
+					margin-inline-end: 4px;
+				}
+			}
+			.id-btn:hover {
+				background: rgba(113, 144, 249, 0.1);
+				color: var(--bg-robin-300);
+			}
+		}
+	}
+
 	.dashboard-details {
 		display: flex;
 		justify-content: space-between;
@@ -467,6 +535,15 @@
 	.dashboard-description-container {
 		color: var(--bg-ink-400);
 
+		.dashboard-header {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+			.dashboard-breadcrumbs {
+				.dashboard-btn {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+
 		.dashboard-details {
 			.left-section {
 				.dashboard-title {

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -16,7 +16,9 @@ import {
 } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
 import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
@@ -25,6 +27,7 @@ import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import {
 	Check,
@@ -34,6 +37,7 @@ import {
 	FolderKanban,
 	Fullscreen,
 	Globe,
+	LayoutGrid,
 	LockKeyhole,
 	PenLine,
 	X,
@@ -47,7 +51,6 @@ import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 import { v4 as uuid } from 'uuid';
 
-import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardGraphSlider from '../ComponentsSlider';
 import DashboardSettings from '../DashboardSettings';
 import { Base64Icons } from '../DashboardSettings/General/utils';
@@ -68,6 +71,7 @@ interface DashboardDescriptionProps {
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
 	const { handle } = props;
 	const {
 		selectedDashboard,
@@ -76,6 +80,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		layouts,
 		setLayouts,
 		isDashboardLocked,
+		listSortOrder,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
 		setSelectedRowWidgetId,
@@ -287,6 +292,17 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		});
 	}
 
+	function goToListPage(): void {
+		const urlParams = new URLSearchParams();
+		urlParams.set('columnKey', listSortOrder.columnKey as string);
+		urlParams.set('order', listSortOrder.order as string);
+		urlParams.set('page', listSortOrder.pagination as string);
+		urlParams.set('search', listSortOrder.search as string);
+
+		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
+		safeNavigate(generatedUrl);
+	}
+
 	const {
 		data: publicDashboardResponse,
 		isLoading: isLoadingPublicDashboardData,
@@ -335,7 +351,32 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 	return (
 		<Card className="dashboard-description-container">
-			<DashboardHeader />
+			<div className="dashboard-header">
+				<section className="dashboard-breadcrumbs">
+					<Button
+						type="text"
+						icon={<LayoutGrid size={14} />}
+						className="dashboard-btn"
+						onClick={(): void => goToListPage()}
+					>
+						Dashboard /
+					</Button>
+					<Button type="text" className="id-btn dashboard-name-btn">
+						<img
+							src={image}
+							alt="dashboard-icon"
+							style={{ height: '14px', width: '14px' }}
+						/>
+						{title}
+					</Button>
+				</section>
+
+				<HeaderRightSection
+					enableAnnouncements={false}
+					enableShare
+					enableFeedback
+				/>
+			</div>
 			<section className="dashboard-details">
 				<div className="left-section">
 					<img src={image} alt="dashboard-img" className="dashboard-img" />

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.styles.scss

@@ -50,10 +50,6 @@
 	}
 
 	.variable-select {
-		.ant-select-selector {
-			overflow-y: hidden !important;
-		}
-
 		.ant-select-item {
 			display: flex;
 			align-items: center;

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -9,15 +9,11 @@ import {
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
-import {
-	enqueueDescendantsOfVariable,
-	enqueueFetchOfAllVariables,
-	initializeVariableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
 import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { onUpdateVariableNode } from './util';
 import VariableItem from './VariableItem';
 
 import './DashboardVariableSelection.styles.scss';
@@ -26,6 +22,8 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const {
 		setSelectedDashboard,
 		updateLocalStorageDashboardVariables,
+		variablesToGetUpdated,
+		setVariablesToGetUpdated,
 	} = useDashboard();
 
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
@@ -57,14 +55,11 @@ function DashboardVariableSelection(): JSX.Element | null {
 		[dependencyData?.order],
 	);
 
-	// Initialize fetch store then start a new fetch cycle.
-	// Runs on dependency order changes, and time range changes.
+	// Trigger refetch when dependency order changes or global time changes
 	useEffect(() => {
-		const allVariableNames = sortedVariablesArray
-			.map((v) => v.name)
-			.filter((name): name is string => !!name);
-		initializeVariableFetchStore(allVariableNames);
-		enqueueFetchOfAllVariables();
+		if (dependencyData?.order && dependencyData.order.length > 0) {
+			setVariablesToGetUpdated(dependencyData?.order || []);
+		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dependencyOrderKey, minTime, maxTime]);
 
@@ -126,14 +121,29 @@ function DashboardVariableSelection(): JSX.Element | null {
 				return prev;
 			});
 
-			// Cascade: enqueue query-type descendants for refetching
-			enqueueDescendantsOfVariable(name);
+			if (dependencyData) {
+				const updatedVariables: string[] = [];
+				onUpdateVariableNode(
+					name,
+					dependencyData.graph,
+					dependencyData.order,
+					(node) => updatedVariables.push(node),
+				);
+				setVariablesToGetUpdated((prev) => [
+					...new Set([...prev, ...updatedVariables.filter((v) => v !== name)]),
+				]);
+			} else {
+				setVariablesToGetUpdated((prev) => prev.filter((v) => v !== name));
+			}
 		},
 		[
+			// This can be removed
 			dashboardVariables,
 			updateLocalStorageDashboardVariables,
+			dependencyData,
 			updateUrlVariable,
 			setSelectedDashboard,
+			setVariablesToGetUpdated,
 		],
 	);
 
@@ -148,6 +158,9 @@ function DashboardVariableSelection(): JSX.Element | null {
 						existingVariables={dashboardVariables}
 						variableData={variable}
 						onValueUpdate={onValueUpdate}
+						variablesToGetUpdated={variablesToGetUpdated}
+						setVariablesToGetUpdated={setVariablesToGetUpdated}
+						dependencyData={dependencyData}
 					/>
 				);
 			})}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableInput.tsx

@@ -2,25 +2,18 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import useDebounce from 'hooks/useDebounce';
+import { isEmpty } from 'lodash-es';
 import { AppState } from 'store/reducers';
-import { SuccessResponseV2 } from 'types/api';
-import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
 
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import {
-	buildExistingDynamicVariableQuery,
-	extractErrorMessage,
-	getOptionsForDynamicVariable,
-	mergeUniqueStrings,
-	settleVariableFetch,
-} from './util';
+import { getOptionsForDynamicVariable } from './util';
 import { VariableItemProps } from './VariableItem';
 import { dynamicVariableSelectStrategy } from './variableSelectStrategy/dynamicVariableSelectStrategy';
 
@@ -31,6 +24,7 @@ type DynamicVariableInputProps = Pick<
 	'variableData' | 'onValueUpdate' | 'existingVariables'
 >;
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function DynamicVariableInput({
 	variableData,
 	onValueUpdate,
@@ -61,8 +55,14 @@ function DynamicVariableInput({
 
 	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
 
+	// Build a memoized list of all currently available option strings (normalized + related)
 	const allAvailableOptionStrings = useMemo(
-		() => mergeUniqueStrings(optionsData, relatedValues),
+		() => [
+			...new Set([
+				...optionsData.map((v) => v.toString()),
+				...relatedValues.map((v) => v.toString()),
+			]),
+		],
 		[optionsData, relatedValues],
 	);
 
@@ -104,24 +104,67 @@ function DynamicVariableInput({
 		(state) => state.globalTime,
 	);
 
-	const {
-		variableFetchCycleId,
-		isVariableSettled,
-		isVariableFetching,
-		hasVariableFetchedOnce,
-		isVariableWaitingForDependencies,
-		variableDependencyWaitMessage,
-	} = useVariableFetchState(variableData.name || '');
+	// existing query is the query made from the other dynamic variables around this one with there current values
+	// for e.g. k8s.namespace.name IN ["zeus", "gene"] AND doc_op_type IN ["test"]
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const existingQuery = useMemo(() => {
+		if (!existingVariables || !variableData.dynamicVariablesAttribute) {
+			return '';
+		}
 
-	const existingQuery = useMemo(
-		() =>
-			buildExistingDynamicVariableQuery(
-				existingVariables,
-				variableData.id,
-				!!variableData.dynamicVariablesAttribute,
-			),
-		[existingVariables, variableData.id, variableData.dynamicVariablesAttribute],
-	);
+		const queryParts: string[] = [];
+
+		Object.entries(existingVariables).forEach(([, variable]) => {
+			// Skip the current variable being processed
+			if (variable.id === variableData.id) {
+				return;
+			}
+
+			// Only include dynamic variables that have selected values and are not selected as ALL
+			if (
+				variable.type === 'DYNAMIC' &&
+				variable.dynamicVariablesAttribute &&
+				variable.selectedValue &&
+				!isEmpty(variable.selectedValue) &&
+				(variable.showALLOption ? !variable.allSelected : true)
+			) {
+				const attribute = variable.dynamicVariablesAttribute;
+				const values = Array.isArray(variable.selectedValue)
+					? variable.selectedValue
+					: [variable.selectedValue];
+
+				// Filter out empty values and convert to strings
+				const validValues = values
+					.filter((val) => val !== null && val !== undefined && val !== '')
+					.map((val) => val.toString());
+
+				if (validValues.length > 0) {
+					// Format values for query - wrap strings in quotes, keep numbers as is
+					const formattedValues = validValues.map((val) => {
+						// Check if value is a number
+						const numValue = Number(val);
+						if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
+							return val; // Keep as number
+						}
+						// Escape single quotes and wrap in quotes
+						return `'${val.replace(/'/g, "\\'")}'`;
+					});
+
+					if (formattedValues.length === 1) {
+						queryParts.push(`${attribute} = ${formattedValues[0]}`);
+					} else {
+						queryParts.push(`${attribute} IN [${formattedValues.join(', ')}]`);
+					}
+				}
+			}
+		});
+
+		return queryParts.join(' AND ');
+	}, [
+		existingVariables,
+		variableData.id,
+		variableData.dynamicVariablesAttribute,
+	]);
 
 	// Wrap the hook's onDropdownVisibleChange to also track isDropdownOpen and handle cleanup
 	const handleSelectDropdownVisibilityChange = useCallback(
@@ -139,73 +182,6 @@ function DynamicVariableInput({
 		[onDropdownVisibleChange, optionsData, originalRelatedValues],
 	);
 
-	const handleQuerySuccess = useCallback(
-		(data: SuccessResponseV2<FieldValueResponse>): void => {
-			const newNormalizedValues = data.data?.normalizedValues || [];
-			const newRelatedValues = data.data?.relatedValues || [];
-
-			if (!debouncedApiSearchText) {
-				setOptionsData(newNormalizedValues);
-				setIsComplete(data.data?.complete || false);
-			}
-			setFilteredOptionsData(newNormalizedValues);
-			setRelatedValues(newRelatedValues);
-			setOriginalRelatedValues(newRelatedValues);
-
-			// Sync temp selection with latest API values when ALL is active and dropdown is open
-			if (variableData.allSelected && isDropdownOpen) {
-				const latestValues = mergeUniqueStrings(
-					newNormalizedValues,
-					newRelatedValues,
-				);
-
-				const currentStrings = Array.isArray(tempSelection)
-					? tempSelection.map((v) => v.toString())
-					: tempSelection
-					? [tempSelection.toString()]
-					: [];
-
-				const areSame =
-					currentStrings.length === latestValues.length &&
-					latestValues.every((v) => currentStrings.includes(v));
-
-				if (!areSame) {
-					setTempSelection(latestValues);
-				}
-			}
-
-			// Apply default if no value is selected (e.g., new variable, first load)
-			if (!debouncedApiSearchText) {
-				applyDefaultIfNeeded(
-					mergeUniqueStrings(newNormalizedValues, newRelatedValues),
-				);
-			}
-
-			settleVariableFetch(variableData.name, 'complete');
-		},
-		[
-			debouncedApiSearchText,
-			variableData.allSelected,
-			variableData.name,
-			isDropdownOpen,
-			tempSelection,
-			setTempSelection,
-			applyDefaultIfNeeded,
-		],
-	);
-
-	const handleQueryError = useCallback(
-		(error: { message?: string } | null): void => {
-			if (error) {
-				setErrorMessage(extractErrorMessage(error));
-				setIsRetryableError(checkIfRetryableError(error));
-			}
-
-			settleVariableFetch(variableData.name, 'failure');
-		},
-		[variableData.name],
-	);
-
 	const { isLoading, refetch } = useQuery(
 		[
 			REACT_QUERY_KEY.DASHBOARD_BY_ID,
@@ -216,22 +192,13 @@ function DynamicVariableInput({
 			debouncedApiSearchText,
 			variableData.dynamicVariablesSource,
 			variableData.dynamicVariablesAttribute,
-			variableFetchCycleId,
 		],
 		{
-			/*
-			 * enabled if
-			 * - we have dynamic variable source and attribute defined (ALWAYS)
-			 * - AND
-			 *   - we're either still fetching variable options
-			 *   - OR
-			 *   - if variable is in idle state and we have already fetched options for it
-			 **/
 			enabled:
+				variableData.type === 'DYNAMIC' &&
 				!!variableData.dynamicVariablesSource &&
-				!!variableData.dynamicVariablesAttribute &&
-				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
-			queryFn: ({ signal }) =>
+				!!variableData.dynamicVariablesAttribute,
+			queryFn: () =>
 				getFieldValues(
 					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
 						? undefined
@@ -244,10 +211,70 @@ function DynamicVariableInput({
 					minTime,
 					maxTime,
 					existingQuery,
-					signal,
 				),
-			onSuccess: handleQuerySuccess,
-			onError: handleQueryError,
+			onSuccess: (data) => {
+				const newNormalizedValues = data.data?.normalizedValues || [];
+				const newRelatedValues = data.data?.relatedValues || [];
+
+				if (!debouncedApiSearchText) {
+					setOptionsData(newNormalizedValues);
+					setIsComplete(data.data?.complete || false);
+				}
+				setFilteredOptionsData(newNormalizedValues);
+				setRelatedValues(newRelatedValues);
+				setOriginalRelatedValues(newRelatedValues);
+
+				// Only run auto-check logic when necessary to avoid performance issues
+				if (variableData.allSelected && isDropdownOpen) {
+					// Build the latest full list from API (normalized + related)
+					const latestValues = [
+						...new Set([
+							...newNormalizedValues.map((v) => v.toString()),
+							...newRelatedValues.map((v) => v.toString()),
+						]),
+					];
+
+					// Update temp selection to exactly reflect latest API values when ALL is active
+					const currentStrings = Array.isArray(tempSelection)
+						? tempSelection.map((v) => v.toString())
+						: tempSelection
+						? [tempSelection.toString()]
+						: [];
+					const areSame =
+						currentStrings.length === latestValues.length &&
+						latestValues.every((v) => currentStrings.includes(v));
+					if (!areSame) {
+						setTempSelection(latestValues);
+					}
+				}
+
+				// Apply default if no value is selected (e.g., new variable, first load)
+				if (!debouncedApiSearchText) {
+					const allNewOptions = [
+						...new Set([
+							...newNormalizedValues.map((v) => v.toString()),
+							...newRelatedValues.map((v) => v.toString()),
+						]),
+					];
+					applyDefaultIfNeeded(allNewOptions);
+				}
+			},
+			onError: (error: any) => {
+				if (error) {
+					let message = SOMETHING_WENT_WRONG;
+					if (error?.message) {
+						message = error?.message;
+					} else {
+						message =
+							'Please make sure configuration is valid and you have required setup and permissions';
+					}
+					setErrorMessage(message);
+
+					// Check if error is retryable (5xx) or not (4xx)
+					const isRetryable = checkIfRetryableError(error);
+					setIsRetryableError(isRetryable);
+				}
+			},
 		},
 	);
 
@@ -309,8 +336,6 @@ function DynamicVariableInput({
 			showRetryButton={isRetryableError}
 			showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
 			onSearch={handleSearch}
-			waiting={isVariableWaitingForDependencies}
-			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx

@@ -3,9 +3,8 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import sortValues from 'lib/dashboardVariables/sortVariableValues';
-import { isArray, isEmpty, isString } from 'lodash-es';
+import { isArray, isString } from 'lodash-es';
 import { AppState } from 'store/reducers';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -13,18 +12,26 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { variablePropsToPayloadVariables } from '../utils';
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { areArraysEqual, settleVariableFetch } from './util';
+import { areArraysEqual, checkAPIInvocation } from './util';
 import { VariableItemProps } from './VariableItem';
 import { queryVariableSelectStrategy } from './variableSelectStrategy/queryVariableSelectStrategy';
 
 type QueryVariableInputProps = Pick<
 	VariableItemProps,
-	'variableData' | 'existingVariables' | 'onValueUpdate'
+	| 'variableData'
+	| 'existingVariables'
+	| 'onValueUpdate'
+	| 'variablesToGetUpdated'
+	| 'setVariablesToGetUpdated'
+	| 'dependencyData'
 >;
 
 function QueryVariableInput({
 	variableData,
 	existingVariables,
+	variablesToGetUpdated,
+	setVariablesToGetUpdated,
+	dependencyData,
 	onValueUpdate,
 }: QueryVariableInputProps): JSX.Element {
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
@@ -36,15 +43,6 @@ function QueryVariableInput({
 		(state) => state.globalTime,
 	);
 
-	const {
-		variableFetchCycleId,
-		isVariableSettled,
-		isVariableFetching,
-		hasVariableFetchedOnce,
-		isVariableWaitingForDependencies,
-		variableDependencyWaitMessage,
-	} = useVariableFetchState(variableData.name || '');
-
 	const {
 		tempSelection,
 		setTempSelection,
@@ -62,6 +60,16 @@ function QueryVariableInput({
 		strategy: queryVariableSelectStrategy,
 	});
 
+	const validVariableUpdate = useCallback((): boolean => {
+		if (!variableData.name) {
+			return false;
+		}
+		return Boolean(
+			variablesToGetUpdated.length &&
+				variablesToGetUpdated[0] === variableData.name,
+		);
+	}, [variableData.name, variablesToGetUpdated]);
+
 	const getOptions = useCallback(
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(variablesRes: VariableResponseProps | null): void => {
@@ -95,24 +103,18 @@ function QueryVariableInput({
 							valueNotInList = true;
 						}
 
-						if (variableData.name && (valueNotInList || variableData.allSelected)) {
+						// variablesData.allSelected is added for the case where on change of options we need to update the
+						// local storage
+						if (
+							variableData.name &&
+							(validVariableUpdate() || valueNotInList || variableData.allSelected)
+						) {
 							if (
 								variableData.allSelected &&
 								variableData.multiSelect &&
 								variableData.showALLOption
 							) {
-								if (
-									variableData.name &&
-									variableData.id &&
-									!isEmpty(variableData.selectedValue)
-								) {
-									onValueUpdate(
-										variableData.name,
-										variableData.id,
-										newOptionsData,
-										true,
-									);
-								}
+								onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
 
 								// Update tempSelection to maintain ALL state when dropdown is open
 								if (tempSelection !== undefined) {
@@ -130,11 +132,7 @@ function QueryVariableInput({
 										newOptionsData.every((option) => selectedValue.includes(option));
 								}
 
-								if (
-									variableData.name &&
-									variableData.id &&
-									!isEmpty(variableData.selectedValue)
-								) {
+								if (variableData.name && variableData.id) {
 									onValueUpdate(variableData.name, variableData.id, value, allSelected);
 								}
 							}
@@ -143,6 +141,10 @@ function QueryVariableInput({
 						setOptionsData(newOptionsData);
 						// Apply default if no value is selected (e.g., new variable, first load)
 						applyDefaultIfNeeded(newOptionsData);
+					} else {
+						setVariablesToGetUpdated((prev) =>
+							prev.filter((name) => name !== variableData.name),
+						);
 					}
 				}
 			} catch (e) {
@@ -155,6 +157,8 @@ function QueryVariableInput({
 			onValueUpdate,
 			tempSelection,
 			setTempSelection,
+			validVariableUpdate,
+			setVariablesToGetUpdated,
 			applyDefaultIfNeeded,
 		],
 	);
@@ -165,28 +169,27 @@ function QueryVariableInput({
 			variableData.name || '',
 			`${minTime}`,
 			`${maxTime}`,
-			variableFetchCycleId,
+			JSON.stringify(dependencyData?.order),
 		],
 		{
-			/*
-			 * enabled if
-			 *   - we're either still fetching variable options
-			 *   - OR
-			 *   - if variable is in idle state and we have already fetched options for it
-			 **/
-			enabled: isVariableFetching || (isVariableSettled && hasVariableFetchedOnce),
-			queryFn: ({ signal }) =>
-				dashboardVariablesQuery(
-					{
-						query: variableData.queryValue || '',
-						variables: variablePropsToPayloadVariables(existingVariables),
-					},
-					signal,
+			enabled:
+				variableData &&
+				checkAPIInvocation(
+					variablesToGetUpdated,
+					variableData,
+					dependencyData?.parentDependencyGraph,
 				),
+			queryFn: () =>
+				dashboardVariablesQuery({
+					query: variableData.queryValue || '',
+					variables: variablePropsToPayloadVariables(existingVariables),
+				}),
 			refetchOnWindowFocus: false,
 			onSuccess: (response) => {
 				getOptions(response.payload);
-				settleVariableFetch(variableData.name, 'complete');
+				setVariablesToGetUpdated((prev) =>
+					prev.filter((v) => v !== variableData.name),
+				);
 			},
 			onError: (error: {
 				details: {
@@ -203,7 +206,9 @@ function QueryVariableInput({
 					}
 					setErrorMessage(message);
 				}
-				settleVariableFetch(variableData.name, 'failure');
+				setVariablesToGetUpdated((prev) =>
+					prev.filter((v) => v !== variableData.name),
+				);
 			},
 		},
 	);
@@ -237,8 +242,6 @@ function QueryVariableInput({
 			loading={isLoading}
 			errorMessage={errorMessage}
 			onRetry={handleRetry}
-			waiting={isVariableWaitingForDependencies}
-			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

frontend/src/container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput.tsx

@@ -28,8 +28,6 @@ interface SelectVariableInputProps {
 	showRetryButton?: boolean;
 	showIncompleteDataMessage?: boolean;
 	onSearch?: (searchTerm: string) => void;
-	waiting?: boolean;
-	waitingMessage?: string;
 }
 
 const MAX_TAG_DISPLAY_VALUES = 10;
@@ -67,7 +65,6 @@ function SelectVariableInput({
 	showRetryButton,
 	showIncompleteDataMessage,
 	onSearch,
-	waitingMessage,
 }: SelectVariableInputProps): JSX.Element {
 	const commonProps = useMemo(
 		() => ({
@@ -81,6 +78,7 @@ function SelectVariableInput({
 			className: 'variable-select',
 			popupClassName: 'dropdown-styles',
 			getPopupContainer: popupContainer,
+			style: SelectItemStyle,
 			showSearch: true,
 			bordered: false,
 
@@ -88,8 +86,6 @@ function SelectVariableInput({
 			'data-testid': 'variable-select',
 			onChange,
 			loading,
-			waitingMessage,
-			style: SelectItemStyle,
 			options,
 			errorMessage,
 			onRetry,
@@ -105,7 +101,6 @@ function SelectVariableInput({
 			defaultValue,
 			onChange,
 			loading,
-			waitingMessage,
 			options,
 			value,
 			errorMessage,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.test.tsx

@@ -47,6 +47,14 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -61,6 +69,14 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -76,6 +92,14 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -109,6 +133,14 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -131,6 +163,14 @@ describe('VariableItem', () => {
 					variableData={customVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -145,6 +185,14 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
+import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import CustomVariableInput from './CustomVariableInput';
@@ -20,12 +21,18 @@ export interface VariableItemProps {
 		allSelected: boolean,
 		haveCustomValuesSelected?: boolean,
 	) => void;
+	variablesToGetUpdated: string[];
+	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
+	dependencyData: IDependencyData | null;
 }
 
 function VariableItem({
 	variableData,
 	onValueUpdate,
 	existingVariables,
+	variablesToGetUpdated,
+	setVariablesToGetUpdated,
+	dependencyData,
 }: VariableItemProps): JSX.Element {
 	const { name, description, type: variableType } = variableData;
 
@@ -58,6 +65,9 @@ function VariableItem({
 						variableData={variableData}
 						onValueUpdate={onValueUpdate}
 						existingVariables={existingVariables}
+						variablesToGetUpdated={variablesToGetUpdated}
+						setVariablesToGetUpdated={setVariablesToGetUpdated}
+						dependencyData={dependencyData}
 					/>
 				)}
 				{variableType === 'DYNAMIC' && (

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/DynamicVariableInput.test.tsx

@@ -7,19 +7,6 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import DynamicVariableInput from '../DynamicVariableInput';
 
-// Mock useVariableFetchState to return "fetching" state so useQuery is enabled
-jest.mock('hooks/dashboard/useVariableFetchState', () => ({
-	useVariableFetchState: (): Record<string, unknown> => ({
-		variableFetchCycleId: 0,
-		variableFetchState: 'loading',
-		isVariableSettled: false,
-		isVariableFetching: true,
-		hasVariableFetchedOnce: false,
-		isVariableWaitingForDependencies: false,
-		variableDependencyWaitMessage: '',
-	}),
-}));
-
 // Don't mock the components - use real ones
 
 // Mock for useQuery
@@ -230,10 +217,9 @@ describe('DynamicVariableInput Component', () => {
 				'',
 				'Traces',
 				'service.name',
-				0, // variableFetchCycleId
 			],
 			expect.objectContaining({
-				enabled: true, // isVariableFetching is true from mock
+				enabled: true, // Type is 'DYNAMIC'
 				queryFn: expect.any(Function),
 				onSuccess: expect.any(Function),
 				onError: expect.any(Function),

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/VariableItem.defaulting.behavior.test.tsx

@@ -8,6 +8,14 @@ import '@testing-library/jest-dom/extend-expect';
 import VariableItem from '../VariableItem';
 
 const mockOnValueUpdate = jest.fn();
+const mockSetVariablesToGetUpdated = jest.fn();
+
+const baseDependencyData = {
+	order: [],
+	graph: {},
+	parentDependencyGraph: {},
+	hasCycle: false,
+};
 
 const TEST_VARIABLE_ID = 'test_variable';
 const VARIABLE_SELECT_TESTID = 'variable-select';
@@ -23,6 +31,9 @@ const renderVariableItem = (
 				variableData={variableData}
 				existingVariables={{}}
 				onValueUpdate={mockOnValueUpdate}
+				variablesToGetUpdated={[]}
+				setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+				dependencyData={baseDependencyData}
 			/>
 		</MockQueryClientProvider>,
 	);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/dashboardVariables.test.tsx

@@ -2,12 +2,14 @@ import {
 	buildDependencies,
 	buildDependencyGraph,
 	buildParentDependencyGraph,
+	checkAPIInvocation,
 	onUpdateVariableNode,
 	VariableGraph,
 } from '../util';
 import {
 	buildDependenciesMock,
 	buildGraphMock,
+	checkAPIInvocationMock,
 	onUpdateVariableNodeMock,
 } from './mock';
 
@@ -70,6 +72,97 @@ describe('dashboardVariables - utilities and processors', () => {
 		});
 	});
 
+	describe('checkAPIInvocation', () => {
+		const {
+			variablesToGetUpdated,
+			variableData,
+			parentDependencyGraph,
+		} = checkAPIInvocationMock;
+
+		const mockRootElement = {
+			name: 'deployment_environment',
+			key: '036a47cd-9ffc-47de-9f27-0329198964a8',
+			id: '036a47cd-9ffc-47de-9f27-0329198964a8',
+			modificationUUID: '5f71b591-f583-497c-839d-6a1590c3f60f',
+			selectedValue: 'production',
+			type: 'QUERY',
+			// ... other properties omitted for brevity
+		} as any;
+
+		describe('edge cases', () => {
+			it('should return false when variableData is empty', () => {
+				expect(
+					checkAPIInvocation(
+						variablesToGetUpdated,
+						variableData,
+						parentDependencyGraph,
+					),
+				).toBeFalsy();
+			});
+
+			it('should return true when parentDependencyGraph is empty', () => {
+				expect(
+					checkAPIInvocation(variablesToGetUpdated, variableData, {}),
+				).toBeFalsy();
+			});
+		});
+
+		describe('variable sequences', () => {
+			it('should return true for valid sequence', () => {
+				expect(
+					checkAPIInvocation(
+						['k8s_node_name', 'k8s_namespace_name'],
+						variableData,
+						parentDependencyGraph,
+					),
+				).toBeTruthy();
+			});
+
+			it('should return false for invalid sequence', () => {
+				expect(
+					checkAPIInvocation(
+						['k8s_cluster_name', 'k8s_node_name', 'k8s_namespace_name'],
+						variableData,
+						parentDependencyGraph,
+					),
+				).toBeFalsy();
+			});
+
+			it('should return false when variableData is not in sequence', () => {
+				expect(
+					checkAPIInvocation(
+						['deployment_environment', 'service_name', 'endpoint'],
+						variableData,
+						parentDependencyGraph,
+					),
+				).toBeFalsy();
+			});
+		});
+
+		describe('root element behavior', () => {
+			it('should return true for valid root element sequence', () => {
+				expect(
+					checkAPIInvocation(
+						[
+							'deployment_environment',
+							'service_name',
+							'endpoint',
+							'http_status_code',
+						],
+						mockRootElement,
+						parentDependencyGraph,
+					),
+				).toBeTruthy();
+			});
+
+			it('should return true for empty variablesToGetUpdated array', () => {
+				expect(
+					checkAPIInvocation([], mockRootElement, parentDependencyGraph),
+				).toBeTruthy();
+			});
+		});
+	});
+
 	describe('Graph Building Utilities', () => {
 		const { graph } = buildGraphMock;
 		const { variables } = buildDependenciesMock;
@@ -130,86 +223,10 @@ describe('dashboardVariables - utilities and processors', () => {
 					},
 					hasCycle: false,
 					cycleNodes: undefined,
-					transitiveDescendants: {
-						deployment_environment: ['service_name', 'endpoint', 'http_status_code'],
-						endpoint: ['http_status_code'],
-						environment: [],
-						http_status_code: [],
-						k8s_cluster_name: ['k8s_node_name', 'k8s_namespace_name'],
-						k8s_namespace_name: [],
-						k8s_node_name: ['k8s_namespace_name'],
-						service_name: ['endpoint', 'http_status_code'],
-					},
 				};
 
 				expect(buildDependencyGraph(graph)).toEqual(expected);
 			});
-
-			it('should return empty transitiveDescendants for an empty graph', () => {
-				const result = buildDependencyGraph({});
-				expect(result.transitiveDescendants).toEqual({});
-				expect(result.order).toEqual([]);
-				expect(result.hasCycle).toBe(false);
-			});
-
-			it('should compute transitiveDescendants for a linear chain (a -> b -> c)', () => {
-				const linearGraph: VariableGraph = {
-					a: ['b'],
-					b: ['c'],
-					c: [],
-				};
-				const result = buildDependencyGraph(linearGraph);
-				expect(result.transitiveDescendants).toEqual({
-					a: ['b', 'c'],
-					b: ['c'],
-					c: [],
-				});
-			});
-
-			it('should compute transitiveDescendants for a diamond dependency (a -> b, a -> c, b -> d, c -> d)', () => {
-				const diamondGraph: VariableGraph = {
-					a: ['b', 'c'],
-					b: ['d'],
-					c: ['d'],
-					d: [],
-				};
-				const result = buildDependencyGraph(diamondGraph);
-				expect(result.transitiveDescendants.a).toEqual(
-					expect.arrayContaining(['b', 'c', 'd']),
-				);
-				expect(result.transitiveDescendants.a).toHaveLength(3);
-				expect(result.transitiveDescendants.b).toEqual(['d']);
-				expect(result.transitiveDescendants.c).toEqual(['d']);
-				expect(result.transitiveDescendants.d).toEqual([]);
-			});
-
-			it('should handle disconnected components in transitiveDescendants', () => {
-				const disconnectedGraph: VariableGraph = {
-					a: ['b'],
-					b: [],
-					x: ['y'],
-					y: [],
-				};
-				const result = buildDependencyGraph(disconnectedGraph);
-				expect(result.transitiveDescendants.a).toEqual(['b']);
-				expect(result.transitiveDescendants.b).toEqual([]);
-				expect(result.transitiveDescendants.x).toEqual(['y']);
-				expect(result.transitiveDescendants.y).toEqual([]);
-			});
-
-			it('should return empty transitiveDescendants for all leaf nodes', () => {
-				const leafOnlyGraph: VariableGraph = {
-					a: [],
-					b: [],
-					c: [],
-				};
-				const result = buildDependencyGraph(leafOnlyGraph);
-				expect(result.transitiveDescendants).toEqual({
-					a: [],
-					b: [],
-					c: [],
-				});
-			});
 		});
 
 		describe('buildDependencies', () => {

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/mock.ts

@@ -1,3 +1,36 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+export const checkAPIInvocationMock = {
+	variablesToGetUpdated: [],
+	variableData: {
+		name: 'k8s_node_name',
+		key: '4d71d385-beaf-4434-8dbf-c62be68049fc',
+		allSelected: false,
+		customValue: '',
+		description: '',
+		id: '4d71d385-beaf-4434-8dbf-c62be68049fc',
+		modificationUUID: '77233d3c-96d7-4ccb-aa9d-11b04d563068',
+		multiSelect: false,
+		order: 6,
+		queryValue:
+			"SELECT JSONExtractString(labels, 'k8s_node_name') AS k8s_node_name\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE metric_name = 'k8s_node_cpu_time' AND JSONExtractString(labels, 'k8s_cluster_name') = {{.k8s_cluster_name}}\nGROUP BY k8s_node_name",
+		selectedValue: 'gke-signoz-saas-si-consumer-bsc-e2sd4-a6d430fa-gvm2',
+		showALLOption: false,
+		sort: 'DISABLED',
+		textboxValue: '',
+		type: 'QUERY',
+	},
+	parentDependencyGraph: {
+		deployment_environment: [],
+		service_name: ['deployment_environment'],
+		endpoint: ['deployment_environment', 'service_name'],
+		http_status_code: ['endpoint'],
+		k8s_cluster_name: [],
+		environment: [],
+		k8s_node_name: ['k8s_cluster_name'],
+		k8s_namespace_name: ['k8s_cluster_name', 'k8s_node_name'],
+	},
+} as any;
+
 export const onUpdateVariableNodeMock = {
 	nodeToUpdate: 'deployment_environment',
 	graph: {

frontend/src/container/DashboardContainer/DashboardVariablesSelection/util.ts

@@ -1,16 +1,9 @@
 import { OptionData } from 'components/NewSelect/types';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
-import { isEmpty } from 'lodash-es';
+import { isEmpty, isNull } from 'lodash-es';
 import {
 	IDashboardVariables,
 	IDependencyData,
 } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import {
-	onVariableFetchComplete,
-	onVariableFetchFailure,
-	variableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 export function areArraysEqual(
@@ -52,16 +45,30 @@ const getDependentVariablesBasedOnVariableName = (
 	}
 
 	return variables
-		.map((variable) => {
+		?.map((variable: any) => {
 			if (variable.type === 'QUERY') {
+				// Combined pattern for all formats
+				// {{.variable_name}} - original format
+				// $variable_name - dollar prefix format
+				// [[variable_name]] - square bracket format
+				// {{variable_name}} - without dot format
+				const patterns = [
+					`\\{\\{\\s*?\\.${variableName}\\s*?\\}\\}`, // {{.var}}
+					`\\{\\{\\s*${variableName}\\s*\\}\\}`, // {{var}}
+					`\\$${variableName}\\b`, // $var
+					`\\[\\[\\s*${variableName}\\s*\\]\\]`, // [[var]]
+				];
+				const combinedRegex = new RegExp(patterns.join('|'));
+
 				const queryValue = variable.queryValue || '';
-				if (textContainsVariableReference(queryValue, variableName)) {
+				const dependVarReMatch = queryValue.match(combinedRegex);
+				if (dependVarReMatch !== null && dependVarReMatch.length > 0) {
 					return variable.name;
 				}
 			}
 			return null;
 		})
-		.filter((val): val is string => val !== null);
+		.filter((val: string | null) => !isNull(val));
 };
 export type VariableGraph = Record<string, string[]>;
 
@@ -239,26 +246,10 @@ export const buildDependencyGraph = (
 
 	const hasCycle = topologicalOrder.length !== Object.keys(dependencies)?.length;
 
-	// Pre-compute transitive descendants by walking topological order in reverse.
-	// Each node's transitive descendants = direct children + their transitive descendants.
-	const transitiveDescendants: VariableGraph = {};
-	for (let i = topologicalOrder.length - 1; i >= 0; i--) {
-		const node = topologicalOrder[i];
-		const desc = new Set<string>();
-		for (const child of adjList[node] || []) {
-			desc.add(child);
-			for (const d of transitiveDescendants[child] || []) {
-				desc.add(d);
-			}
-		}
-		transitiveDescendants[node] = Array.from(desc);
-	}
-
 	return {
 		order: topologicalOrder,
 		graph: adjList,
 		parentDependencyGraph: buildParentDependencyGraph(adjList),
-		transitiveDescendants,
 		hasCycle,
 		cycleNodes,
 	};
@@ -293,6 +284,33 @@ export const onUpdateVariableNode = (
 	});
 };
 
+export const checkAPIInvocation = (
+	variablesToGetUpdated: string[],
+	variableData: IDashboardVariable,
+	parentDependencyGraph?: VariableGraph,
+): boolean => {
+	if (isEmpty(variableData.name)) {
+		return false;
+	}
+
+	if (isEmpty(parentDependencyGraph)) {
+		return false;
+	}
+
+	// if no dependency then true
+	const haveDependency =
+		parentDependencyGraph?.[variableData.name || '']?.length > 0;
+	if (!haveDependency) {
+		return true;
+	}
+
+	// if variable is in the list and has dependency then check if its the top element in the queue then true else false
+	return (
+		variablesToGetUpdated.length > 0 &&
+		variablesToGetUpdated[0] === variableData.name
+	);
+};
+
 export const getOptionsForDynamicVariable = (
 	normalizedValues: (string | number | boolean)[],
 	relatedValues: string[],
@@ -357,130 +375,3 @@ export const getSelectValue = (
 	}
 	return selectedValue?.toString();
 };
-
-/**
- * Merges multiple arrays of values into a single deduplicated string array.
- */
-export function mergeUniqueStrings(
-	...arrays: (string | number | boolean)[][]
-): string[] {
-	return [...new Set(arrays.flatMap((arr) => arr.map((v) => v.toString())))];
-}
-
-function isEligibleFilterVariable(
-	variable: IDashboardVariable,
-	currentVariableId: string,
-): boolean {
-	if (variable.id === currentVariableId) {
-		return false;
-	}
-	if (variable.type !== 'DYNAMIC') {
-		return false;
-	}
-	if (!variable.dynamicVariablesAttribute) {
-		return false;
-	}
-	if (!variable.selectedValue || isEmpty(variable.selectedValue)) {
-		return false;
-	}
-	return !(variable.showALLOption && variable.allSelected);
-}
-
-function formatQueryValue(val: string): string {
-	const numValue = Number(val);
-	if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
-		return val;
-	}
-	return `'${val.replace(/'/g, "\\'")}'`;
-}
-
-function buildQueryPart(attribute: string, values: string[]): string {
-	const formatted = values.map(formatQueryValue);
-	if (formatted.length === 1) {
-		return `${attribute} = ${formatted[0]}`;
-	}
-	return `${attribute} IN [${formatted.join(', ')}]`;
-}
-
-/**
- * Builds a filter query string from sibling dynamic variables' selected values.
- * e.g. `k8s.namespace.name IN ['zeus', 'gene'] AND doc_op_type = 'test'`
- */
-export function buildExistingDynamicVariableQuery(
-	existingVariables: IDashboardVariables | null,
-	currentVariableId: string,
-	hasDynamicAttribute: boolean,
-): string {
-	if (!existingVariables || !hasDynamicAttribute) {
-		return '';
-	}
-
-	const queryParts: string[] = [];
-
-	for (const variable of Object.values(existingVariables)) {
-		// Skip the current variable being processed
-		if (!isEligibleFilterVariable(variable, currentVariableId)) {
-			continue;
-		}
-
-		const rawValues = Array.isArray(variable.selectedValue)
-			? variable.selectedValue
-			: [variable.selectedValue];
-
-		// Filter out empty values and convert to strings
-		const validValues = rawValues
-			.filter(
-				(val): val is string | number | boolean =>
-					val !== null && val !== undefined && val !== '',
-			)
-			.map((val) => val.toString());
-
-		if (validValues.length > 0 && variable.dynamicVariablesAttribute) {
-			queryParts.push(
-				buildQueryPart(variable.dynamicVariablesAttribute, validValues),
-			);
-		}
-	}
-
-	return queryParts.join(' AND ');
-}
-
-function isVariableInActiveFetchState(state: string | undefined): boolean {
-	return state === 'loading' || state === 'revalidating';
-}
-
-/**
- * Completes or fails a variable's fetch state machine transition.
- * No-ops if the variable is not currently in an active fetch state.
- */
-export function settleVariableFetch(
-	name: string | undefined,
-	outcome: 'complete' | 'failure',
-): void {
-	if (!name) {
-		return;
-	}
-
-	const currentState = variableFetchStore.getSnapshot().states[name];
-	if (!isVariableInActiveFetchState(currentState)) {
-		return;
-	}
-
-	if (outcome === 'complete') {
-		onVariableFetchComplete(name);
-	} else {
-		onVariableFetchFailure(name);
-	}
-}
-
-export function extractErrorMessage(
-	error: { message?: string } | null,
-): string {
-	if (!error) {
-		return SOMETHING_WENT_WRONG;
-	}
-	return (
-		error.message ||
-		'Please make sure configuration is valid and you have required setup and permissions'
-	);
-}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/utils.test.ts

@@ -1,31 +1,4 @@
-jest.mock('providers/Dashboard/store/variableFetchStore', () => ({
-	variableFetchStore: {
-		getSnapshot: jest.fn(),
-	},
-	onVariableFetchComplete: jest.fn(),
-	onVariableFetchFailure: jest.fn(),
-}));
-
-import {
-	onVariableFetchComplete,
-	onVariableFetchFailure,
-	variableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import {
-	areArraysEqual,
-	buildExistingDynamicVariableQuery,
-	extractErrorMessage,
-	mergeUniqueStrings,
-	onUpdateVariableNode,
-	settleVariableFetch,
-	VariableGraph,
-} from './util';
-
-// ────────────────────────────────────────────────────────────────
-// Existing tests
-// ────────────────────────────────────────────────────────────────
+import { areArraysEqual, onUpdateVariableNode, VariableGraph } from './util';
 
 describe('areArraysEqual', () => {
 	it('should return true for equal arrays with same order', () => {
@@ -176,348 +149,3 @@ describe('onUpdateVariableNode', () => {
 		expect(visited).toEqual(['namespace', 'service', 'pod']);
 	});
 });
-
-// ────────────────────────────────────────────────────────────────
-// New tests for functions added in recent commits
-// ────────────────────────────────────────────────────────────────
-
-function makeDynamicVar(
-	overrides: Partial<IDashboardVariable> & { id: string },
-): IDashboardVariable {
-	return {
-		name: overrides.id,
-		description: '',
-		type: 'DYNAMIC',
-		sort: 'DISABLED',
-		multiSelect: false,
-		showALLOption: false,
-		allSelected: false,
-		dynamicVariablesAttribute: 'attr',
-		selectedValue: 'some-value',
-		...overrides,
-	} as IDashboardVariable;
-}
-
-describe('mergeUniqueStrings', () => {
-	it('should merge two arrays and deduplicate', () => {
-		expect(mergeUniqueStrings(['a', 'b'], ['b', 'c'])).toEqual(['a', 'b', 'c']);
-	});
-
-	it('should convert numbers and booleans to strings', () => {
-		expect(mergeUniqueStrings([1, true, 'hello'], [2, false])).toEqual([
-			'1',
-			'true',
-			'hello',
-			'2',
-			'false',
-		]);
-	});
-
-	it('should deduplicate when number and its string form both appear', () => {
-		expect(mergeUniqueStrings([42], ['42'])).toEqual(['42']);
-	});
-
-	it('should handle a single array', () => {
-		expect(mergeUniqueStrings(['x', 'y', 'x'])).toEqual(['x', 'y']);
-	});
-
-	it('should handle three or more arrays', () => {
-		expect(mergeUniqueStrings(['a'], ['b'], ['c'], ['a', 'c'])).toEqual([
-			'a',
-			'b',
-			'c',
-		]);
-	});
-
-	it('should return empty array when no arrays are provided', () => {
-		expect(mergeUniqueStrings()).toEqual([]);
-	});
-
-	it('should return empty array when all input arrays are empty', () => {
-		expect(mergeUniqueStrings([], [], [])).toEqual([]);
-	});
-
-	it('should preserve order of first occurrence', () => {
-		expect(mergeUniqueStrings(['c', 'a'], ['b', 'a'])).toEqual(['c', 'a', 'b']);
-	});
-});
-
-describe('buildExistingDynamicVariableQuery', () => {
-	// --- Guard clauses ---
-	it('should return empty string when existingVariables is null', () => {
-		expect(buildExistingDynamicVariableQuery(null, 'v1', true)).toBe('');
-	});
-
-	it('should return empty string when hasDynamicAttribute is false', () => {
-		const variables = { v2: makeDynamicVar({ id: 'v2' }) };
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', false)).toBe('');
-	});
-
-	// --- Eligibility filtering ---
-	it('should skip the current variable (same id)', () => {
-		const variables = {
-			v1: makeDynamicVar({
-				id: 'v1',
-				dynamicVariablesAttribute: 'ns',
-				selectedValue: 'prod',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip non-DYNAMIC variables', () => {
-		const variables = {
-			v2: makeDynamicVar({ id: 'v2', type: 'QUERY' as any }),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables without dynamicVariablesAttribute', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: undefined,
-				selectedValue: 'val',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables with null selectedValue', () => {
-		const variables = {
-			v2: makeDynamicVar({ id: 'v2', selectedValue: null }),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables with empty string selectedValue', () => {
-		const variables = {
-			v2: makeDynamicVar({ id: 'v2', selectedValue: '' }),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables with empty array selectedValue', () => {
-		const variables = {
-			v2: makeDynamicVar({ id: 'v2', selectedValue: [] }),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables where showALLOption and allSelected are both true', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				showALLOption: true,
-				allSelected: true,
-				dynamicVariablesAttribute: 'ns',
-				selectedValue: 'prod',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should include variable with showALLOption true but allSelected false', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				showALLOption: true,
-				allSelected: false,
-				dynamicVariablesAttribute: 'ns',
-				selectedValue: 'prod',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"ns = 'prod'",
-		);
-	});
-
-	// --- Value formatting ---
-	it('should quote string values in the query', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'k8s.namespace.name',
-				selectedValue: 'zeus',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"k8s.namespace.name = 'zeus'",
-		);
-	});
-
-	it('should leave numeric values unquoted', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'http.status_code',
-				selectedValue: '200',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			'http.status_code = 200',
-		);
-	});
-
-	it('should escape single quotes in string values', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'user.name',
-				selectedValue: "O'Brien",
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"user.name = 'O\\'Brien'",
-		);
-	});
-
-	it('should build an IN clause for array selectedValue with multiple items', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'k8s.namespace.name',
-				selectedValue: ['zeus', 'gene'],
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"k8s.namespace.name IN ['zeus', 'gene']",
-		);
-	});
-
-	it('should handle mix of numeric and string values in IN clause', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'http.status_code',
-				selectedValue: ['200', 'unknown'],
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"http.status_code IN [200, 'unknown']",
-		);
-	});
-
-	it('should filter out empty string values from array', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'region',
-				selectedValue: ['us-east', '', 'eu-west'],
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"region IN ['us-east', 'eu-west']",
-		);
-	});
-
-	// --- Multiple siblings ---
-	it('should join multiple sibling variables with AND', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'k8s.namespace.name',
-				selectedValue: ['zeus', 'gene'],
-			}),
-			v3: makeDynamicVar({
-				id: 'v3',
-				dynamicVariablesAttribute: 'doc_op_type',
-				selectedValue: 'test',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"k8s.namespace.name IN ['zeus', 'gene'] AND doc_op_type = 'test'",
-		);
-	});
-
-	it('should return empty string when no variables are eligible', () => {
-		const variables = {
-			v1: makeDynamicVar({ id: 'v1' }), // same as current — skipped
-			v2: makeDynamicVar({ id: 'v2', type: 'QUERY' as any }), // not DYNAMIC
-			v3: makeDynamicVar({ id: 'v3', selectedValue: null }), // no value
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-});
-
-describe('settleVariableFetch', () => {
-	const mockGetSnapshot = variableFetchStore.getSnapshot as jest.Mock;
-	const mockComplete = onVariableFetchComplete as jest.Mock;
-	const mockFailure = onVariableFetchFailure as jest.Mock;
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('should no-op when name is undefined', () => {
-		settleVariableFetch(undefined, 'complete');
-		expect(mockGetSnapshot).not.toHaveBeenCalled();
-		expect(mockComplete).not.toHaveBeenCalled();
-		expect(mockFailure).not.toHaveBeenCalled();
-	});
-
-	it.each(['idle', 'waiting', 'error', undefined] as const)(
-		'should no-op when variable state is %s',
-		(state) => {
-			mockGetSnapshot.mockReturnValue({ states: { myVar: state } });
-			settleVariableFetch('myVar', 'complete');
-			expect(mockComplete).not.toHaveBeenCalled();
-			expect(mockFailure).not.toHaveBeenCalled();
-		},
-	);
-
-	it('should call onVariableFetchComplete when state is loading and outcome is complete', () => {
-		mockGetSnapshot.mockReturnValue({ states: { myVar: 'loading' } });
-		settleVariableFetch('myVar', 'complete');
-		expect(mockComplete).toHaveBeenCalledWith('myVar');
-		expect(mockFailure).not.toHaveBeenCalled();
-	});
-
-	it('should call onVariableFetchComplete when state is revalidating and outcome is complete', () => {
-		mockGetSnapshot.mockReturnValue({ states: { myVar: 'revalidating' } });
-		settleVariableFetch('myVar', 'complete');
-		expect(mockComplete).toHaveBeenCalledWith('myVar');
-		expect(mockFailure).not.toHaveBeenCalled();
-	});
-
-	it('should call onVariableFetchFailure when state is loading and outcome is failure', () => {
-		mockGetSnapshot.mockReturnValue({ states: { myVar: 'loading' } });
-		settleVariableFetch('myVar', 'failure');
-		expect(mockFailure).toHaveBeenCalledWith('myVar');
-		expect(mockComplete).not.toHaveBeenCalled();
-	});
-
-	it('should call onVariableFetchFailure when state is revalidating and outcome is failure', () => {
-		mockGetSnapshot.mockReturnValue({ states: { myVar: 'revalidating' } });
-		settleVariableFetch('myVar', 'failure');
-		expect(mockFailure).toHaveBeenCalledWith('myVar');
-		expect(mockComplete).not.toHaveBeenCalled();
-	});
-});
-
-describe('extractErrorMessage', () => {
-	const FALLBACK_MESSAGE =
-		'Please make sure configuration is valid and you have required setup and permissions';
-
-	it('should return SOMETHING_WENT_WRONG when error is null', () => {
-		expect(extractErrorMessage(null)).toBe('Something went wrong');
-	});
-
-	it('should return the error message when it exists', () => {
-		expect(extractErrorMessage({ message: 'Query timeout' })).toBe(
-			'Query timeout',
-		);
-	});
-
-	it('should return fallback when error object has no message property', () => {
-		expect(extractErrorMessage({})).toBe(FALLBACK_MESSAGE);
-	});
-
-	it('should return fallback when error.message is empty string', () => {
-		expect(extractErrorMessage({ message: '' })).toBe(FALLBACK_MESSAGE);
-	});
-
-	it('should return fallback when error.message is undefined', () => {
-		expect(extractErrorMessage({ message: undefined })).toBe(FALLBACK_MESSAGE);
-	});
-});

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyTypes.ts

@@ -1,11 +1,17 @@
-import { VariableItemProps } from '../VariableItem';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 export interface VariableSelectStrategy {
 	handleChange(params: {
 		value: string | string[];
-		variableData: VariableItemProps['variableData'];
-		onValueUpdate: VariableItemProps['onValueUpdate'];
+		variableData: IDashboardVariable;
 		optionsData: (string | number | boolean)[];
 		allAvailableOptionStrings: string[];
+		onValueUpdate: (
+			name: string,
+			id: string,
+			value: IDashboardVariable['selectedValue'],
+			allSelected: boolean,
+			haveCustomValuesSelected?: boolean,
+		) => void;
 	}): void;
 }

frontend/src/container/DashboardContainer/__test__/DynamicVariableDefaultBehavior.test.tsx

@@ -17,19 +17,6 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import DynamicVariableInput from '../DashboardVariablesSelection/DynamicVariableInput';
 
-// Mock useVariableFetchState to return "fetching" state so useQuery is enabled
-jest.mock('hooks/dashboard/useVariableFetchState', () => ({
-	useVariableFetchState: (): Record<string, unknown> => ({
-		variableFetchCycleId: 0,
-		variableFetchState: 'loading',
-		isVariableSettled: false,
-		isVariableFetching: true,
-		hasVariableFetchedOnce: false,
-		isVariableWaitingForDependencies: false,
-		variableDependencyWaitMessage: '',
-	}),
-}));
-
 // Mock the getFieldValues API
 jest.mock('api/dynamicVariables/getFieldValues', () => ({
 	getFieldValues: jest.fn(),
@@ -108,7 +95,7 @@ describe('Dynamic Variable Default Behavior', () => {
 						}
 					}
 					if (queryFn) {
-						queryFn({ signal: undefined });
+						queryFn();
 					}
 				}
 			}, [enabled, variableName, dynamicVarsKey]); // Only depend on enabled/keys
@@ -247,7 +234,6 @@ describe('Dynamic Variable Default Behavior', () => {
 					'2023-01-01T00:00:00Z',
 					'2023-01-02T00:00:00Z',
 					'',
-					undefined, // signal
 				);
 			});
 
@@ -501,7 +487,6 @@ describe('Dynamic Variable Default Behavior', () => {
 					'2023-01-01T00:00:00Z',
 					'2023-01-02T00:00:00Z',
 					'',
-					undefined, // signal
 				);
 			});
 

frontend/src/container/DashboardContainer/__test__/IntegrationTests.test.tsx

@@ -49,11 +49,15 @@ const mockDashboard = {
 // Mock the dashboard provider with stable functions to prevent infinite loops
 const mockSetSelectedDashboard = jest.fn();
 const mockUpdateLocalStorageDashboardVariables = jest.fn();
+const mockSetVariablesToGetUpdated = jest.fn();
+
 jest.mock('providers/Dashboard/Dashboard', () => ({
 	useDashboard: (): any => ({
 		selectedDashboard: mockDashboard,
 		setSelectedDashboard: mockSetSelectedDashboard,
 		updateLocalStorageDashboardVariables: mockUpdateLocalStorageDashboardVariables,
+		variablesToGetUpdated: ['env'], // Stable initial value
+		setVariablesToGetUpdated: mockSetVariablesToGetUpdated,
 	}),
 }));
 

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.styles.scss

@@ -1,71 +0,0 @@
-.dashboard-breadcrumbs {
-	width: 100%;
-	height: 48px;
-	display: flex;
-	gap: 6px;
-	align-items: center;
-	max-width: 80%;
-
-	.dashboard-btn {
-		display: flex;
-		align-items: center;
-		color: var(--bg-vanilla-400);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-		padding: 0px;
-		height: 20px;
-	}
-
-	.dashboard-btn:hover {
-		background-color: unset;
-	}
-
-	.id-btn {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		padding: 0px 2px;
-		border-radius: 2px;
-		background: rgba(113, 144, 249, 0.1);
-		color: var(--bg-robin-400);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		height: 20px;
-
-		max-width: calc(100% - 120px);
-
-		span {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		.ant-btn-icon {
-			margin-inline-end: 4px;
-		}
-	}
-	.id-btn:hover {
-		background: rgba(113, 144, 249, 0.1);
-		color: var(--bg-robin-300);
-	}
-
-	.dashboard-icon-image {
-		height: 14px;
-		width: 14px;
-	}
-}
-
-.lightMode {
-	.dashboard-breadcrumbs {
-		.dashboard-btn {
-			color: var(--bg-ink-400);
-		}
-	}
-}

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,55 +0,0 @@
-import { useCallback } from 'react';
-import { Button } from 'antd';
-import ROUTES from 'constants/routes';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { LayoutGrid } from 'lucide-react';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { DashboardData } from 'types/api/dashboard/getAll';
-
-import { Base64Icons } from '../../DashboardSettings/General/utils';
-
-import './DashboardBreadcrumbs.styles.scss';
-
-function DashboardBreadcrumbs(): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-	const { selectedDashboard, listSortOrder } = useDashboard();
-
-	const selectedData = selectedDashboard
-		? {
-				...selectedDashboard.data,
-				uuid: selectedDashboard.id,
-		  }
-		: ({} as DashboardData);
-
-	const { title = '', image = Base64Icons[0] } = selectedData || {};
-
-	const goToListPage = useCallback(() => {
-		const urlParams = new URLSearchParams();
-		urlParams.set('columnKey', listSortOrder.columnKey as string);
-		urlParams.set('order', listSortOrder.order as string);
-		urlParams.set('page', listSortOrder.pagination as string);
-		urlParams.set('search', listSortOrder.search as string);
-
-		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
-		safeNavigate(generatedUrl);
-	}, [listSortOrder, safeNavigate]);
-
-	return (
-		<div className="dashboard-breadcrumbs">
-			<Button
-				type="text"
-				icon={<LayoutGrid size={14} />}
-				className="dashboard-btn"
-				onClick={goToListPage}
-			>
-				Dashboard /
-			</Button>
-			<Button type="text" className="id-btn dashboard-name-btn">
-				<img src={image} alt="dashboard-icon" className="dashboard-icon-image" />
-				{title}
-			</Button>
-		</div>
-	);
-}
-
-export default DashboardBreadcrumbs;

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardHeader.styles.scss

@@ -1,15 +0,0 @@
-.dashboard-header {
-	border-bottom: 1px solid var(--bg-slate-400);
-	display: flex;
-	justify-content: space-between;
-	gap: 16px;
-	align-items: center;
-	padding: 0 8px;
-	box-sizing: border-box;
-}
-
-.lightMode {
-	.dashboard-header {
-		border-bottom: 1px solid var(--bg-vanilla-300);
-	}
-}

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardHeader.tsx

@@ -1,17 +0,0 @@
-import { memo } from 'react';
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-
-import DashboardBreadcrumbs from './DashboardBreadcrumbs';
-
-import './DashboardHeader.styles.scss';
-
-function DashboardHeader(): JSX.Element {
-	return (
-		<div className="dashboard-header">
-			<DashboardBreadcrumbs />
-			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
-		</div>
-	);
-}
-
-export default memo(DashboardHeader);

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -1,45 +0,0 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import BarChartTooltip from 'lib/uPlotV2/components/Tooltip/BarChartTooltip';
-import {
-	BarTooltipProps,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-
-import { useBarChartStacking } from '../../hooks/useBarChartStacking';
-import { BarChartProps } from '../types';
-
-export default function BarChart(props: BarChartProps): JSX.Element {
-	const { children, isStackedBarChart, config, data, ...rest } = props;
-
-	const chartData = useBarChartStacking({
-		data,
-		isStackedBarChart,
-		config,
-	});
-
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			const tooltipProps: BarTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-				isStackedBarChart: isStackedBarChart,
-			};
-			return <BarChartTooltip {...tooltipProps} />;
-		},
-		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
-	);
-
-	return (
-		<ChartWrapper
-			{...rest}
-			config={config}
-			data={chartData}
-			renderTooltip={renderTooltip}
-		>
-			{children}
-		</ChartWrapper>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -23,7 +23,6 @@ export default function ChartWrapper({
 	width: containerWidth,
 	height: containerHeight,
 	showTooltip = true,
-	showLegend = true,
 	canPinTooltip = false,
 	syncMode,
 	syncKey,
@@ -37,9 +36,6 @@ export default function ChartWrapper({
 
 	const legendComponent = useCallback(
 		(averageLegendWidth: number): React.ReactNode => {
-			if (!showLegend) {
-				return null;
-			}
 			return (
 				<Legend
 					config={config}
@@ -48,7 +44,7 @@ export default function ChartWrapper({
 				/>
 			);
 		},
-		[config, legendConfig.position, showLegend],
+		[config, legendConfig.position],
 	);
 
 	const renderTooltipCallback = useCallback(
@@ -64,7 +60,6 @@ export default function ChartWrapper({
 	return (
 		<PlotContextProvider>
 			<ChartLayout
-				showLegend={showLegend}
 				config={config}
 				containerWidth={containerWidth}
 				containerHeight={containerHeight}

frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx

@@ -1,55 +0,0 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import HistogramTooltip from 'lib/uPlotV2/components/Tooltip/HistogramTooltip';
-import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
-import {
-	HistogramTooltipProps,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-
-import { HistogramChartProps } from '../types';
-
-export default function Histogram(props: HistogramChartProps): JSX.Element {
-	const {
-		children,
-		renderTooltip: customRenderTooltip,
-		isQueriesMerged,
-		...rest
-	} = props;
-
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			if (customRenderTooltip) {
-				return customRenderTooltip(props);
-			}
-			const content = buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: rest.yAxisUnit ?? '',
-				decimalPrecision: rest.decimalPrecision,
-			});
-			const tooltipProps: HistogramTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-				content,
-			};
-			return <HistogramTooltip {...tooltipProps} />;
-		},
-		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
-	);
-
-	return (
-		<ChartWrapper
-			showLegend={!isQueriesMerged}
-			{...rest}
-			renderTooltip={renderTooltip}
-		>
-			{children}
-		</ChartWrapper>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -7,7 +7,6 @@ interface BaseChartProps {
 	width: number;
 	height: number;
 	showTooltip?: boolean;
-	showLegend?: boolean;
 	timezone: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
@@ -18,7 +17,6 @@ interface BaseChartProps {
 interface UPlotBasedChartProps {
 	config: UPlotConfigBuilder;
 	data: uPlot.AlignedData;
-	legendConfig: LegendConfig;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
@@ -28,20 +26,14 @@ interface UPlotBasedChartProps {
 }
 
 export interface TimeSeriesChartProps
-	extends BaseChartProps,
-		UPlotBasedChartProps {}
-
-export interface HistogramChartProps
 	extends BaseChartProps,
 		UPlotBasedChartProps {
-	isQueriesMerged?: boolean;
+	legendConfig: LegendConfig;
 }
 
 export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
+	legendConfig: LegendConfig;
 	isStackedBarChart?: boolean;
 }
 
-export type ChartProps =
-	| TimeSeriesChartProps
-	| BarChartProps
-	| HistogramChartProps;
+export type ChartProps = TimeSeriesChartProps | BarChartProps;

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackUtils.test.ts

@@ -1,117 +0,0 @@
-import { AlignedData } from 'uplot';
-
-import { getInitialStackedBands, stack } from '../stackUtils';
-
-describe('stackUtils', () => {
-	describe('stack', () => {
-		const neverOmit = (): boolean => false;
-
-		it('preserves time axis as first row', () => {
-			const data: AlignedData = [
-				[100, 200, 300],
-				[1, 2, 3],
-				[4, 5, 6],
-			];
-			const { data: result } = stack(data, neverOmit);
-			expect(result[0]).toEqual([100, 200, 300]);
-		});
-
-		it('stacks value series cumulatively (last = raw, first = total)', () => {
-			// Time, then 3 value series. Stack order: last series stays raw, then we add upward.
-			const data: AlignedData = [
-				[0, 1, 2],
-				[1, 2, 3], // series 1
-				[4, 5, 6], // series 2
-				[7, 8, 9], // series 3
-			];
-			const { data: result } = stack(data, neverOmit);
-			// result[1] = s1+s2+s3, result[2] = s2+s3, result[3] = s3
-			expect(result[1]).toEqual([12, 15, 18]); // 1+4+7, 2+5+8, 3+6+9
-			expect(result[2]).toEqual([11, 13, 15]); // 4+7, 5+8, 6+9
-			expect(result[3]).toEqual([7, 8, 9]);
-		});
-
-		it('treats null values as 0 when stacking', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, null],
-				[null, 10],
-			];
-			const { data: result } = stack(data, neverOmit);
-			expect(result[1]).toEqual([1, 10]); // total
-			expect(result[2]).toEqual([0, 10]); // last series with null→0
-		});
-
-		it('copies omitted series as-is without accumulating', () => {
-			// Omit series 2 (index 2); series 1 and 3 are stacked.
-			const data: AlignedData = [
-				[0, 1],
-				[10, 20], // series 1
-				[100, 200], // series 2 - omitted
-				[1, 2], // series 3
-			];
-			const omitSeries2 = (i: number): boolean => i === 2;
-			const { data: result } = stack(data, omitSeries2);
-			// series 3 raw: [1, 2]; series 2 omitted: [100, 200] as-is; series 1 stacked with s3: [11, 22]
-			expect(result[1]).toEqual([11, 22]); // 10+1, 20+2
-			expect(result[2]).toEqual([100, 200]); // copied, not stacked
-			expect(result[3]).toEqual([1, 2]);
-		});
-
-		it('returns bands between consecutive visible series when none omitted', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, 2],
-				[3, 4],
-				[5, 6],
-			];
-			const { bands } = stack(data, neverOmit);
-			expect(bands).toEqual([{ series: [1, 2] }, { series: [2, 3] }]);
-		});
-
-		it('returns bands only between visible series when some are omitted', () => {
-			// 4 value series; omit index 2. Visible: 1, 3, 4. Bands: [1,3], [3,4]
-			const data: AlignedData = [[0], [1], [2], [3], [4]];
-			const omitSeries2 = (i: number): boolean => i === 2;
-			const { bands } = stack(data, omitSeries2);
-			expect(bands).toEqual([{ series: [1, 3] }, { series: [3, 4] }]);
-		});
-
-		it('returns empty bands when only one value series', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, 2],
-			];
-			const { bands } = stack(data, neverOmit);
-			expect(bands).toEqual([]);
-		});
-	});
-
-	describe('getInitialStackedBands', () => {
-		it('returns one band between each consecutive pair for seriesCount 3', () => {
-			expect(getInitialStackedBands(3)).toEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-			]);
-		});
-
-		it('returns empty array for seriesCount 0 or 1', () => {
-			expect(getInitialStackedBands(0)).toEqual([]);
-			expect(getInitialStackedBands(1)).toEqual([]);
-		});
-
-		it('returns single band for seriesCount 2', () => {
-			expect(getInitialStackedBands(2)).toEqual([{ series: [1, 2] }]);
-		});
-
-		it('returns bands [1,2], [2,3], ..., [n-1, n] for seriesCount n', () => {
-			const bands = getInitialStackedBands(5);
-			expect(bands).toEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-				{ series: [3, 4] },
-				{ series: [4, 5] },
-			]);
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/utils/stackSeriesUtils.ts

@@ -1,116 +0,0 @@
-import uPlot, { AlignedData } from 'uplot';
-
-/**
- * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
- */
-export function stackSeries(
-	data: AlignedData,
-	omit: (seriesIndex: number) => boolean,
-): { data: AlignedData; bands: uPlot.Band[] } {
-	const timeAxis = data[0];
-	const pointCount = timeAxis.length;
-	const valueSeriesCount = data.length - 1; // exclude time axis
-
-	const stackedSeries = buildStackedSeries({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-	});
-	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
-
-	return {
-		data: [timeAxis, ...stackedSeries] as AlignedData,
-		bands,
-	};
-}
-
-interface BuildStackedSeriesParams {
-	data: AlignedData;
-	valueSeriesCount: number;
-	pointCount: number;
-	omit: (seriesIndex: number) => boolean;
-}
-
-/**
- * Accumulate from last series upward: last series = raw values, first = total.
- * Omitted series are copied as-is (no accumulation).
- */
-function buildStackedSeries({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: BuildStackedSeriesParams): (number | null)[][] {
-	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
-	const cumulativeSums = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
-		const rawValues = data[seriesIndex] as (number | null)[];
-
-		if (omit(seriesIndex)) {
-			stackedSeries[seriesIndex - 1] = rawValues;
-		} else {
-			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
-				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
-			});
-		}
-	}
-
-	return stackedSeries;
-}
-
-/**
- * Bands define fill between consecutive visible series for stacked appearance.
- * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
- */
-function buildFillBands(
-	seriesLength: number,
-	omit: (seriesIndex: number) => boolean,
-): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-
-	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
-			seriesLength,
-			seriesIndex,
-			omit,
-		);
-		if (nextVisibleSeriesIndex !== -1) {
-			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
-		}
-	}
-
-	return bands;
-}
-
-function findNextVisibleSeriesIndex(
-	seriesLength: number,
-	afterIndex: number,
-	omit: (seriesIndex: number) => boolean,
-): number {
-	for (let i = afterIndex + 1; i < seriesLength; i++) {
-		if (!omit(i)) {
-			return i;
-		}
-	}
-	return -1;
-}
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
-		bands.push({ series: [seriesIndex, seriesIndex + 1] });
-	}
-	return bands;
-}

frontend/src/container/DashboardContainer/visualization/charts/utils/stackUtils.ts

@@ -1,116 +0,0 @@
-import uPlot, { AlignedData } from 'uplot';
-
-/**
- * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
- */
-export function stack(
-	data: AlignedData,
-	omit: (seriesIndex: number) => boolean,
-): { data: AlignedData; bands: uPlot.Band[] } {
-	const timeAxis = data[0];
-	const pointCount = timeAxis.length;
-	const valueSeriesCount = data.length - 1; // exclude time axis
-
-	const stackedSeries = buildStackedSeries({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-	});
-	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
-
-	return {
-		data: [timeAxis, ...stackedSeries] as AlignedData,
-		bands,
-	};
-}
-
-interface BuildStackedSeriesParams {
-	data: AlignedData;
-	valueSeriesCount: number;
-	pointCount: number;
-	omit: (seriesIndex: number) => boolean;
-}
-
-/**
- * Accumulate from last series upward: last series = raw values, first = total.
- * Omitted series are copied as-is (no accumulation).
- */
-function buildStackedSeries({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: BuildStackedSeriesParams): (number | null)[][] {
-	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
-	const cumulativeSums = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
-		const rawValues = data[seriesIndex] as (number | null)[];
-
-		if (omit(seriesIndex)) {
-			stackedSeries[seriesIndex - 1] = rawValues;
-		} else {
-			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
-				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
-			});
-		}
-	}
-
-	return stackedSeries;
-}
-
-/**
- * Bands define fill between consecutive visible series for stacked appearance.
- * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
- */
-function buildFillBands(
-	seriesLength: number,
-	omit: (seriesIndex: number) => boolean,
-): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-
-	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
-			seriesLength,
-			seriesIndex,
-			omit,
-		);
-		if (nextVisibleSeriesIndex !== -1) {
-			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
-		}
-	}
-
-	return bands;
-}
-
-function findNextVisibleSeriesIndex(
-	seriesLength: number,
-	afterIndex: number,
-	omit: (seriesIndex: number) => boolean,
-): number {
-	for (let i = afterIndex + 1; i < seriesLength; i++) {
-		if (!omit(i)) {
-			return i;
-		}
-	}
-	return -1;
-}
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
-		bands.push({ series: [seriesIndex, seriesIndex + 1] });
-	}
-	return bands;
-}

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useBarChartStacking.test.ts

@@ -1,313 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import uPlot from 'uplot';
-
-import type { UseBarChartStackingParams } from '../useBarChartStacking';
-import { useBarChartStacking } from '../useBarChartStacking';
-
-type MockConfig = { addHook: jest.Mock };
-
-function asConfig(c: MockConfig): UseBarChartStackingParams['config'] {
-	return (c as unknown) as UseBarChartStackingParams['config'];
-}
-
-function createMockConfig(): {
-	config: MockConfig;
-	invokeSetData: (plot: uPlot) => void;
-	invokeSetSeries: (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	) => void;
-	removeSetData: jest.Mock;
-	removeSetSeries: jest.Mock;
-} {
-	let setDataHandler: ((plot: uPlot) => void) | null = null;
-	let setSeriesHandler:
-		| ((plot: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
-		| null = null;
-
-	const removeSetData = jest.fn();
-	const removeSetSeries = jest.fn();
-
-	const addHook = jest.fn(
-		(
-			hookName: string,
-			handler: (plot: uPlot, ...args: unknown[]) => void,
-		): (() => void) => {
-			if (hookName === 'setData') {
-				setDataHandler = handler as (plot: uPlot) => void;
-				return removeSetData;
-			}
-			if (hookName === 'setSeries') {
-				setSeriesHandler = handler as (
-					plot: uPlot,
-					seriesIndex: number | null,
-					opts: uPlot.Series,
-				) => void;
-				return removeSetSeries;
-			}
-			return jest.fn();
-		},
-	);
-
-	const config: MockConfig = { addHook };
-
-	const invokeSetData = (plot: uPlot): void => {
-		setDataHandler?.(plot);
-	};
-
-	const invokeSetSeries = (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	): void => {
-		setSeriesHandler?.(plot, seriesIndex, opts as uPlot.Series);
-	};
-
-	return {
-		config,
-		invokeSetData,
-		invokeSetSeries,
-		removeSetData,
-		removeSetSeries,
-	};
-}
-
-function createMockPlot(overrides: Partial<uPlot> = {}): uPlot {
-	return ({
-		data: [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		],
-		series: [{ show: true }, { show: true }, { show: true }],
-		delBand: jest.fn(),
-		addBand: jest.fn(),
-		setData: jest.fn(),
-		...overrides,
-	} as unknown) as uPlot;
-}
-
-describe('useBarChartStacking', () => {
-	it('returns data as-is when isStackedBarChart is false', () => {
-		const data: uPlot.AlignedData = [
-			[100, 200],
-			[1, 2],
-			[3, 4],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: null,
-			}),
-		);
-		expect(result.current).toBe(data);
-	});
-
-	it('returns data as-is when config is null and isStackedBarChart is true', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[4, 5],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		// Still returns stacked data (computed in useMemo); no hooks registered
-		expect(result.current[0]).toEqual([0, 1]);
-		expect(result.current[1]).toEqual([5, 7]); // stacked
-		expect(result.current[2]).toEqual([4, 5]);
-	});
-
-	it('returns stacked data when isStackedBarChart is true and multiple value series', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-			[7, 8, 9],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current[0]).toEqual([0, 1, 2]);
-		expect(result.current[1]).toEqual([12, 15, 18]); // s1+s2+s3
-		expect(result.current[2]).toEqual([11, 13, 15]); // s2+s3
-		expect(result.current[3]).toEqual([7, 8, 9]);
-	});
-
-	it('returns data as-is when only one value series (no stacking needed)', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current).toEqual(data);
-	});
-
-	it('registers setData and setSeries hooks when isStackedBarChart and config provided', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).toHaveBeenCalledWith('setData', expect.any(Function));
-		expect(config.addHook).toHaveBeenCalledWith(
-			'setSeries',
-			expect.any(Function),
-		);
-	});
-
-	it('does not register hooks when isStackedBarChart is false', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).not.toHaveBeenCalled();
-	});
-
-	it('calls cleanup when unmounted', () => {
-		const { config, removeSetData, removeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		const { unmount } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		unmount();
-
-		expect(removeSetData).toHaveBeenCalled();
-		expect(removeSetSeries).toHaveBeenCalled();
-	});
-
-	it('re-stacks and updates plot when setData hook is invoked', () => {
-		const { config, invokeSetData } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		];
-		const plot = createMockPlot({
-			data: [
-				[0, 1, 2],
-				[5, 7, 9],
-				[4, 5, 6],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetData(plot);
-
-		expect(plot.delBand).toHaveBeenCalledWith(null);
-		expect(plot.addBand).toHaveBeenCalled();
-		expect(plot.setData).toHaveBeenCalledWith(
-			expect.arrayContaining([
-				[0, 1, 2],
-				expect.any(Array), // stacked row 1
-				expect.any(Array), // stacked row 2
-			]),
-		);
-	});
-
-	it('re-stacks when setSeries hook is invoked (e.g. legend toggle)', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[10, 20],
-			[5, 10],
-		];
-		// Plot data must match unstacked length so canApplyStacking passes
-		const plot = createMockPlot({
-			data: [
-				[0, 1],
-				[15, 30],
-				[5, 10],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetSeries(plot, 1, { show: false });
-
-		expect(plot.setData).toHaveBeenCalled();
-	});
-
-	it('does not re-stack when setSeries is called with focus option', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-		const plot = createMockPlot();
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		(plot.setData as jest.Mock).mockClear();
-		invokeSetSeries(plot, 1, { focus: true } as uPlot.Series);
-
-		expect(plot.setData).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useScrollWidgetIntoView.test.ts

@@ -1,69 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-
-import { useScrollWidgetIntoView } from '../useScrollWidgetIntoView';
-
-jest.mock('providers/Dashboard/Dashboard');
-
-type MockHTMLElement = {
-	scrollIntoView: jest.Mock;
-	focus: jest.Mock;
-};
-
-function createMockElement(): MockHTMLElement {
-	return {
-		scrollIntoView: jest.fn(),
-		focus: jest.fn(),
-	};
-}
-
-describe('useScrollWidgetIntoView', () => {
-	const mockedUseDashboard = useDashboard as jest.MockedFunction<
-		typeof useDashboard
-	>;
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('scrolls into view and focuses when toScrollWidgetId matches widget id', () => {
-		const setToScrollWidgetId = jest.fn();
-		const mockElement = createMockElement();
-		const ref = ({
-			current: mockElement,
-		} as unknown) as React.RefObject<HTMLDivElement>;
-
-		mockedUseDashboard.mockReturnValue(({
-			toScrollWidgetId: 'widget-id',
-			setToScrollWidgetId,
-		} as unknown) as ReturnType<typeof useDashboard>);
-
-		renderHook(() => useScrollWidgetIntoView('widget-id', ref));
-
-		expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
-			behavior: 'smooth',
-			block: 'center',
-		});
-		expect(mockElement.focus).toHaveBeenCalled();
-		expect(setToScrollWidgetId).toHaveBeenCalledWith('');
-	});
-
-	it('does nothing when toScrollWidgetId does not match widget id', () => {
-		const setToScrollWidgetId = jest.fn();
-		const mockElement = createMockElement();
-		const ref = ({
-			current: mockElement,
-		} as unknown) as React.RefObject<HTMLDivElement>;
-
-		mockedUseDashboard.mockReturnValue(({
-			toScrollWidgetId: 'other-widget',
-			setToScrollWidgetId,
-		} as unknown) as ReturnType<typeof useDashboard>);
-
-		renderHook(() => useScrollWidgetIntoView('widget-id', ref));
-
-		expect(mockElement.scrollIntoView).not.toHaveBeenCalled();
-		expect(mockElement.focus).not.toHaveBeenCalled();
-		expect(setToScrollWidgetId).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/visualization/hooks/useBarChartStacking.ts

@@ -1,125 +0,0 @@
-import {
-	MutableRefObject,
-	useCallback,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-} from 'react';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { has } from 'lodash-es';
-import uPlot from 'uplot';
-
-import { stackSeries } from '../charts/utils/stackSeriesUtils';
-
-/** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
-function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
-	return !plot.series[seriesIndex]?.show;
-}
-
-function canApplyStacking(
-	unstackedData: uPlot.AlignedData | null,
-	plot: uPlot,
-	isUpdating: boolean,
-): boolean {
-	return (
-		!isUpdating &&
-		!!unstackedData &&
-		!!plot.data &&
-		unstackedData[0]?.length === plot.data[0]?.length
-	);
-}
-
-function setupStackingHooks(
-	config: UPlotConfigBuilder,
-	applyStackingToChart: (plot: uPlot) => void,
-	isUpdatingRef: MutableRefObject<boolean>,
-): () => void {
-	const onDataChange = (plot: uPlot): void => {
-		if (!isUpdatingRef.current) {
-			applyStackingToChart(plot);
-		}
-	};
-
-	const onSeriesVisibilityChange = (
-		plot: uPlot,
-		_seriesIdx: number | null,
-		opts: uPlot.Series,
-	): void => {
-		if (!has(opts, 'focus')) {
-			applyStackingToChart(plot);
-		}
-	};
-
-	const removeSetDataHook = config.addHook('setData', onDataChange);
-	const removeSetSeriesHook = config.addHook(
-		'setSeries',
-		onSeriesVisibilityChange,
-	);
-
-	return (): void => {
-		removeSetDataHook?.();
-		removeSetSeriesHook?.();
-	};
-}
-
-export interface UseBarChartStackingParams {
-	data: uPlot.AlignedData;
-	isStackedBarChart?: boolean;
-	config: UPlotConfigBuilder | null;
-}
-
-/**
- * Handles stacking for bar charts: computes initial stacked data and re-stacks
- * when data or series visibility changes (e.g. legend toggles).
- */
-export function useBarChartStacking({
-	data,
-	isStackedBarChart = false,
-	config,
-}: UseBarChartStackingParams): uPlot.AlignedData {
-	// Store unstacked source data so uPlot hooks can access it (hooks run outside React's render cycle)
-	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
-	unstackedDataRef.current = isStackedBarChart ? data : null;
-
-	// Prevents re-entrant calls when we update chart data (avoids infinite loop in setData hook)
-	const isUpdatingChartRef = useRef(false);
-
-	const chartData = useMemo((): uPlot.AlignedData => {
-		if (!isStackedBarChart || !data || data.length < 2) {
-			return data;
-		}
-		const noSeriesHidden = (): boolean => false; // include all series in initial stack
-		const { data: stacked } = stackSeries(data, noSeriesHidden);
-		return stacked;
-	}, [data, isStackedBarChart]);
-
-	const applyStackingToChart = useCallback((plot: uPlot): void => {
-		const unstacked = unstackedDataRef.current;
-		if (
-			!unstacked ||
-			!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
-		) {
-			return;
-		}
-
-		const shouldExcludeSeries = (idx: number): boolean =>
-			isSeriesHidden(plot, idx);
-		const { data: stacked, bands } = stackSeries(unstacked, shouldExcludeSeries);
-
-		plot.delBand(null);
-		bands.forEach((band: uPlot.Band) => plot.addBand(band));
-
-		isUpdatingChartRef.current = true;
-		plot.setData(stacked);
-		isUpdatingChartRef.current = false;
-	}, []);
-
-	useLayoutEffect(() => {
-		if (!isStackedBarChart || !config) {
-			return undefined;
-		}
-		return setupStackingHooks(config, applyStackingToChart, isUpdatingChartRef);
-	}, [isStackedBarChart, config, applyStackingToChart]);
-
-	return chartData;
-}

frontend/src/container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView.ts

@@ -1,26 +0,0 @@
-import { RefObject, useEffect } from 'react';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-
-/**
- * Scrolls the given widget container into view when the dashboard
- * requests it via `toScrollWidgetId`.
- *
- * Intended for use in panel components that render a single widget.
- */
-export function useScrollWidgetIntoView<T extends HTMLElement>(
-	widgetId: string,
-	widgetContainerRef: RefObject<T>,
-): void {
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-
-	useEffect(() => {
-		if (toScrollWidgetId === widgetId) {
-			widgetContainerRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			widgetContainerRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widgetId, widgetContainerRef]);
-}

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -1,14 +1,12 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import { calculateChartDimensions } from 'container/DashboardContainer/visualization/charts/utils';
-import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 
 import './ChartLayout.styles.scss';
 
 export interface ChartLayoutProps {
-	showLegend?: boolean;
 	legendComponent: (legendPerSet: number) => React.ReactNode;
 	children: (props: {
 		chartWidth: number;
@@ -22,7 +20,6 @@ export interface ChartLayoutProps {
 	config: UPlotConfigBuilder;
 }
 export default function ChartLayout({
-	showLegend = true,
 	legendComponent,
 	children,
 	layoutChildren,
@@ -33,15 +30,6 @@ export default function ChartLayout({
 }: ChartLayoutProps): JSX.Element {
 	const chartDimensions = useMemo(
 		() => {
-			if (!showLegend) {
-				return {
-					width: containerWidth,
-					height: containerHeight,
-					legendWidth: 0,
-					legendHeight: 0,
-					averageLegendWidth: MAX_LEGEND_WIDTH,
-				};
-			}
 			const legendItemsMap = config.getLegendItems();
 			const seriesLabels = Object.values(legendItemsMap)
 				.map((item) => item.label)
@@ -54,7 +42,7 @@ export default function ChartLayout({
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[containerWidth, containerHeight, legendConfig, showLegend],
+		[containerWidth, containerHeight, legendConfig],
 	);
 
 	return (
@@ -72,17 +60,15 @@ export default function ChartLayout({
 						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
-				{showLegend && (
-					<div
-						className="chart-layout__legend-wrapper"
-						style={{
-							height: chartDimensions.legendHeight,
-							width: chartDimensions.legendWidth,
-						}}
-					>
-						{legendComponent(chartDimensions.averageLegendWidth)}
-					</div>
-				)}
+				<div
+					className="chart-layout__legend-wrapper"
+					style={{
+						height: chartDimensions.legendHeight,
+						width: chartDimensions.legendWidth,
+					}}
+				>
+					{legendComponent(chartDimensions.averageLegendWidth)}
+				</div>
 			</div>
 			{layoutChildren}
 		</div>

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -1,150 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
-import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import ContextMenu from 'periscope/components/ContextMenu';
-import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-import { getTimeRange } from 'utils/getTimeRange';
-
-import BarChart from '../../charts/BarChart/BarChart';
-import ChartManager from '../../components/ChartManager/ChartManager';
-import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
-import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
-
-import '../Panel.styles.scss';
-
-function BarPanel(props: PanelWrapperProps): JSX.Element {
-	const {
-		panelMode,
-		queryResponse,
-		widget,
-		onDragSelect,
-		isFullViewMode,
-		onToggleModelHandler,
-	} = props;
-	const uPlotRef = useRef<uPlot | null>(null);
-	const graphRef = useRef<HTMLDivElement>(null);
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	useScrollWidgetIntoView(widget.id, graphRef);
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange(queryResponse);
-
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [queryResponse]);
-
-	const {
-		coordinates,
-		popoverPosition,
-		onClose,
-		menuItemsConfig,
-		clickHandlerWithContextMenu,
-	} = usePanelContextMenu({
-		widget,
-		queryResponse,
-	});
-
-	const config = useMemo(() => {
-		return prepareBarPanelConfig({
-			widget,
-			isDarkMode,
-			currentQuery: widget.query,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			timezone,
-			panelMode,
-			minTimeScale: minTimeScale,
-			maxTimeScale: maxTimeScale,
-		});
-	}, [
-		widget,
-		isDarkMode,
-		queryResponse?.data?.payload,
-		clickHandlerWithContextMenu,
-		onDragSelect,
-		minTimeScale,
-		maxTimeScale,
-		timezone,
-		panelMode,
-	]);
-
-	const chartData = useMemo(() => {
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareBarPanelData(queryResponse?.data?.payload);
-	}, [queryResponse?.data?.payload]);
-
-	const layoutChildren = useMemo(() => {
-		if (!isFullViewMode) {
-			return null;
-		}
-		return (
-			<ChartManager
-				config={config}
-				alignedData={chartData}
-				yAxisUnit={widget.yAxisUnit}
-				onCancel={onToggleModelHandler}
-			/>
-		);
-	}, [
-		isFullViewMode,
-		config,
-		chartData,
-		widget.yAxisUnit,
-		onToggleModelHandler,
-	]);
-
-	const onPlotDestroy = useCallback(() => {
-		uPlotRef.current = null;
-	}, []);
-
-	const onPlotRef = useCallback((plot: uPlot | null): void => {
-		uPlotRef.current = plot;
-	}, []);
-
-	return (
-		<div className="panel-container" ref={graphRef}>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<BarChart
-					config={config}
-					legendConfig={{
-						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
-					}}
-					plotRef={onPlotRef}
-					onDestroy={onPlotDestroy}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
-					data={chartData as uPlot.AlignedData}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					layoutChildren={layoutChildren}
-					isStackedBarChart={widget.stackedBarChart ?? false}
-				>
-					<ContextMenu
-						coordinates={coordinates}
-						popoverPosition={popoverPosition}
-						title={menuItemsConfig.header as string}
-						items={menuItemsConfig.items}
-						onClose={onClose}
-					/>
-				</BarChart>
-			)}
-		</div>
-	);
-}
-
-export default BarPanel;

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -1,115 +0,0 @@
-import { ExecStats } from 'api/v5/v5';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	VisibilityMode,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { get } from 'lodash-es';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
-import { AlignedData } from 'uplot';
-
-import { PanelMode } from '../types';
-import { fillMissingXAxisTimestamps, getXAxisTimestamps } from '../utils';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
-
-export function prepareBarPanelData(
-	apiResponse: MetricRangePayloadProps,
-): AlignedData {
-	const seriesList = apiResponse?.data?.result || [];
-	const timestampArr = getXAxisTimestamps(seriesList);
-	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
-	return [timestampArr, ...yAxisValuesArr];
-}
-
-export function prepareBarPanelConfig({
-	widget,
-	isDarkMode,
-	currentQuery,
-	onClick,
-	onDragSelect,
-	apiResponse,
-	timezone,
-	panelMode,
-	minTimeScale,
-	maxTimeScale,
-}: {
-	widget: Widgets;
-	isDarkMode: boolean;
-	currentQuery: Query;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse: MetricRangePayloadProps;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}): UPlotConfigBuilder {
-	const stepIntervals: ExecStats['stepIntervals'] = get(
-		apiResponse,
-		'data.newResult.meta.stepIntervals',
-		{},
-	);
-	const minStepInterval = Math.min(...Object.values(stepIntervals));
-
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		onClick,
-		onDragSelect,
-		apiResponse,
-		timezone,
-		panelMode,
-		panelType: PANEL_TYPES.BAR,
-		minTimeScale,
-		maxTimeScale,
-		stepInterval: minStepInterval,
-	});
-
-	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
-		builder.setBands(getInitialStackedBands(seriesCount));
-	}
-
-	const seriesList: QueryData[] = apiResponse?.data?.result || [];
-	seriesList.forEach((series) => {
-		const baseLabelName = getLabelName(
-			series.metric,
-			series.queryName || '', // query
-			series.legend || '',
-		);
-
-		const label = currentQuery
-			? getLegend(series, currentQuery, baseLabelName)
-			: baseLabelName;
-
-		const currentStepInterval = get(stepIntervals, series.queryName, undefined);
-
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.BAR,
-			label: label,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
-			showPoints: VisibilityMode.Never,
-			pointSize: 5,
-			isDarkMode,
-			stepInterval: currentStepInterval,
-		});
-	});
-
-	return builder;
-}

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx

@@ -1,114 +0,0 @@
-import { useMemo, useRef } from 'react';
-import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
-import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-import Histogram from '../../charts/Histogram/Histogram';
-import ChartManager from '../../components/ChartManager/ChartManager';
-import {
-	prepareHistogramPanelConfig,
-	prepareHistogramPanelData,
-} from './utils';
-
-import '../Panel.styles.scss';
-
-function HistogramPanel(props: PanelWrapperProps): JSX.Element {
-	const {
-		panelMode,
-		queryResponse,
-		widget,
-		isFullViewMode,
-		onToggleModelHandler,
-	} = props;
-	const uPlotRef = useRef<uPlot | null>(null);
-	const graphRef = useRef<HTMLDivElement>(null);
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	useScrollWidgetIntoView(widget.id, graphRef);
-
-	const config = useMemo(() => {
-		return prepareHistogramPanelConfig({
-			widget,
-			isDarkMode,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			panelMode,
-		});
-	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
-
-	const chartData = useMemo(() => {
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareHistogramPanelData({
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			bucketWidth: widget?.bucketWidth,
-			bucketCount: widget?.bucketCount,
-			mergeAllActiveQueries: widget?.mergeAllActiveQueries,
-		});
-	}, [
-		queryResponse?.data?.payload,
-		widget?.bucketWidth,
-		widget?.bucketCount,
-		widget?.mergeAllActiveQueries,
-	]);
-
-	const layoutChildren = useMemo(() => {
-		if (!isFullViewMode || widget.mergeAllActiveQueries) {
-			return null;
-		}
-		return (
-			<ChartManager
-				config={config}
-				alignedData={chartData}
-				yAxisUnit={widget.yAxisUnit}
-				onCancel={onToggleModelHandler}
-			/>
-		);
-	}, [
-		isFullViewMode,
-		config,
-		chartData,
-		widget.yAxisUnit,
-		onToggleModelHandler,
-		widget.mergeAllActiveQueries,
-	]);
-
-	return (
-		<div className="panel-container" ref={graphRef}>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<Histogram
-					config={config}
-					legendConfig={{
-						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
-					}}
-					plotRef={(plot: uPlot | null): void => {
-						uPlotRef.current = plot;
-					}}
-					onDestroy={(): void => {
-						uPlotRef.current = null;
-					}}
-					isQueriesMerged={widget.mergeAllActiveQueries}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
-					syncMode={DashboardCursorSync.Crosshair}
-					timezone={timezone.value}
-					data={chartData as uPlot.AlignedData}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					layoutChildren={layoutChildren}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default HistogramPanel;

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/__tests__/HistogramPanel.test.tsx

@@ -1,223 +0,0 @@
-/* eslint-disable simple-import-sort/imports */
-import type { UseQueryResult } from 'react-query';
-import { render, screen } from 'tests/test-utils';
-
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { Widgets } from 'types/api/dashboard/getAll';
-import {
-	MetricQueryRangeSuccessResponse,
-	MetricRangePayloadProps,
-} from 'types/api/metrics/getQueryRange';
-
-import HistogramPanel from '../HistogramPanel';
-import { HistogramChartProps } from 'container/DashboardContainer/visualization/charts/types';
-
-jest.mock('hooks/useDimensions', () => ({
-	useResizeObserver: jest.fn().mockReturnValue({ width: 800, height: 400 }),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: jest.fn().mockReturnValue(false),
-}));
-
-jest.mock('providers/Timezone', () => ({
-	__esModule: true,
-	// Provide a no-op provider component so AllTheProviders can render
-	default: ({ children }: { children: React.ReactNode }): JSX.Element => (
-		<>{children}</>
-	),
-	// And mock the hook used by HistogramPanel
-	useTimezone: jest.fn().mockReturnValue({
-		timezone: { value: 'UTC' },
-	}),
-}));
-
-jest.mock(
-	'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView',
-	() => ({
-		useScrollWidgetIntoView: jest.fn(),
-	}),
-);
-
-jest.mock(
-	'container/DashboardContainer/visualization/charts/Histogram/Histogram',
-	() => ({
-		__esModule: true,
-		default: (props: HistogramChartProps): JSX.Element => (
-			<div data-testid="histogram-chart">
-				<div data-testid="histogram-props">
-					{JSON.stringify({
-						legendPosition: props.legendConfig?.position,
-						isQueriesMerged: props.isQueriesMerged,
-						yAxisUnit: props.yAxisUnit,
-						decimalPrecision: props.decimalPrecision,
-					})}
-				</div>
-				{props.layoutChildren}
-			</div>
-		),
-	}),
-);
-
-jest.mock(
-	'container/DashboardContainer/visualization/components/ChartManager/ChartManager',
-	() => ({
-		__esModule: true,
-		default: (): JSX.Element => (
-			<div data-testid="chart-manager">ChartManager</div>
-		),
-	}),
-);
-
-function createQueryResponse(
-	payloadOverrides: Partial<MetricRangePayloadProps> = {},
-): { data: { payload: MetricRangePayloadProps } } {
-	const basePayload: MetricRangePayloadProps = {
-		data: {
-			result: [
-				{
-					metric: {},
-					queryName: 'A',
-					legend: 'Series A',
-					values: [
-						[1, '10'],
-						[2, '20'],
-					],
-				},
-			],
-			resultType: 'matrix',
-			newResult: {
-				data: {
-					result: [],
-					resultType: 'matrix',
-				},
-			},
-		},
-	};
-
-	return {
-		data: {
-			payload: {
-				...basePayload,
-				...payloadOverrides,
-			},
-		},
-	};
-}
-
-type WidgetLike = {
-	id: string;
-	yAxisUnit: string;
-	decimalPrecision: number;
-	legendPosition: LegendPosition;
-	mergeAllActiveQueries: boolean;
-};
-
-function createWidget(overrides: Partial<WidgetLike> = {}): WidgetLike {
-	return {
-		id: 'widget-id',
-		yAxisUnit: 'ms',
-		decimalPrecision: 2,
-		legendPosition: LegendPosition.BOTTOM,
-		mergeAllActiveQueries: false,
-		...overrides,
-	};
-}
-
-describe('HistogramPanel', () => {
-	it('renders Histogram when container has dimensions', () => {
-		const widget = (createWidget() as unknown) as Widgets;
-		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
-			MetricQueryRangeSuccessResponse,
-			Error
-		>;
-
-		render(
-			<HistogramPanel
-				panelMode={PanelMode.DASHBOARD_VIEW}
-				widget={widget}
-				queryResponse={queryResponse}
-				isFullViewMode={false}
-				onToggleModelHandler={jest.fn()}
-				onDragSelect={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByTestId('histogram-chart')).toBeInTheDocument();
-	});
-
-	it('passes legend position and other props to Histogram', () => {
-		const widget = (createWidget({
-			legendPosition: LegendPosition.RIGHT,
-		}) as unknown) as Widgets;
-		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
-			MetricQueryRangeSuccessResponse,
-			Error
-		>;
-
-		render(
-			<HistogramPanel
-				panelMode={PanelMode.DASHBOARD_VIEW}
-				widget={widget}
-				queryResponse={queryResponse}
-				isFullViewMode={false}
-				onToggleModelHandler={jest.fn()}
-				onDragSelect={jest.fn()}
-			/>,
-		);
-
-		const propsJson = screen.getByTestId('histogram-props').textContent || '{}';
-		const parsed = JSON.parse(propsJson);
-
-		expect(parsed.legendPosition).toBe(LegendPosition.RIGHT);
-		expect(parsed.yAxisUnit).toBe('ms');
-		expect(parsed.decimalPrecision).toBe(2);
-	});
-
-	it('renders ChartManager in full view when queries are not merged', () => {
-		const widget = (createWidget({
-			mergeAllActiveQueries: false,
-		}) as unknown) as Widgets;
-		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
-			MetricQueryRangeSuccessResponse,
-			Error
-		>;
-
-		render(
-			<HistogramPanel
-				panelMode={PanelMode.DASHBOARD_VIEW}
-				widget={widget}
-				queryResponse={queryResponse}
-				isFullViewMode
-				onToggleModelHandler={jest.fn()}
-				onDragSelect={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByTestId('chart-manager')).toBeInTheDocument();
-	});
-
-	it('does not render ChartManager when queries are merged', () => {
-		const widget = (createWidget({
-			mergeAllActiveQueries: true,
-		}) as unknown) as Widgets;
-		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
-			MetricQueryRangeSuccessResponse,
-			Error
-		>;
-
-		render(
-			<HistogramPanel
-				panelMode={PanelMode.DASHBOARD_VIEW}
-				widget={widget}
-				queryResponse={queryResponse}
-				isFullViewMode
-				onToggleModelHandler={jest.fn()}
-				onDragSelect={jest.fn()}
-			/>,
-		);
-
-		expect(screen.queryByTestId('chart-manager')).not.toBeInTheDocument();
-	});
-});

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts

@@ -1,231 +0,0 @@
-import { histogramBucketSizes } from '@grafana/data';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { DEFAULT_BUCKET_COUNT } from 'container/PanelWrapper/constants';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { AlignedData } from 'uplot';
-import { incrRoundDn, roundDecimals } from 'utils/round';
-
-import { PanelMode } from '../types';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
-import {
-	buildHistogramBuckets,
-	mergeAlignedDataTables,
-	prependNullBinToFirstHistogramSeries,
-	replaceUndefinedWithNullInAlignedData,
-} from '../utils/histogram';
-
-export interface PrepareHistogramPanelDataParams {
-	apiResponse: MetricRangePayloadProps;
-	bucketWidth?: number;
-	bucketCount?: number;
-	mergeAllActiveQueries?: boolean;
-}
-
-const BUCKET_OFFSET = 0;
-const HIST_SORT = (a: number, b: number): number => a - b;
-
-function extractNumericValues(
-	result: MetricRangePayloadProps['data']['result'],
-): number[] {
-	const values: number[] = [];
-	for (const item of result) {
-		for (const [, valueStr] of item.values) {
-			values.push(Number.parseFloat(valueStr) || 0);
-		}
-	}
-	return values;
-}
-
-function computeSmallestDelta(sortedValues: number[]): number {
-	if (sortedValues.length <= 1) {
-		return 0;
-	}
-	let smallest = Infinity;
-	for (let i = 1; i < sortedValues.length; i++) {
-		const delta = sortedValues[i] - sortedValues[i - 1];
-		if (delta > 0) {
-			smallest = Math.min(smallest, delta);
-		}
-	}
-	return smallest === Infinity ? 0 : smallest;
-}
-
-function selectBucketSize({
-	range,
-	bucketCount,
-	smallestDelta,
-	bucketWidthOverride,
-}: {
-	range: number;
-	bucketCount: number;
-	smallestDelta: number;
-	bucketWidthOverride?: number;
-}): number {
-	if (bucketWidthOverride != null && bucketWidthOverride > 0) {
-		return bucketWidthOverride;
-	}
-	const targetSize = range / bucketCount;
-	for (const candidate of histogramBucketSizes) {
-		if (targetSize < candidate && candidate >= smallestDelta) {
-			return candidate;
-		}
-	}
-	return 0;
-}
-
-function buildFrames(
-	result: MetricRangePayloadProps['data']['result'],
-	mergeAllActiveQueries: boolean,
-): number[][] {
-	const frames: number[][] = result.map((item) =>
-		item.values.map(([, valueStr]) => Number.parseFloat(valueStr) || 0),
-	);
-	if (mergeAllActiveQueries && frames.length > 1) {
-		const first = frames[0];
-		for (let i = 1; i < frames.length; i++) {
-			first.push(...frames[i]);
-			frames[i] = [];
-		}
-	}
-	return frames;
-}
-
-export function prepareHistogramPanelData({
-	apiResponse,
-	bucketWidth,
-	bucketCount: bucketCountProp = DEFAULT_BUCKET_COUNT,
-	mergeAllActiveQueries = false,
-}: PrepareHistogramPanelDataParams): AlignedData {
-	const bucketCount = bucketCountProp ?? DEFAULT_BUCKET_COUNT;
-	const result = apiResponse.data.result;
-
-	const seriesValues = extractNumericValues(result);
-	if (seriesValues.length === 0) {
-		return [[]];
-	}
-
-	const sorted = [...seriesValues].sort((a, b) => a - b);
-	const min = sorted[0];
-	const max = sorted[sorted.length - 1];
-	const range = max - min;
-	const smallestDelta = computeSmallestDelta(sorted);
-	let bucketSize = selectBucketSize({
-		range,
-		bucketCount,
-		smallestDelta,
-		bucketWidthOverride: bucketWidth,
-	});
-	if (bucketSize <= 0) {
-		bucketSize = range > 0 ? range / bucketCount : 1;
-	}
-
-	const getBucket = (v: number): number =>
-		roundDecimals(incrRoundDn(v - BUCKET_OFFSET, bucketSize) + BUCKET_OFFSET, 9);
-
-	const frames = buildFrames(result, mergeAllActiveQueries);
-	const histogramsPerSeries: AlignedData[] = frames
-		.filter((frame) => frame.length > 0)
-		.map((frame) => buildHistogramBuckets(frame, getBucket, HIST_SORT));
-
-	if (histogramsPerSeries.length === 0) {
-		return [[]];
-	}
-
-	const mergedHistogramData = mergeAlignedDataTables(histogramsPerSeries);
-	replaceUndefinedWithNullInAlignedData(mergedHistogramData);
-	prependNullBinToFirstHistogramSeries(mergedHistogramData, bucketSize);
-	return mergedHistogramData;
-}
-
-export function prepareHistogramPanelConfig({
-	widget,
-	apiResponse,
-	panelMode,
-	isDarkMode,
-}: {
-	widget: Widgets;
-	apiResponse: MetricRangePayloadProps;
-	panelMode: PanelMode;
-	isDarkMode: boolean;
-}): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		apiResponse,
-		panelMode,
-		panelType: PANEL_TYPES.HISTOGRAM,
-	});
-	builder.setCursor({
-		drag: {
-			x: false,
-			y: false,
-			setScale: true,
-		},
-		focus: {
-			prox: 1e3,
-		},
-	});
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: false,
-		auto: true,
-	});
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		auto: true,
-		min: 0,
-	});
-
-	const currentQuery = widget.query;
-	const mergeAllActiveQueries = widget?.mergeAllActiveQueries ?? false;
-
-	// When merged, data has only one y column; add one series to match. Otherwise add one per result.
-	if (mergeAllActiveQueries) {
-		builder.addSeries({
-			label: '',
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.HISTOGRAM,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
-			barWidthFactor: 1,
-			pointSize: 5,
-			lineColor: '#3f5ecc',
-			fillColor: '#4E74F8',
-			isDarkMode,
-		});
-	} else {
-		apiResponse.data.result.forEach((series) => {
-			const baseLabelName = getLabelName(
-				series.metric,
-				series.queryName || '', // query
-				series.legend || '',
-			);
-
-			const label = currentQuery
-				? getLegend(series, currentQuery, baseLabelName)
-				: baseLabelName;
-
-			builder.addSeries({
-				label: label,
-				scaleKey: 'y',
-				drawStyle: DrawStyle.Bar,
-				panelType: PANEL_TYPES.HISTOGRAM,
-				colorMapping: widget.customLegendColors ?? {},
-				spanGaps: false,
-				barWidthFactor: 1,
-				pointSize: 5,
-				isDarkMode,
-			});
-		});
-	}
-
-	return builder;
-}

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -2,12 +2,12 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
 import ChartManager from 'container/DashboardContainer/visualization/components/ChartManager/ChartManager';
 import { usePanelContextMenu } from 'container/DashboardContainer/visualization/hooks/usePanelContextMenu';
-import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
@@ -26,6 +26,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 	} = props;
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
@@ -34,7 +35,16 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useScrollWidgetIntoView(widget.id, graphRef);
+	useEffect(() => {
+		if (toScrollWidgetId === widget.id) {
+			graphRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			graphRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/__tests__/utils.test.ts

@@ -1,325 +0,0 @@
-import { Widgets } from 'types/api/dashboard/getAll';
-import {
-	MetricRangePayloadProps,
-	MetricRangePayloadV3,
-} from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { PanelMode } from '../../types';
-import { prepareChartData, prepareUPlotConfig } from '../utils';
-
-jest.mock(
-	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
-	() => ({
-		getStoredSeriesVisibility: jest.fn(),
-	}),
-);
-
-jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
-	__esModule: true,
-	default: jest.fn().mockReturnValue({ name: 'onClickPlugin' }),
-}));
-
-jest.mock('lib/dashboard/getQueryResults', () => ({
-	getLegend: jest.fn(
-		(_queryData: unknown, _query: unknown, labelName: string) =>
-			`legend-${labelName}`,
-	),
-}));
-
-jest.mock('lib/getLabelName', () => ({
-	__esModule: true,
-	default: jest.fn(
-		(_metric: unknown, _queryName: string, _legend: string) => 'baseLabel',
-	),
-}));
-
-const getLegendMock = jest.requireMock('lib/dashboard/getQueryResults')
-	.getLegend as jest.Mock;
-const getLabelNameMock = jest.requireMock('lib/getLabelName')
-	.default as jest.Mock;
-
-const createApiResponse = (
-	result: MetricRangePayloadProps['data']['result'] = [],
-): MetricRangePayloadProps => ({
-	data: {
-		result,
-		resultType: 'matrix',
-		newResult: (null as unknown) as MetricRangePayloadV3,
-	},
-});
-
-const createWidget = (overrides: Partial<Widgets> = {}): Widgets =>
-	({
-		id: 'widget-1',
-		yAxisUnit: 'ms',
-		isLogScale: false,
-		thresholds: [],
-		customLegendColors: {},
-		...overrides,
-	} as Widgets);
-
-const defaultTimezone = {
-	name: 'UTC',
-	value: 'UTC',
-	offset: 'UTC',
-	searchIndex: 'UTC',
-};
-
-describe('TimeSeriesPanel utils', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		getLabelNameMock.mockReturnValue('baseLabel');
-		getLegendMock.mockImplementation(
-			(_queryData: unknown, _query: unknown, labelName: string) =>
-				`legend-${labelName}`,
-		);
-	});
-
-	describe('prepareChartData', () => {
-		it('returns aligned data with timestamps and empty series when result is empty', () => {
-			const apiResponse = createApiResponse([]);
-
-			const data = prepareChartData(apiResponse);
-
-			expect(data).toHaveLength(1);
-			expect(data[0]).toEqual([]);
-		});
-
-		it('returns timestamps and one series of y values for single series', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q',
-					legend: 'Series A',
-					values: [
-						[1000, '10'],
-						[2000, '20'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const data = prepareChartData(apiResponse);
-
-			expect(data).toHaveLength(2);
-			expect(data[0]).toEqual([1000, 2000]);
-			expect(data[1]).toEqual([10, 20]);
-		});
-
-		it('merges timestamps and fills missing values with null for multiple series', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					values: [
-						[1000, '1'],
-						[3000, '3'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-				{
-					metric: {},
-					queryName: 'Q2',
-					values: [
-						[1000, '10'],
-						[2000, '20'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const data = prepareChartData(apiResponse);
-
-			expect(data[0]).toEqual([1000, 2000, 3000]);
-			// First series: 1, null, 3
-			expect(data[1]).toEqual([1, null, 3]);
-			// Second series: 10, 20, null
-			expect(data[2]).toEqual([10, 20, null]);
-		});
-	});
-
-	describe('prepareUPlotConfig', () => {
-		const baseParams = {
-			widget: createWidget(),
-			isDarkMode: true,
-			currentQuery: {} as Query,
-			onClick: jest.fn(),
-			onDragSelect: jest.fn(),
-			apiResponse: createApiResponse(),
-			timezone: defaultTimezone,
-			panelMode: PanelMode.DASHBOARD_VIEW,
-		};
-
-		it('adds no series when apiResponse has empty result', () => {
-			const builder = prepareUPlotConfig(baseParams);
-
-			const config = builder.getConfig();
-			// Base series (timestamp) only
-			expect(config.series).toHaveLength(1);
-		});
-
-		it('adds one series per result item with label from getLabelName when no currentQuery', () => {
-			getLegendMock.mockReset();
-			const apiResponse = createApiResponse([
-				{
-					metric: { __name__: 'cpu' },
-					queryName: 'Q1',
-					legend: 'CPU',
-					values: [
-						[1000, '1'],
-						[2000, '2'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const builder = prepareUPlotConfig({
-				...baseParams,
-				apiResponse,
-				currentQuery: (null as unknown) as Query,
-			});
-
-			expect(getLabelNameMock).toHaveBeenCalled();
-			expect(getLegendMock).not.toHaveBeenCalled();
-
-			const config = builder.getConfig();
-			expect(config.series).toHaveLength(2);
-			expect(config.series?.[1]).toMatchObject({
-				label: 'baseLabel',
-				scale: 'y',
-			});
-		});
-
-		it('uses getLegend for label when currentQuery is provided', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					legend: 'L1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			prepareUPlotConfig({
-				...baseParams,
-				apiResponse,
-				currentQuery: {} as Query,
-			});
-
-			expect(getLegendMock).toHaveBeenCalledWith(
-				{
-					legend: 'L1',
-					metric: {},
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				},
-				{},
-				'baseLabel',
-			);
-
-			const config = prepareUPlotConfig({
-				...baseParams,
-				apiResponse,
-				currentQuery: {} as Query,
-			}).getConfig();
-			expect(config.series?.[1]).toMatchObject({
-				label: 'legend-baseLabel',
-			});
-		});
-
-		it('uses DrawStyle.Line and VisibilityMode.Never when series has multiple valid points', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q',
-					values: [
-						[1000, '1'],
-						[2000, '2'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const builder = prepareUPlotConfig({ ...baseParams, apiResponse });
-			const config = builder.getConfig();
-			const series = config.series?.[1];
-
-			expect(config.series).toHaveLength(2);
-			// Line style and points never for multi-point series (checked via builder API)
-			const legendItems = builder.getLegendItems();
-			expect(Object.keys(legendItems)).toHaveLength(1);
-			// multi-point series → points hidden
-			expect(series).toBeDefined();
-			expect(series!.points?.show).toBe(false);
-		});
-
-		it('uses DrawStyle.Points and shows points when series has only one valid point', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q',
-					values: [
-						[1000, '1'],
-						[2000, 'NaN'],
-						[3000, 'invalid'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const builder = prepareUPlotConfig({ ...baseParams, apiResponse });
-			const config = builder.getConfig();
-
-			expect(config.series).toHaveLength(2);
-			const seriesConfig = config.series?.[1];
-			expect(seriesConfig).toBeDefined();
-			// Single valid point -> Points draw style (asserted via series config)
-			expect(seriesConfig).toMatchObject({
-				scale: 'y',
-				spanGaps: true,
-			});
-			// single-point series → points shown
-			expect(seriesConfig).toBeDefined();
-			expect(seriesConfig!.points?.show).toBe(true);
-		});
-
-		it('uses widget customLegendColors to set series stroke color', () => {
-			const widget = createWidget({
-				customLegendColors: { 'legend-baseLabel': '#ff0000' },
-			});
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const builder = prepareUPlotConfig({
-				...baseParams,
-				widget,
-				apiResponse,
-			});
-
-			const config = builder.getConfig();
-			const seriesConfig = config.series?.[1];
-			expect(seriesConfig).toBeDefined();
-			expect(seriesConfig!.stroke).toBe('#ff0000');
-		});
-
-		it('adds multiple series when result has multiple items', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-				{
-					metric: {},
-					queryName: 'Q2',
-					values: [[1000, '2']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const builder = prepareUPlotConfig({ ...baseParams, apiResponse });
-			const config = builder.getConfig();
-
-			expect(config.series).toHaveLength(3);
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -1,4 +1,3 @@
-import { ExecStats } from 'api/v5/v5';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
@@ -15,12 +14,9 @@ import {
 	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { isInvalidPlotValue } from 'lib/uPlotV2/utils/dataUtils';
-import get from 'lodash-es/get';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
 
 import { PanelMode } from '../types';
 import { buildBaseConfig } from '../utils/baseConfigBuilder';
@@ -35,22 +31,6 @@ export const prepareChartData = (
 	return [timestampArr, ...yAxisValuesArr];
 };
 
-function hasSingleVisiblePointForSeries(series: QueryData): boolean {
-	const rawValues = series.values ?? [];
-	let validPointCount = 0;
-
-	for (const [, rawValue] of rawValues) {
-		if (!isInvalidPlotValue(rawValue)) {
-			validPointCount += 1;
-			if (validPointCount > 1) {
-				return false;
-			}
-		}
-	}
-
-	return true;
-}
-
 export const prepareUPlotConfig = ({
 	widget,
 	isDarkMode,
@@ -74,13 +54,6 @@ export const prepareUPlotConfig = ({
 	minTimeScale?: number;
 	maxTimeScale?: number;
 }): UPlotConfigBuilder => {
-	const stepIntervals: ExecStats['stepIntervals'] = get(
-		apiResponse,
-		'data.newResult.meta.stepIntervals',
-		{},
-	);
-	const minStepInterval = Math.min(...Object.values(stepIntervals));
-
 	const builder = buildBaseConfig({
 		widget,
 		isDarkMode,
@@ -92,11 +65,9 @@ export const prepareUPlotConfig = ({
 		panelType: PANEL_TYPES.TIME_SERIES,
 		minTimeScale,
 		maxTimeScale,
-		stepInterval: minStepInterval,
 	});
 
 	apiResponse.data?.result?.forEach((series) => {
-		const hasSingleValidPoint = hasSingleVisiblePointForSeries(series);
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query
@@ -109,15 +80,13 @@ export const prepareUPlotConfig = ({
 
 		builder.addSeries({
 			scaleKey: 'y',
-			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
+			drawStyle: DrawStyle.Line,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: true,
+			spanGaps: false,
 			lineStyle: LineStyle.Solid,
 			lineInterpolation: LineInterpolation.Spline,
-			showPoints: hasSingleValidPoint
-				? VisibilityMode.Always
-				: VisibilityMode.Never,
+			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
 			panelType: PANEL_TYPES.TIME_SERIES,

frontend/src/container/DashboardContainer/visualization/panels/utils/__tests__/baseConfigBuilder.test.ts

@@ -1,233 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { STEP_INTERVAL_MULTIPLIER } from 'lib/uPlotV2/constants';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-import { PanelMode } from '../../types';
-import { buildBaseConfig } from '../baseConfigBuilder';
-
-jest.mock(
-	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
-	() => ({
-		getStoredSeriesVisibility: jest.fn(),
-	}),
-);
-
-jest.mock('lib/uPlotV2/utils', () => ({
-	calculateWidthBasedOnStepInterval: jest.fn(),
-}));
-
-const calculateWidthBasedOnStepIntervalMock = jest.requireMock(
-	'lib/uPlotV2/utils',
-).calculateWidthBasedOnStepInterval as jest.Mock;
-
-jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
-	__esModule: true,
-	default: jest.fn().mockReturnValue({ name: 'onClickPlugin' }),
-}));
-
-const createWidget = (overrides: Partial<Widgets> = {}): Widgets =>
-	({
-		id: 'widget-1',
-		yAxisUnit: 'ms',
-		isLogScale: false,
-		softMin: undefined,
-		softMax: undefined,
-		thresholds: [],
-		...overrides,
-	} as Widgets);
-
-const createApiResponse = (
-	overrides: Partial<MetricRangePayloadProps> = {},
-): MetricRangePayloadProps =>
-	({
-		data: { result: [], resultType: 'matrix', newResult: null },
-		...overrides,
-	} as MetricRangePayloadProps);
-
-const baseProps = {
-	widget: createWidget(),
-	apiResponse: createApiResponse(),
-	isDarkMode: true,
-	panelMode: PanelMode.DASHBOARD_VIEW,
-	panelType: PANEL_TYPES.TIME_SERIES,
-};
-
-describe('buildBaseConfig', () => {
-	it('returns a UPlotConfigBuilder instance', () => {
-		const builder = buildBaseConfig(baseProps);
-
-		expect(builder).toBeDefined();
-		expect(typeof builder.getConfig).toBe('function');
-		expect(typeof builder.getLegendItems).toBe('function');
-	});
-
-	it('configures builder with widgetId and DASHBOARD_VIEW preferences', () => {
-		const builder = buildBaseConfig({
-			...baseProps,
-			panelMode: PanelMode.DASHBOARD_VIEW,
-			widget: createWidget({ id: 'my-widget' }),
-		});
-
-		expect(builder.getWidgetId()).toBe('my-widget');
-		expect(builder.getShouldSaveSelectionPreference()).toBe(true);
-	});
-
-	it('configures builder with IN_MEMORY selection when panelMode is DASHBOARD_EDIT', () => {
-		const builder = buildBaseConfig({
-			...baseProps,
-			panelMode: PanelMode.DASHBOARD_EDIT,
-		});
-
-		expect(builder.getShouldSaveSelectionPreference()).toBe(false);
-		const config = builder.getConfig();
-		expect(config.series).toBeDefined();
-	});
-
-	it('passes stepInterval to builder and cursor prox uses width * multiplier', () => {
-		const stepInterval = 60;
-		const mockWidth = 100;
-		calculateWidthBasedOnStepIntervalMock.mockReturnValue(mockWidth);
-
-		const builder = buildBaseConfig({
-			...baseProps,
-			stepInterval,
-		});
-
-		const config = builder.getConfig();
-		const prox = config.cursor?.hover?.prox;
-		expect(typeof prox).toBe('function');
-
-		const uPlotInstance = {} as uPlot;
-		const proxResult = (prox as (u: uPlot) => number)(uPlotInstance);
-
-		expect(calculateWidthBasedOnStepIntervalMock).toHaveBeenCalledWith({
-			uPlotInstance,
-			stepInterval,
-		});
-		expect(proxResult).toBe(mockWidth * STEP_INTERVAL_MULTIPLIER);
-	});
-
-	it('adds x scale with time config and min/max when provided', () => {
-		const builder = buildBaseConfig({
-			...baseProps,
-			minTimeScale: 1000,
-			maxTimeScale: 2000,
-		});
-
-		const config = builder.getConfig();
-		expect(config.scales?.x).toBeDefined();
-		expect(config.scales?.x?.time).toBe(true);
-		const range = config.scales?.x?.range;
-		expect(Array.isArray(range)).toBe(true);
-		expect((range as [number, number])[0]).toBe(1000);
-	});
-
-	it('configures log scale on y axis when widget.isLogScale is true', () => {
-		const builder = buildBaseConfig({
-			...baseProps,
-			widget: createWidget({ isLogScale: true }),
-		});
-
-		const config = builder.getConfig();
-		expect(config.scales?.y).toBeDefined();
-		expect(config.scales?.y?.log).toBe(10);
-	});
-
-	it('adds onClick plugin when onClick is a function', () => {
-		const onClickPlugin = jest.requireMock('lib/uPlotLib/plugins/onClickPlugin')
-			.default;
-		const onClick = jest.fn();
-
-		buildBaseConfig({
-			...baseProps,
-			onClick,
-			apiResponse: createApiResponse(),
-		});
-
-		expect(onClickPlugin).toHaveBeenCalledWith({
-			onClick,
-			apiResponse: expect.any(Object),
-		});
-	});
-
-	it('does not add onClick plugin when onClick is not a function', () => {
-		const onClickPlugin = jest.requireMock('lib/uPlotLib/plugins/onClickPlugin')
-			.default;
-
-		const builder = buildBaseConfig({
-			...baseProps,
-		});
-
-		const config = builder.getConfig();
-		const plugins = config.plugins ?? [];
-		expect(
-			plugins.some((p) => (p as { name?: string }).name === 'onClickPlugin'),
-		).toBe(false);
-		expect(onClickPlugin).not.toHaveBeenCalled();
-	});
-
-	it('adds thresholds from widget', () => {
-		const builder = buildBaseConfig({
-			...baseProps,
-			widget: createWidget({
-				thresholds: [
-					{
-						thresholdValue: 80,
-						thresholdColor: '#ff0000',
-						thresholdUnit: 'ms',
-						thresholdLabel: 'High',
-					},
-				] as Widgets['thresholds'],
-			}),
-		});
-
-		const config = builder.getConfig();
-		const drawHooks = config.hooks?.draw ?? [];
-		expect(drawHooks.length).toBeGreaterThan(0);
-	});
-
-	it('adds x and y axes with correct scaleKeys and panelType', () => {
-		const builder = buildBaseConfig(baseProps);
-
-		const config = builder.getConfig();
-		expect(config.axes).toHaveLength(2);
-		expect(config.axes?.[0].scale).toBe('x');
-		expect(config.axes?.[1].scale).toBe('y');
-	});
-
-	it('sets tzDate when timezone is provided', () => {
-		const builder = buildBaseConfig({
-			...baseProps,
-			timezone: {
-				name: 'America/New_York',
-				value: 'America/New_York',
-				offset: 'UTC-5',
-				searchIndex: 'America/New_York',
-			},
-		});
-
-		const config = builder.getConfig();
-		expect(config.tzDate).toBeDefined();
-		expect(typeof config.tzDate).toBe('function');
-	});
-
-	it('leaves tzDate undefined when timezone is not provided', () => {
-		const builder = buildBaseConfig(baseProps);
-
-		const config = builder.getConfig();
-		expect(config.tzDate).toBeUndefined();
-	});
-
-	it('register setSelect hook when onDragSelect is provided', () => {
-		const onDragSelect = jest.fn();
-		const builder = buildBaseConfig({
-			...baseProps,
-			onDragSelect,
-		});
-
-		const config = builder.getConfig();
-		expect(config.hooks?.setSelect).toBeDefined();
-	});
-});

frontend/src/container/DashboardContainer/visualization/panels/utils/__tests__/legendVisibilityUtils.test.ts

@@ -1,270 +0,0 @@
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-import type { GraphVisibilityState } from '../../types';
-import {
-	getStoredSeriesVisibility,
-	updateSeriesVisibilityToLocalStorage,
-} from '../legendVisibilityUtils';
-
-describe('legendVisibilityUtils', () => {
-	const storageKey = LOCALSTORAGE.GRAPH_VISIBILITY_STATES;
-
-	beforeEach(() => {
-		localStorage.clear();
-		jest.spyOn(window.localStorage.__proto__, 'getItem');
-		jest.spyOn(window.localStorage.__proto__, 'setItem');
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	describe('getStoredSeriesVisibility', () => {
-		it('returns null when there is no stored visibility state', () => {
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-			expect(localStorage.getItem).toHaveBeenCalledWith(storageKey);
-		});
-
-		it('returns null when widget has no stored dataIndex', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-		});
-
-		it('returns visibility array by index when widget state exists', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'CPU', show: true },
-						{ label: 'Memory', show: false },
-					],
-				},
-				{
-					name: 'widget-2',
-					dataIndex: [{ label: 'Errors', show: true }],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).not.toBeNull();
-			expect(result).toEqual([
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-		});
-
-		it('returns visibility by index including duplicate labels', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'CPU', show: true },
-						{ label: 'CPU', show: false },
-						{ label: 'Memory', show: false },
-					],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).not.toBeNull();
-			expect(result).toEqual([
-				{ label: 'CPU', show: true },
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: false },
-			]);
-		});
-
-		it('returns null on malformed JSON in localStorage', () => {
-			localStorage.setItem(storageKey, '{invalid-json');
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-		});
-
-		it('returns null when widget id is not found', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'another-widget',
-					dataIndex: [{ label: 'CPU', show: true }],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-		});
-	});
-
-	describe('updateSeriesVisibilityToLocalStorage', () => {
-		it('creates new visibility state when none exists', () => {
-			const seriesVisibility = [
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			];
-
-			updateSeriesVisibilityToLocalStorage('widget-1', seriesVisibility);
-
-			const stored = getStoredSeriesVisibility('widget-1');
-
-			expect(stored).not.toBeNull();
-			expect(stored).toEqual([
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-		});
-
-		it('adds a new widget entry when other widgets already exist', () => {
-			const existing: GraphVisibilityState[] = [
-				{
-					name: 'widget-existing',
-					dataIndex: [{ label: 'Errors', show: true }],
-				},
-			];
-			localStorage.setItem(storageKey, JSON.stringify(existing));
-
-			const newVisibility = [{ label: 'CPU', show: false }];
-
-			updateSeriesVisibilityToLocalStorage('widget-new', newVisibility);
-
-			const stored = getStoredSeriesVisibility('widget-new');
-
-			expect(stored).not.toBeNull();
-			expect(stored).toEqual([{ label: 'CPU', show: false }]);
-		});
-
-		it('updates existing widget visibility when entry already exists', () => {
-			const initialVisibility: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'CPU', show: true },
-						{ label: 'Memory', show: true },
-					],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(initialVisibility));
-
-			const updatedVisibility = [
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: true },
-			];
-
-			updateSeriesVisibilityToLocalStorage('widget-1', updatedVisibility);
-
-			const stored = getStoredSeriesVisibility('widget-1');
-
-			expect(stored).not.toBeNull();
-			expect(stored).toEqual([
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: true },
-			]);
-		});
-
-		it('silently handles malformed existing JSON without throwing', () => {
-			localStorage.setItem(storageKey, '{invalid-json');
-
-			expect(() =>
-				updateSeriesVisibilityToLocalStorage('widget-1', [
-					{ label: 'CPU', show: true },
-				]),
-			).not.toThrow();
-		});
-
-		it('when existing JSON is malformed, overwrites with valid data for the widget', () => {
-			localStorage.setItem(storageKey, '{invalid-json');
-
-			updateSeriesVisibilityToLocalStorage('widget-1', [
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: false },
-			]);
-
-			const stored = getStoredSeriesVisibility('widget-1');
-			expect(stored).not.toBeNull();
-			expect(stored).toEqual([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: false },
-			]);
-			const expected = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'x-axis', show: true },
-						{ label: 'CPU', show: false },
-					],
-				},
-			];
-			expect(localStorage.setItem).toHaveBeenCalledWith(
-				storageKey,
-				JSON.stringify(expected),
-			);
-		});
-
-		it('preserves other widgets when updating one widget', () => {
-			const existing: GraphVisibilityState[] = [
-				{ name: 'widget-a', dataIndex: [{ label: 'A', show: true }] },
-				{ name: 'widget-b', dataIndex: [{ label: 'B', show: false }] },
-			];
-			localStorage.setItem(storageKey, JSON.stringify(existing));
-
-			updateSeriesVisibilityToLocalStorage('widget-b', [
-				{ label: 'B', show: true },
-			]);
-
-			expect(getStoredSeriesVisibility('widget-a')).toEqual([
-				{ label: 'A', show: true },
-			]);
-			expect(getStoredSeriesVisibility('widget-b')).toEqual([
-				{ label: 'B', show: true },
-			]);
-		});
-
-		it('calls setItem with storage key and stringified visibility states', () => {
-			updateSeriesVisibilityToLocalStorage('widget-1', [
-				{ label: 'CPU', show: true },
-			]);
-
-			expect(localStorage.setItem).toHaveBeenCalledTimes(1);
-			expect(localStorage.setItem).toHaveBeenCalledWith(
-				storageKey,
-				expect.any(String),
-			);
-			const [_, value] = (localStorage.setItem as jest.Mock).mock.calls[0];
-			expect((): void => JSON.parse(value)).not.toThrow();
-			expect(JSON.parse(value)).toEqual([
-				{ name: 'widget-1', dataIndex: [{ label: 'CPU', show: true }] },
-			]);
-		});
-
-		it('stores empty dataIndex when seriesVisibility is empty', () => {
-			updateSeriesVisibilityToLocalStorage('widget-1', []);
-
-			const raw = localStorage.getItem(storageKey);
-			expect(raw).not.toBeNull();
-			const parsed = JSON.parse(raw ?? '[]');
-			expect(parsed).toEqual([{ name: 'widget-1', dataIndex: [] }]);
-			expect(getStoredSeriesVisibility('widget-1')).toBeNull();
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts

@@ -19,14 +19,13 @@ export interface BaseConfigBuilderProps {
 	widget: Widgets;
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
-	onClick?: OnClickPluginOpts['onClick'];
-	onDragSelect?: (startTime: number, endTime: number) => void;
-	timezone?: Timezone;
+	onClick: OnClickPluginOpts['onClick'];
+	onDragSelect: (startTime: number, endTime: number) => void;
+	timezone: Timezone;
 	panelMode: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
 	maxTimeScale?: number;
-	stepInterval?: number;
 }
 
 export function buildBaseConfig({
@@ -40,12 +39,9 @@ export function buildBaseConfig({
 	panelType,
 	minTimeScale,
 	maxTimeScale,
-	stepInterval,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = timezone
-		? (timestamp: number): Date =>
-				uPlot.tzDate(new Date(timestamp * 1e3), timezone.value)
-		: undefined;
+	const tzDate = (timestamp: number): Date =>
+		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
 
 	const builder = new UPlotConfigBuilder({
 		onDragSelect,
@@ -58,7 +54,6 @@ export function buildBaseConfig({
 		].includes(panelMode)
 			? SelectionPreferencesSource.LOCAL_STORAGE
 			: SelectionPreferencesSource.IN_MEMORY,
-		stepInterval,
 	});
 
 	const thresholdOptions: ThresholdsDrawHookOptions = {
@@ -93,7 +88,7 @@ export function buildBaseConfig({
 		max: undefined,
 		softMin: widget.softMin ?? undefined,
 		softMax: widget.softMax ?? undefined,
-		thresholds: thresholdOptions,
+		// thresholds,
 		logBase: widget.isLogScale ? 10 : undefined,
 		distribution: widget.isLogScale
 			? DistributionType.Logarithmic