Merge branch 'main' into SIG-3497

* chore: hide chartmanager when queries are merged

* chore: added histogram panel tests

.github/CODEOWNERS

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

.vscode/settings.json

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

README.de-de.md

@@ -176,25 +176,6 @@ 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,34 +221,6 @@ 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,25 +187,6 @@ 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,6 +193,15 @@ 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
@@ -285,7 +294,6 @@ flagger:
   config:
     boolean:
       use_span_metrics: true
-      interpolation_enabled: false
       kafka_span_eval: false
     string:
     float:
@@ -300,3 +308,14 @@ 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

docs/api/openapi.yml

@@ -4678,6 +4678,8 @@ components:
           type: string
         id:
           type: string
+        isRoot:
+          type: boolean
         orgId:
           type: string
         role:

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

@@ -45,7 +45,7 @@ type APIHandler struct {
 }
 
 // NewAPIHandler returns an APIHandler
-func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler, error) {
+func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.Config) (*APIHandler, error) {
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		RuleManager:                   opts.RulesManager,
@@ -58,7 +58,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
-	})
+	}, config)
 
 	if err != nil {
 		return nil, err

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

@@ -67,6 +67,14 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
+	if constants.IsDotMetricsEnabled {
+		for idx, feature := range featureSet {
+			if feature.Name == licensetypes.DotMetricsEnabled {
+				featureSet[idx].Active = true
+			}
+		}
+	}
+
 	ah.Respond(w, featureSet)
 }
 

ee/query-service/app/server.go

@@ -175,7 +175,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		GlobalConfig:                  config.Global,
 	}
 
-	apiHandler, err := api.NewAPIHandler(apiOpts, signoz)
+	apiHandler, err := api.NewAPIHandler(apiOpts, signoz, config)
 	if err != nil {
 		return nil, err
 	}

ee/query-service/constants/constants.go

@@ -18,3 +18,14 @@ func GetOrDefaultEnv(key string, fallback string) string {
 	return v
 }
 
+// constant functions that override env vars
+
+const DotMetricsEnabled = "DOT_METRICS_ENABLED"
+
+var IsDotMetricsEnabled = false
+
+func init() {
+	if GetOrDefaultEnv(DotMetricsEnabled, "true") == "true" {
+		IsDotMetricsEnabled = true
+	}
+}

frontend/package.json

@@ -55,6 +55,7 @@
 		"@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/table": "0.3.7",

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -1542,6 +1542,10 @@ export interface TypesUserDTO {
 	 * @type string
 	 */
 	id?: string;
+	/**
+	 * @type boolean
+	 */
+	isRoot?: boolean;
 	/**
 	 * @type string
 	 */

frontend/src/api/infraMonitoring/getK8sClustersList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { AttributeKeyMap } from '../utils';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sClustersListPayload {
 	filters: TagFilter;
@@ -64,39 +64,41 @@ export const getK8sClustersList = async (
 	props: K8sClustersListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sClustersListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = Array.isArray(props.filters?.items)
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/clusters/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sDaemonSetsList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { AttributeKeyMap } from '../utils';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sDaemonSetsListPayload {
 	filters: TagFilter;
@@ -71,39 +71,42 @@ export const getK8sDaemonSetsList = async (
 	props: K8sDaemonSetsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sDaemonSetsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = Array.isArray(props.filters?.items)
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		// filter prep (unchanged)…
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/daemonsets/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sDeploymentsList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { AttributeKeyMap } from '../utils';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sDeploymentsListPayload {
 	filters: TagFilter;
@@ -71,39 +71,41 @@ export const getK8sDeploymentsList = async (
 	props: K8sDeploymentsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sDeploymentsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = Array.isArray(props.filters?.items)
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/deployments/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sJobsList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { AttributeKeyMap } from '../utils';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sJobsListPayload {
 	filters: TagFilter;
@@ -71,39 +71,41 @@ export const getK8sJobsList = async (
 	props: K8sJobsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sJobsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = Array.isArray(props.filters?.items)
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/jobs/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sNamespacesList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { AttributeKeyMap } from '../utils';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sNamespacesListPayload {
 	filters: TagFilter;
@@ -62,39 +62,41 @@ export const getK8sNamespacesList = async (
 	props: K8sNamespacesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sNamespacesListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = Array.isArray(props.filters?.items)
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/namespaces/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sNodesList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { AttributeKeyMap } from '../utils';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sNodesListPayload {
 	filters: TagFilter;
@@ -66,39 +66,41 @@ export const getK8sNodesList = async (
 	props: K8sNodesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sNodesListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = Array.isArray(props.filters?.items)
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/nodes/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sPodsList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { AttributeKeyMap } from '../utils';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sPodsListPayload {
 	filters: TagFilter;
@@ -102,39 +102,41 @@ export const getK8sPodsList = async (
 	props: K8sPodsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sPodsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = Array.isArray(props.filters?.items)
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/pods/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sVolumesList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { AttributeKeyMap } from '../utils';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sVolumesListPayload {
 	filters: TagFilter;
@@ -86,37 +86,39 @@ export const getK8sVolumesList = async (
 	props: K8sVolumesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sVolumesListResponse> | ErrorResponse> => {
 	try {
 		// Prepare filters
-		const requestProps = Array.isArray(props.filters?.items)
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({ ...item, key: { ...item.key, key: mappedKey } });
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
-									acc.push({ ...item, key: { ...item.key, key: mappedKey } });
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/pvcs/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getsK8sStatefulSetsList.ts

@@ -5,7 +5,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { AttributeKeyMap } from '../utils';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sStatefulSetsListPayload {
 	filters: TagFilter;
@@ -69,37 +69,39 @@ export const getK8sStatefulSetsList = async (
 	props: K8sStatefulSetsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sStatefulSetsListResponse> | ErrorResponse> => {
 	try {
 		// Prepare filters
-		const requestProps = Array.isArray(props.filters?.items)
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({ ...item, key: { ...item.key, key: mappedKey } });
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = AttributeKeyMap[item.key.key] ?? item.key.key;
-									acc.push({ ...item, key: { ...item.key, key: mappedKey } });
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/statefulsets/list', requestProps, {
 			signal,

frontend/src/api/utils.ts

@@ -25,7 +25,7 @@ export const Logout = async (): Promise<void> => {
 	history.push(ROUTES.LOGIN);
 };
 
-export const AttributeKeyMap: Record<string, string> = {
+export const UnderscoreToDotMap: Record<string, string> = {
 	k8s_cluster_name: 'k8s.cluster.name',
 	k8s_cluster_uid: 'k8s.cluster.uid',
 	k8s_namespace_name: 'k8s.namespace.name',

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 },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
 		};
 
 		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 },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
 		};
 
 		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 },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
 		};
 
 		const params = makeBaseParams('scalar', [

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

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

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

@@ -21,6 +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/table';

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

@@ -23,6 +23,9 @@ import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
+
 import './Metrics.styles.scss';
 
 interface MetricsTabProps {
@@ -47,6 +50,11 @@ function Metrics({
 	handleTimeChange,
 	isModalTimeSelection,
 }: MetricsTabProps): JSX.Element {
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const {
 		visibilities,
 		setElement,
@@ -61,8 +69,14 @@ function Metrics({
 	});
 
 	const queryPayloads = useMemo(
-		() => getHostQueryPayload(hostName, timeRange.startTime, timeRange.endTime),
-		[hostName, timeRange.startTime, timeRange.endTime],
+		() =>
+			getHostQueryPayload(
+				hostName,
+				timeRange.startTime,
+				timeRange.endTime,
+				dotMetricsEnabled,
+			),
+		[hostName, timeRange.startTime, timeRange.endTime, dotMetricsEnabled],
 	);
 
 	const queries = useQueries(

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

@@ -78,12 +78,10 @@ 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();
 	});
 
@@ -102,9 +100,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -150,9 +145,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -195,9 +187,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -247,9 +236,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -272,9 +258,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -308,9 +291,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -344,9 +324,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -369,9 +346,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -405,9 +379,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -461,9 +432,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -508,9 +476,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -548,9 +513,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -582,9 +544,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);

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

@@ -86,6 +86,7 @@ interface QuerySearchProps {
 	signalSource?: string;
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
+	showFilterSuggestionsWithoutMetric?: boolean;
 }
 
 function QuerySearch({
@@ -96,6 +97,7 @@ function QuerySearch({
 	onRun,
 	signalSource,
 	hardcodedAttributeKeys,
+	showFilterSuggestionsWithoutMetric,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -252,7 +254,8 @@ function QuerySearch({
 		async (searchText?: string): Promise<void> => {
 			if (
 				dataSource === DataSource.METRICS &&
-				!queryData.aggregateAttribute?.key
+				!queryData.aggregateAttribute?.key &&
+				!showFilterSuggestionsWithoutMetric
 			) {
 				setKeySuggestions([]);
 				return;
@@ -301,6 +304,7 @@ function QuerySearch({
 			queryData.aggregateAttribute?.key,
 			signalSource,
 			hardcodedAttributeKeys,
+			showFilterSuggestionsWithoutMetric,
 		],
 	);
 
@@ -1562,6 +1566,7 @@ QuerySearch.defaultProps = {
 	hardcodedAttributeKeys: undefined,
 	placeholder:
 		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
+	showFilterSuggestionsWithoutMetric: false,
 };
 
 export default QuerySearch;

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}
-						onClick={(): void => {
+						onChange={(checked): void => {
 							logEvent('API Monitoring: Show IP addresses clicked', {
-								showIP: !(showIP ?? true),
+								showIP: checked,
 							});
-							setParams({ showIP });
+							setParams({ showIP: checked });
 						}}
 					/>
 				</div>

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

@@ -1,4 +1,8 @@
 import { ENVIRONMENT } from 'constants/env';
+import {
+	ApiMonitoringParams,
+	useApiMonitoringParams,
+} from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
 	otherFiltersResponse,
@@ -18,10 +22,15 @@ 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;
@@ -84,6 +93,28 @@ 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();
 });
@@ -112,6 +143,10 @@ beforeEach(() => {
 		lastUsedQuery: 0,
 		redirectWithQueryBuilderData,
 	});
+	mockUseApiMonitoringParams.mockReturnValue([
+		{ showIP: true } as ApiMonitoringParams,
+		mockSetApiMonitoringParams,
+	]);
 	setupServer();
 });
 
@@ -251,6 +286,24 @@ 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/features.ts

@@ -8,4 +8,5 @@ export enum FeatureKeys {
 	PREMIUM_SUPPORT = 'premium_support',
 	ANOMALY_DETECTION = 'anomaly_detection',
 	ONBOARDING_V3 = 'onboarding_v3',
+	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 }

frontend/src/container/AllError/index.tsx

@@ -41,6 +41,8 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Exception, PayloadProps } from 'types/api/errors/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { FeatureKeys } from '../../constants/features';
+import { useAppContext } from '../../providers/App/App';
 import { FilterDropdownExtendsProps } from './types';
 import {
 	extractFilterValues,
@@ -413,6 +415,11 @@ function AllErrors(): JSX.Element {
 		},
 	];
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const onChangeHandler: TableProps<Exception>['onChange'] = useCallback(
 		(
 			paginations: TablePaginationConfig,
@@ -448,7 +455,7 @@ function AllErrors(): JSX.Element {
 	useEffect(() => {
 		if (!isUndefined(errorCountResponse.data?.payload)) {
 			const selectedEnvironments = queries.find(
-				(val) => val.tagKey === getResourceDeploymentKeys(),
+				(val) => val.tagKey === getResourceDeploymentKeys(dotMetricsEnabled),
 			)?.tagValue;
 
 			logEvent('Exception: List page visited', {

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

@@ -9,74 +9,6 @@
 		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;
@@ -535,15 +467,6 @@
 	.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,9 +16,7 @@ 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';
@@ -27,7 +25,6 @@ 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,
@@ -37,7 +34,6 @@ import {
 	FolderKanban,
 	Fullscreen,
 	Globe,
-	LayoutGrid,
 	LockKeyhole,
 	PenLine,
 	X,
@@ -51,6 +47,7 @@ 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';
@@ -71,7 +68,6 @@ interface DashboardDescriptionProps {
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
 	const { handle } = props;
 	const {
 		selectedDashboard,
@@ -80,7 +76,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		layouts,
 		setLayouts,
 		isDashboardLocked,
-		listSortOrder,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
 		setSelectedRowWidgetId,
@@ -292,17 +287,6 @@ 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,
@@ -351,32 +335,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 	return (
 		<Card className="dashboard-description-container">
-			<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>
+			<DashboardHeader />
 			<section className="dashboard-details">
 				<div className="left-section">
 					<img src={image} alt="dashboard-img" className="dashboard-img" />

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

@@ -9,11 +9,15 @@ 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';
@@ -22,8 +26,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const {
 		setSelectedDashboard,
 		updateLocalStorageDashboardVariables,
-		variablesToGetUpdated,
-		setVariablesToGetUpdated,
 	} = useDashboard();
 
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
@@ -55,11 +57,14 @@ function DashboardVariableSelection(): JSX.Element | null {
 		[dependencyData?.order],
 	);
 
-	// Trigger refetch when dependency order changes or global time changes
+	// Initialize fetch store then start a new fetch cycle.
+	// Runs on dependency order changes, and time range changes.
 	useEffect(() => {
-		if (dependencyData?.order && dependencyData.order.length > 0) {
-			setVariablesToGetUpdated(dependencyData?.order || []);
-		}
+		const allVariableNames = sortedVariablesArray
+			.map((v) => v.name)
+			.filter((name): name is string => !!name);
+		initializeVariableFetchStore(allVariableNames);
+		enqueueFetchOfAllVariables();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dependencyOrderKey, minTime, maxTime]);
 
@@ -121,29 +126,14 @@ function DashboardVariableSelection(): JSX.Element | null {
 				return prev;
 			});
 
-			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));
-			}
+			// Cascade: enqueue query-type descendants for refetching
+			enqueueDescendantsOfVariable(name);
 		},
 		[
-			// This can be removed
 			dashboardVariables,
 			updateLocalStorageDashboardVariables,
-			dependencyData,
 			updateUrlVariable,
 			setSelectedDashboard,
-			setVariablesToGetUpdated,
 		],
 	);
 
@@ -158,9 +148,6 @@ 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,18 +2,25 @@ 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 { getOptionsForDynamicVariable } from './util';
+import {
+	buildExistingDynamicVariableQuery,
+	extractErrorMessage,
+	getOptionsForDynamicVariable,
+	mergeUniqueStrings,
+	settleVariableFetch,
+} from './util';
 import { VariableItemProps } from './VariableItem';
 import { dynamicVariableSelectStrategy } from './variableSelectStrategy/dynamicVariableSelectStrategy';
 
@@ -24,7 +31,6 @@ type DynamicVariableInputProps = Pick<
 	'variableData' | 'onValueUpdate' | 'existingVariables'
 >;
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function DynamicVariableInput({
 	variableData,
 	onValueUpdate,
@@ -55,14 +61,8 @@ function DynamicVariableInput({
 
 	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
 
-	// Build a memoized list of all currently available option strings (normalized + related)
 	const allAvailableOptionStrings = useMemo(
-		() => [
-			...new Set([
-				...optionsData.map((v) => v.toString()),
-				...relatedValues.map((v) => v.toString()),
-			]),
-		],
+		() => mergeUniqueStrings(optionsData, relatedValues),
 		[optionsData, relatedValues],
 	);
 
@@ -104,67 +104,24 @@ function DynamicVariableInput({
 		(state) => state.globalTime,
 	);
 
-	// 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 {
+		variableFetchCycleId,
+		isVariableSettled,
+		isVariableFetching,
+		hasVariableFetchedOnce,
+		isVariableWaitingForDependencies,
+		variableDependencyWaitMessage,
+	} = useVariableFetchState(variableData.name || '');
 
-		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,
-	]);
+	const existingQuery = useMemo(
+		() =>
+			buildExistingDynamicVariableQuery(
+				existingVariables,
+				variableData.id,
+				!!variableData.dynamicVariablesAttribute,
+			),
+		[existingVariables, variableData.id, variableData.dynamicVariablesAttribute],
+	);
 
 	// Wrap the hook's onDropdownVisibleChange to also track isDropdownOpen and handle cleanup
 	const handleSelectDropdownVisibilityChange = useCallback(
@@ -182,6 +139,73 @@ 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,
@@ -192,13 +216,22 @@ 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,
-			queryFn: () =>
+				!!variableData.dynamicVariablesAttribute &&
+				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
+			queryFn: ({ signal }) =>
 				getFieldValues(
 					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
 						? undefined
@@ -211,70 +244,10 @@ function DynamicVariableInput({
 					minTime,
 					maxTime,
 					existingQuery,
+					signal,
 				),
-			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);
-				}
-			},
+			onSuccess: handleQuerySuccess,
+			onError: handleQueryError,
 		},
 	);
 
@@ -336,6 +309,8 @@ function DynamicVariableInput({
 			showRetryButton={isRetryableError}
 			showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
 			onSearch={handleSearch}
+			waiting={isVariableWaitingForDependencies}
+			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

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

@@ -3,8 +3,9 @@ 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, isString } from 'lodash-es';
+import { isArray, isEmpty, isString } from 'lodash-es';
 import { AppState } from 'store/reducers';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -12,26 +13,18 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { variablePropsToPayloadVariables } from '../utils';
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { areArraysEqual, checkAPIInvocation } from './util';
+import { areArraysEqual, settleVariableFetch } from './util';
 import { VariableItemProps } from './VariableItem';
 import { queryVariableSelectStrategy } from './variableSelectStrategy/queryVariableSelectStrategy';
 
 type QueryVariableInputProps = Pick<
 	VariableItemProps,
-	| 'variableData'
-	| 'existingVariables'
-	| 'onValueUpdate'
-	| 'variablesToGetUpdated'
-	| 'setVariablesToGetUpdated'
-	| 'dependencyData'
+	'variableData' | 'existingVariables' | 'onValueUpdate'
 >;
 
 function QueryVariableInput({
 	variableData,
 	existingVariables,
-	variablesToGetUpdated,
-	setVariablesToGetUpdated,
-	dependencyData,
 	onValueUpdate,
 }: QueryVariableInputProps): JSX.Element {
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
@@ -43,6 +36,15 @@ function QueryVariableInput({
 		(state) => state.globalTime,
 	);
 
+	const {
+		variableFetchCycleId,
+		isVariableSettled,
+		isVariableFetching,
+		hasVariableFetchedOnce,
+		isVariableWaitingForDependencies,
+		variableDependencyWaitMessage,
+	} = useVariableFetchState(variableData.name || '');
+
 	const {
 		tempSelection,
 		setTempSelection,
@@ -60,16 +62,6 @@ 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 => {
@@ -103,18 +95,24 @@ function QueryVariableInput({
 							valueNotInList = true;
 						}
 
-						// 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.name && (valueNotInList || variableData.allSelected)) {
 							if (
 								variableData.allSelected &&
 								variableData.multiSelect &&
 								variableData.showALLOption
 							) {
-								onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
+								if (
+									variableData.name &&
+									variableData.id &&
+									!isEmpty(variableData.selectedValue)
+								) {
+									onValueUpdate(
+										variableData.name,
+										variableData.id,
+										newOptionsData,
+										true,
+									);
+								}
 
 								// Update tempSelection to maintain ALL state when dropdown is open
 								if (tempSelection !== undefined) {
@@ -132,7 +130,11 @@ function QueryVariableInput({
 										newOptionsData.every((option) => selectedValue.includes(option));
 								}
 
-								if (variableData.name && variableData.id) {
+								if (
+									variableData.name &&
+									variableData.id &&
+									!isEmpty(variableData.selectedValue)
+								) {
 									onValueUpdate(variableData.name, variableData.id, value, allSelected);
 								}
 							}
@@ -141,10 +143,6 @@ 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) {
@@ -157,8 +155,6 @@ function QueryVariableInput({
 			onValueUpdate,
 			tempSelection,
 			setTempSelection,
-			validVariableUpdate,
-			setVariablesToGetUpdated,
 			applyDefaultIfNeeded,
 		],
 	);
@@ -169,27 +165,28 @@ function QueryVariableInput({
 			variableData.name || '',
 			`${minTime}`,
 			`${maxTime}`,
-			JSON.stringify(dependencyData?.order),
+			variableFetchCycleId,
 		],
 		{
-			enabled:
-				variableData &&
-				checkAPIInvocation(
-					variablesToGetUpdated,
-					variableData,
-					dependencyData?.parentDependencyGraph,
+			/*
+			 * 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,
 				),
-			queryFn: () =>
-				dashboardVariablesQuery({
-					query: variableData.queryValue || '',
-					variables: variablePropsToPayloadVariables(existingVariables),
-				}),
 			refetchOnWindowFocus: false,
 			onSuccess: (response) => {
 				getOptions(response.payload);
-				setVariablesToGetUpdated((prev) =>
-					prev.filter((v) => v !== variableData.name),
-				);
+				settleVariableFetch(variableData.name, 'complete');
 			},
 			onError: (error: {
 				details: {
@@ -206,9 +203,7 @@ function QueryVariableInput({
 					}
 					setErrorMessage(message);
 				}
-				setVariablesToGetUpdated((prev) =>
-					prev.filter((v) => v !== variableData.name),
-				);
+				settleVariableFetch(variableData.name, 'failure');
 			},
 		},
 	);
@@ -242,6 +237,8 @@ function QueryVariableInput({
 			loading={isLoading}
 			errorMessage={errorMessage}
 			onRetry={handleRetry}
+			waiting={isVariableWaitingForDependencies}
+			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

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

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

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

@@ -47,14 +47,6 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -69,14 +61,6 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -92,14 +76,6 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -133,14 +109,6 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -163,14 +131,6 @@ describe('VariableItem', () => {
 					variableData={customVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -185,14 +145,6 @@ 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,7 +1,6 @@
 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';
@@ -21,18 +20,12 @@ 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;
 
@@ -65,9 +58,6 @@ 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,6 +7,19 @@ 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
@@ -217,9 +230,10 @@ describe('DynamicVariableInput Component', () => {
 				'',
 				'Traces',
 				'service.name',
+				0, // variableFetchCycleId
 			],
 			expect.objectContaining({
-				enabled: true, // Type is 'DYNAMIC'
+				enabled: true, // isVariableFetching is true from mock
 				queryFn: expect.any(Function),
 				onSuccess: expect.any(Function),
 				onError: expect.any(Function),

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

@@ -8,14 +8,6 @@ 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';
@@ -31,9 +23,6 @@ const renderVariableItem = (
 				variableData={variableData}
 				existingVariables={{}}
 				onValueUpdate={mockOnValueUpdate}
-				variablesToGetUpdated={[]}
-				setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-				dependencyData={baseDependencyData}
 			/>
 		</MockQueryClientProvider>,
 	);

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

@@ -2,14 +2,12 @@ import {
 	buildDependencies,
 	buildDependencyGraph,
 	buildParentDependencyGraph,
-	checkAPIInvocation,
 	onUpdateVariableNode,
 	VariableGraph,
 } from '../util';
 import {
 	buildDependenciesMock,
 	buildGraphMock,
-	checkAPIInvocationMock,
 	onUpdateVariableNodeMock,
 } from './mock';
 
@@ -72,97 +70,6 @@ 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;
@@ -223,10 +130,86 @@ 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,36 +1,3 @@
-/* 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,9 +1,16 @@
 import { OptionData } from 'components/NewSelect/types';
-import { isEmpty, isNull } from 'lodash-es';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
+import { isEmpty } 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(
@@ -45,30 +52,16 @@ const getDependentVariablesBasedOnVariableName = (
 	}
 
 	return variables
-		?.map((variable: any) => {
+		.map((variable) => {
 			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 || '';
-				const dependVarReMatch = queryValue.match(combinedRegex);
-				if (dependVarReMatch !== null && dependVarReMatch.length > 0) {
+				if (textContainsVariableReference(queryValue, variableName)) {
 					return variable.name;
 				}
 			}
 			return null;
 		})
-		.filter((val: string | null) => !isNull(val));
+		.filter((val): val is string => val !== null);
 };
 export type VariableGraph = Record<string, string[]>;
 
@@ -246,10 +239,26 @@ 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,
 	};
@@ -284,33 +293,6 @@ 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[],
@@ -375,3 +357,130 @@ 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,4 +1,31 @@
-import { areArraysEqual, onUpdateVariableNode, VariableGraph } from './util';
+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
+// ────────────────────────────────────────────────────────────────
 
 describe('areArraysEqual', () => {
 	it('should return true for equal arrays with same order', () => {
@@ -149,3 +176,348 @@ 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,17 +1,11 @@
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import { VariableItemProps } from '../VariableItem';
 
 export interface VariableSelectStrategy {
 	handleChange(params: {
 		value: string | string[];
-		variableData: IDashboardVariable;
+		variableData: VariableItemProps['variableData'];
+		onValueUpdate: VariableItemProps['onValueUpdate'];
 		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,6 +17,19 @@ 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(),
@@ -95,7 +108,7 @@ describe('Dynamic Variable Default Behavior', () => {
 						}
 					}
 					if (queryFn) {
-						queryFn();
+						queryFn({ signal: undefined });
 					}
 				}
 			}, [enabled, variableName, dynamicVarsKey]); // Only depend on enabled/keys
@@ -234,6 +247,7 @@ describe('Dynamic Variable Default Behavior', () => {
 					'2023-01-01T00:00:00Z',
 					'2023-01-02T00:00:00Z',
 					'',
+					undefined, // signal
 				);
 			});
 
@@ -487,6 +501,7 @@ 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,15 +49,11 @@ 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

@@ -0,0 +1,71 @@
+.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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,17 @@
+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/ChartWrapper/ChartWrapper.tsx

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

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

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

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

@@ -0,0 +1,117 @@
+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/stackUtils.ts

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,313 @@
+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

@@ -0,0 +1,69 @@
+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/useScrollWidgetIntoView.ts

@@ -0,0 +1,26 @@
+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,12 +1,14 @@
 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;
@@ -20,6 +22,7 @@ export interface ChartLayoutProps {
 	config: UPlotConfigBuilder;
 }
 export default function ChartLayout({
+	showLegend = true,
 	legendComponent,
 	children,
 	layoutChildren,
@@ -30,6 +33,15 @@ 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)
@@ -42,7 +54,7 @@ export default function ChartLayout({
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[containerWidth, containerHeight, legendConfig],
+		[containerWidth, containerHeight, legendConfig, showLegend],
 	);
 
 	return (
@@ -60,15 +72,17 @@ export default function ChartLayout({
 						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
-				<div
-					className="chart-layout__legend-wrapper"
-					style={{
-						height: chartDimensions.legendHeight,
-						width: chartDimensions.legendWidth,
-					}}
-				>
-					{legendComponent(chartDimensions.averageLegendWidth)}
-				</div>
+				{showLegend && (
+					<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,10 +1,10 @@
 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 { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
@@ -27,7 +27,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		onToggleModelHandler,
 	} = props;
 	const uPlotRef = useRef<uPlot | null>(null);
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
@@ -36,16 +35,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+	useScrollWidgetIntoView(widget.id, graphRef);
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);

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

@@ -11,6 +11,7 @@ import {
 	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';
@@ -77,6 +78,12 @@ export function prepareBarPanelConfig({
 		builder.setBands(getInitialStackedBands(seriesCount));
 	}
 
+	const stepIntervals: Record<string, number> = get(
+		apiResponse,
+		'data.newResult.meta.stepIntervals',
+		{},
+	);
+
 	const seriesList: QueryData[] = apiResponse?.data?.result || [];
 	seriesList.forEach((series) => {
 		const baseLabelName = getLabelName(
@@ -89,6 +96,8 @@ export function prepareBarPanelConfig({
 			? getLegend(series, currentQuery, baseLabelName)
 			: baseLabelName;
 
+		const currentStepInterval = get(stepIntervals, series.queryName, undefined);
+
 		builder.addSeries({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Bar,
@@ -101,6 +110,7 @@ export function prepareBarPanelConfig({
 			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
+			stepInterval: currentStepInterval,
 		});
 	});
 

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

@@ -0,0 +1,114 @@
+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

@@ -0,0 +1,223 @@
+/* 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

@@ -0,0 +1,231 @@
+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,7 +26,6 @@ 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>();
@@ -35,16 +34,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+	useScrollWidgetIntoView(widget.id, graphRef);
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);

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

@@ -14,11 +14,6 @@ export interface GraphVisibilityState {
 	dataIndex: SeriesVisibilityItem[];
 }
 
-export interface SeriesVisibilityState {
-	labels: string[];
-	visibility: boolean[];
-}
-
 /**
  * Context in which a panel is rendered. Used to vary behavior (e.g. persistence,
  * interactions) per context.

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

@@ -62,10 +62,10 @@ describe('legendVisibilityUtils', () => {
 			const result = getStoredSeriesVisibility('widget-1');
 
 			expect(result).not.toBeNull();
-			expect(result).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [true, false],
-			});
+			expect(result).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('returns visibility by index including duplicate labels', () => {
@@ -85,10 +85,11 @@ describe('legendVisibilityUtils', () => {
 			const result = getStoredSeriesVisibility('widget-1');
 
 			expect(result).not.toBeNull();
-			expect(result).toEqual({
-				labels: ['CPU', 'CPU', 'Memory'],
-				visibility: [true, false, false],
-			});
+			expect(result).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'CPU', show: false },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('returns null on malformed JSON in localStorage', () => {
@@ -127,10 +128,10 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-1');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [true, false],
-			});
+			expect(stored).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('adds a new widget entry when other widgets already exist', () => {
@@ -149,7 +150,7 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-new');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({ labels: ['CPU'], visibility: [false] });
+			expect(stored).toEqual([{ label: 'CPU', show: false }]);
 		});
 
 		it('updates existing widget visibility when entry already exists', () => {
@@ -175,10 +176,10 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-1');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [false, true],
-			});
+			expect(stored).toEqual([
+				{ label: 'CPU', show: false },
+				{ label: 'Memory', show: true },
+			]);
 		});
 
 		it('silently handles malformed existing JSON without throwing', () => {
@@ -201,10 +202,10 @@ describe('legendVisibilityUtils', () => {
 
 			const stored = getStoredSeriesVisibility('widget-1');
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['x-axis', 'CPU'],
-				visibility: [true, false],
-			});
+			expect(stored).toEqual([
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: false },
+			]);
 			const expected = [
 				{
 					name: 'widget-1',
@@ -231,14 +232,12 @@ describe('legendVisibilityUtils', () => {
 				{ label: 'B', show: true },
 			]);
 
-			expect(getStoredSeriesVisibility('widget-a')).toEqual({
-				labels: ['A'],
-				visibility: [true],
-			});
-			expect(getStoredSeriesVisibility('widget-b')).toEqual({
-				labels: ['B'],
-				visibility: [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', () => {

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

@@ -19,9 +19,9 @@ 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;
@@ -40,8 +40,10 @@ export function buildBaseConfig({
 	minTimeScale,
 	maxTimeScale,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+	const tzDate = timezone
+		? (timestamp: number): Date =>
+				uPlot.tzDate(new Date(timestamp * 1e3), timezone.value)
+		: undefined;
 
 	const builder = new UPlotConfigBuilder({
 		onDragSelect,

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

@@ -0,0 +1,225 @@
+import {
+	NULL_EXPAND,
+	NULL_REMOVE,
+	NULL_RETAIN,
+} from 'container/PanelWrapper/constants';
+import { AlignedData } from 'uplot';
+
+/**
+ * Expands contiguous runs of `null` values to the left and right of their
+ * original positions so that visual gaps in the series are continuous.
+ *
+ * This is used when `NULL_EXPAND` mode is selected while joining series.
+ */
+function propagateNullsAcrossNeighbors(
+	seriesValues: Array<number | null>,
+	nullIndices: number[],
+	alignedLength: number,
+): void {
+	for (
+		let i = 0, currentIndex, lastExpandedNullIndex = -1;
+		i < nullIndices.length;
+		i++
+	) {
+		const nullIndex = nullIndices[i];
+
+		if (nullIndex > lastExpandedNullIndex) {
+			// expand left until we hit a non-null value
+			currentIndex = nullIndex - 1;
+			while (currentIndex >= 0 && seriesValues[currentIndex] == null) {
+				seriesValues[currentIndex--] = null;
+			}
+
+			// expand right until we hit a non-null value
+			currentIndex = nullIndex + 1;
+			while (currentIndex < alignedLength && seriesValues[currentIndex] == null) {
+				seriesValues[(lastExpandedNullIndex = currentIndex++)] = null;
+			}
+		}
+	}
+}
+
+/**
+ * Merges multiple uPlot `AlignedData` tables into a single aligned table.
+ *
+ * - Merges and sorts all distinct x-values from each table.
+ * - Re-aligns every series onto the merged x-axis.
+ * - Applies per-series null handling (`NULL_REMOVE`, `NULL_RETAIN`, `NULL_EXPAND`).
+ */
+/* eslint-disable sonarjs/cognitive-complexity */
+export function mergeAlignedDataTables(
+	alignedTables: AlignedData[],
+	nullModes?: number[][],
+): AlignedData {
+	let mergedXValues: Set<number>;
+
+	// eslint-disable-next-line prefer-const
+	mergedXValues = new Set();
+
+	// Collect all unique x-values from every table.
+	for (let tableIndex = 0; tableIndex < alignedTables.length; tableIndex++) {
+		const table = alignedTables[tableIndex];
+		const xValues = table[0];
+		const xLength = xValues.length;
+
+		for (let i = 0; i < xLength; i++) {
+			mergedXValues.add(xValues[i]);
+		}
+	}
+
+	// Sorted, merged x-axis used by the final result.
+	const alignedData: (number | null | undefined)[][] = [
+		Array.from(mergedXValues).sort((a, b) => a - b),
+	];
+
+	const alignedLength = alignedData[0].length;
+
+	// Map from x-value to its index in the merged x-axis.
+	const xValueToIndexMap = new Map<number, number>();
+
+	for (let i = 0; i < alignedLength; i++) {
+		xValueToIndexMap.set(alignedData[0][i] as number, i);
+	}
+
+	// Re-align all series from all tables onto the merged x-axis.
+	for (let tableIndex = 0; tableIndex < alignedTables.length; tableIndex++) {
+		const table = alignedTables[tableIndex];
+		const xValues = table[0];
+
+		for (let seriesIndex = 1; seriesIndex < table.length; seriesIndex++) {
+			const seriesValues = table[seriesIndex];
+
+			const alignedSeriesValues = Array(alignedLength).fill(undefined);
+
+			const nullHandlingMode = nullModes
+				? nullModes[tableIndex][seriesIndex]
+				: NULL_RETAIN;
+
+			const nullIndices: number[] = [];
+
+			for (let i = 0; i < seriesValues.length; i++) {
+				const valueAtPoint = seriesValues[i];
+				const alignedIndex = xValueToIndexMap.get(xValues[i]);
+
+				if (alignedIndex == null) {
+					continue;
+				}
+
+				if (valueAtPoint === null) {
+					if (nullHandlingMode !== NULL_REMOVE) {
+						alignedSeriesValues[alignedIndex] = valueAtPoint;
+
+						if (nullHandlingMode === NULL_EXPAND) {
+							nullIndices.push(alignedIndex);
+						}
+					}
+				} else {
+					alignedSeriesValues[alignedIndex] = valueAtPoint;
+				}
+			}
+
+			// Optionally expand nulls to visually preserve gaps.
+			propagateNullsAcrossNeighbors(
+				alignedSeriesValues,
+				nullIndices,
+				alignedLength,
+			);
+
+			alignedData.push(alignedSeriesValues);
+		}
+	}
+
+	return alignedData as AlignedData;
+}
+
+/**
+ * Builds histogram buckets from raw values.
+ *
+ * - Each value is mapped into a bucket via `getBucketForValue`.
+ * - Counts how many values fall into each bucket.
+ * - Optionally sorts buckets using the provided comparator.
+ */
+export function buildHistogramBuckets(
+	values: number[],
+	getBucketForValue: (value: number) => number,
+	sortBuckets?: ((a: number, b: number) => number) | null,
+): AlignedData {
+	const bucketMap = new Map<number, { value: number; count: number }>();
+
+	for (let i = 0; i < values.length; i++) {
+		let value = values[i];
+
+		if (value != null) {
+			value = getBucketForValue(value);
+		}
+
+		const bucket = bucketMap.get(value);
+
+		if (bucket) {
+			bucket.count++;
+		} else {
+			bucketMap.set(value, { value, count: 1 });
+		}
+	}
+
+	const buckets = [...bucketMap.values()];
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	sortBuckets && buckets.sort((a, b) => sortBuckets(a.value, b.value));
+
+	const bucketValues = Array(buckets.length);
+	const bucketCounts = Array(buckets.length);
+
+	for (let i = 0; i < buckets.length; i++) {
+		bucketValues[i] = buckets[i].value;
+		bucketCounts[i] = buckets[i].count;
+	}
+
+	return [bucketValues, bucketCounts];
+}
+
+/**
+ * Mutates an `AlignedData` instance, replacing all `undefined` entries
+ * with explicit `null` values so uPlot treats them as gaps.
+ */
+export function replaceUndefinedWithNullInAlignedData(
+	data: AlignedData,
+): AlignedData {
+	const seriesList = data as (number | null | undefined)[][];
+	for (let seriesIndex = 0; seriesIndex < seriesList.length; seriesIndex++) {
+		for (
+			let pointIndex = 0;
+			pointIndex < seriesList[seriesIndex].length;
+			pointIndex++
+		) {
+			if (seriesList[seriesIndex][pointIndex] === undefined) {
+				seriesList[seriesIndex][pointIndex] = null;
+			}
+		}
+	}
+	return data;
+}
+
+/**
+ * Ensures the first histogram series has a leading "empty" bin so that
+ * all series line up visually when rendered as bars.
+ *
+ * - Prepends a new x-value (first x - `bucketSize`) to the first series.
+ * - Prepends `null` to all subsequent series at the same index.
+ */
+export function prependNullBinToFirstHistogramSeries(
+	alignedData: AlignedData,
+	bucketSize: number,
+): void {
+	const seriesList = alignedData as (number | null)[][];
+	if (
+		seriesList.length > 0 &&
+		seriesList[0].length > 0 &&
+		seriesList[0][0] !== null
+	) {
+		seriesList[0].unshift(seriesList[0][0] - bucketSize);
+		for (let seriesIndex = 1; seriesIndex < seriesList.length; seriesIndex++) {
+			seriesList[seriesIndex].unshift(null);
+		}
+	}
+}

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

@@ -1,10 +1,6 @@
 import { LOCALSTORAGE } from 'constants/localStorage';
 
-import {
-	GraphVisibilityState,
-	SeriesVisibilityItem,
-	SeriesVisibilityState,
-} from '../types';
+import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
 
 /**
  * Retrieves the stored series visibility for a specific widget from localStorage by index.
@@ -14,7 +10,7 @@ import {
  */
 export function getStoredSeriesVisibility(
 	widgetId: string,
-): SeriesVisibilityState | null {
+): SeriesVisibilityItem[] | null {
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
@@ -29,10 +25,7 @@ export function getStoredSeriesVisibility(
 			return null;
 		}
 
-		return {
-			labels: widgetState.dataIndex.map((item) => item.label),
-			visibility: widgetState.dataIndex.map((item) => item.show),
-		};
+		return widgetState.dataIndex;
 	} catch (error) {
 		if (error instanceof SyntaxError) {
 			// If the stored data is malformed, remove it

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

@@ -6,10 +6,12 @@ import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
+import { useIsPanelWaitingOnVariable } from 'hooks/dashboard/useVariableFetchState';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
+import { getVariableReferencesInQuery } from 'lib/dashboardVariables/variableReference';
 import getTimeString from 'lib/getTimeString';
 import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
@@ -53,7 +55,6 @@ function GridCardGraph({
 	customOnRowClick,
 	customTimeRangeWindowForCoRelation,
 	enableDrillDown,
-	widgetsByDynamicVariableId,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -64,8 +65,8 @@ function GridCardGraph({
 		toScrollWidgetId,
 		setToScrollWidgetId,
 		setDashboardQueryRangeCalled,
-		variablesToGetUpdated,
 	} = useDashboard();
+
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -117,10 +118,25 @@ function GridCardGraph({
 
 	const updatedQuery = widget?.query;
 
+	const referencedVariableNames = useMemo(() => {
+		if (!variables || !updatedQuery) {
+			return [];
+		}
+		const allNames = Object.values(variables)
+			.map((v) => v.name)
+			.filter((name): name is string => !!name);
+		return getVariableReferencesInQuery(updatedQuery, allNames);
+	}, [updatedQuery, variables]);
+
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
+	const isPanelWaitingOnAnyVariable = useIsPanelWaitingOnVariable(
+		referencedVariableNames,
+	);
+
+	const queryEnabledCondition =
+		isVisible && !isEmptyWidget && isQueryEnabled && !isPanelWaitingOnAnyVariable;
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -177,27 +193,6 @@ function GridCardGraph({
 		[requestData.query],
 	);
 
-	// Bring back dependency on variable chaining for panels to refetch,
-	// but only for non-dynamic variables. We derive a stable token from
-	// the head of the variablesToGetUpdated queue when it's non-dynamic.
-	const nonDynamicVariableChainToken = useMemo(() => {
-		if (!variablesToGetUpdated || variablesToGetUpdated.length === 0) {
-			return undefined;
-		}
-		if (!variables) {
-			return undefined;
-		}
-		const headName = variablesToGetUpdated[0];
-		const variableObj = Object.values(variables).find(
-			(variable) => variable?.name === headName,
-		);
-		if (variableObj && variableObj.type !== 'DYNAMIC') {
-			return headName;
-		}
-		return undefined;
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [variablesToGetUpdated, variables]);
-
 	const queryResponse = useGetQueryRange(
 		{
 			...requestData,
@@ -224,11 +219,7 @@ function GridCardGraph({
 				requestData,
 				variables
 					? Object.entries(variables).reduce((acc, [id, variable]) => {
-							if (
-								variable.type !== 'DYNAMIC' ||
-								(widgetsByDynamicVariableId?.[variable.id] &&
-									widgetsByDynamicVariableId?.[variable.id].includes(widget.id))
-							) {
+							if (variable.name && referencedVariableNames.includes(variable.name)) {
 								return { ...acc, [id]: variable.selectedValue };
 							}
 							return acc;
@@ -237,9 +228,6 @@ function GridCardGraph({
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),
-				// Include non-dynamic variable chaining token to drive refetches
-				// only when a non-dynamic variable is at the head of the queue
-				...(nonDynamicVariableChainToken ? [nonDynamicVariableChainToken] : []),
 			],
 			retry(failureCount, error): boolean {
 				if (
@@ -252,7 +240,7 @@ function GridCardGraph({
 				return failureCount < 2;
 			},
 			keepPreviousData: true,
-			enabled: queryEnabledCondition && !nonDynamicVariableChainToken,
+			enabled: queryEnabledCondition,
 			refetchOnMount: false,
 			onError: (error) => {
 				const errorMessage =
@@ -319,7 +307,7 @@ function GridCardGraph({
 					threshold={threshold}
 					headerMenuList={menuList}
 					isFetchingResponse={
-						queryResponse.isFetching || variablesToGetUpdated.length > 0
+						queryResponse.isFetching || isPanelWaitingOnAnyVariable
 					}
 					setRequestData={setRequestData}
 					onClickHandler={onClickHandler}

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -72,7 +72,6 @@ export interface GridCardGraphProps {
 	customOnRowClick?: (record: RowData) => void;
 	customTimeRangeWindowForCoRelation?: string | undefined;
 	enableDrillDown?: boolean;
-	widgetsByDynamicVariableId?: Record<string, string[]>;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -16,7 +16,6 @@ import { themeColors } from 'constants/theme';
 import { DEFAULT_ROW_NAME } from 'container/DashboardContainer/DashboardDescription/utils';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { useWidgetsByDynamicVariableId } from 'hooks/dashboard/useWidgetsByDynamicVariableId';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -102,8 +101,6 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		Record<string, { widgets: Layout[]; collapsed: boolean }>
 	>({});
 
-	const widgetsByDynamicVariableId = useWidgetsByDynamicVariableId();
-
 	useEffect(() => {
 		setCurrentPanelMap(panelMap);
 	}, [panelMap]);
@@ -617,7 +614,6 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 									onDragSelect={onDragSelect}
 									dataAvailable={checkIfDataExists}
 									enableDrillDown={enableDrillDown}
-									widgetsByDynamicVariableId={widgetsByDynamicVariableId}
 								/>
 							</Card>
 						</CardContainer>

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

@@ -30,6 +30,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
 
+import { FeatureKeys } from '../../../constants/features';
 import { DOCS_LINKS } from '../constants';
 import { columns, TIME_PICKER_OPTIONS } from './constants';
 
@@ -210,13 +211,19 @@ function ServiceMetrics({
 
 	const topLevelOperations = useMemo(() => Object.entries(data || {}), [data]);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const queryRangeRequestData = useMemo(
 		() =>
 			getQueryRangeRequestData({
 				topLevelOperations,
 				globalSelectedInterval,
+				dotMetricsEnabled,
 			}),
-		[globalSelectedInterval, topLevelOperations],
+		[globalSelectedInterval, topLevelOperations, dotMetricsEnabled],
 	);
 
 	const dataQueries = useGetQueriesRange(

frontend/src/container/InfraMonitoringHosts/HostsList.tsx

@@ -23,6 +23,8 @@ import { AppState } from 'store/reducers';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { FeatureKeys } from '../../constants/features';
+import { useAppContext } from '../../providers/App/App';
 import HostsListControls from './HostsListControls';
 import HostsListTable from './HostsListTable';
 import { getHostListsQuery, GetHostsQuickFiltersConfig } from './utils';
@@ -144,6 +146,11 @@ function HostsList(): JSX.Element {
 		entityVersion: '',
 	});
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const handleFiltersChange = useCallback(
 		(value: IBuilderQuery['filters']): void => {
 			const isNewFilterAdded = value?.items?.length !== filters?.items?.length;
@@ -214,7 +221,7 @@ function HostsList(): JSX.Element {
 						</div>
 						<QuickFilters
 							source={QuickFiltersSource.INFRA_MONITORING}
-							config={GetHostsQuickFiltersConfig()}
+							config={GetHostsQuickFiltersConfig(dotMetricsEnabled)}
 							handleFilterVisibilityChange={handleFilterVisibilityChange}
 							onFilterChange={handleQuickFiltersChange}
 						/>

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

@@ -71,12 +71,20 @@ describe('InfraMonitoringHosts utils', () => {
 	});
 
 	describe('GetHostsQuickFiltersConfig', () => {
-		it('should return correct config with dot-notation keys', () => {
-			const result = GetHostsQuickFiltersConfig();
+		it('should return correct config when dotMetricsEnabled is true', () => {
+			const result = GetHostsQuickFiltersConfig(true);
 
 			expect(result[0].attributeKey.key).toBe('host.name');
 			expect(result[1].attributeKey.key).toBe('os.type');
 			expect(result[0].aggregateAttribute).toBe('system.cpu.load_average.15m');
 		});
+
+		it('should return correct config when dotMetricsEnabled is false', () => {
+			const result = GetHostsQuickFiltersConfig(false);
+
+			expect(result[0].attributeKey.key).toBe('host_name');
+			expect(result[1].attributeKey.key).toBe('os_type');
+			expect(result[0].aggregateAttribute).toBe('system_cpu_load_average_15m');
+		});
 	});
 });

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -211,18 +211,32 @@ export const HostsQuickFiltersConfig: IQuickFiltersConfig[] = [
 	},
 ];
 
-export function GetHostsQuickFiltersConfig(): IQuickFiltersConfig[] {
+export function GetHostsQuickFiltersConfig(
+	dotMetricsEnabled: boolean,
+): IQuickFiltersConfig[] {
+	// These keys don’t change with dotMetricsEnabled
+	const hostNameKey = dotMetricsEnabled ? 'host.name' : 'host_name';
+	const osTypeKey = dotMetricsEnabled ? 'os.type' : 'os_type';
+	// This metric stays the same regardless of notation
+	const metricName = dotMetricsEnabled
+		? 'system.cpu.load_average.15m'
+		: 'system_cpu_load_average_15m';
+
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'Host Name',
 			attributeKey: {
-				key: 'host.name',
+				key: hostNameKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'system.cpu.load_average.15m',
+			aggregateAttribute: metricName,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -230,12 +244,12 @@ export function GetHostsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'OS Type',
 			attributeKey: {
-				key: 'os.type',
+				key: osTypeKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'system.cpu.load_average.15m',
+			aggregateAttribute: metricName,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -243,7 +257,7 @@ export function GetHostsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: 'deployment.environment',
+				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},

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

@@ -46,34 +46,95 @@ export const getClusterMetricsQueryPayload = (
 	cluster: K8sClustersData,
 	start: number,
 	end: number,
+	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const k8sPodCpuUtilizationKey = 'k8s.pod.cpu.usage';
-	const k8sNodeAllocatableCpuKey = 'k8s.node.allocatable_cpu';
-	const k8sPodMemoryUsageKey = 'k8s.pod.memory.usage';
-	const k8sNodeAllocatableMemoryKey = 'k8s.node.allocatable_memory';
-	const k8sNodeConditionReadyKey = 'k8s.node.condition_ready';
-	const k8sDeploymentAvailableKey = 'k8s.deployment.available';
-	const k8sDeploymentDesiredKey = 'k8s.deployment.desired';
-	const k8sStatefulsetCurrentPodsKey = 'k8s.statefulset.current_pods';
-	const k8sStatefulsetDesiredPodsKey = 'k8s.statefulset.desired_pods';
-	const k8sStatefulsetReadyPodsKey = 'k8s.statefulset.ready_pods';
-	const k8sStatefulsetUpdatedPodsKey = 'k8s.statefulset.updated_pods';
-	const k8sDaemonsetCurrentScheduledNodesKey =
-		'k8s.daemonset.current_scheduled_nodes';
-	const k8sDaemonsetDesiredScheduledNodesKey =
-		'k8s.daemonset.desired_scheduled_nodes';
-	const k8sDaemonsetReadyNodesKey = 'k8s.daemonset.ready_nodes';
-	const k8sJobActivePodsKey = 'k8s.job.active_pods';
-	const k8sJobSuccessfulPodsKey = 'k8s.job.successful_pods';
-	const k8sJobFailedPodsKey = 'k8s.job.failed_pods';
-	const k8sJobDesiredSuccessfulPodsKey = 'k8s.job.desired_successful_pods';
-	const k8sClusterNameKey = 'k8s.cluster.name';
-	const k8sNodeNameKey = 'k8s.node.name';
-	const k8sDeploymentNameKey = 'k8s.deployment.name';
-	const k8sNamespaceNameKey = 'k8s.namespace.name';
-	const k8sStatefulsetNameKey = 'k8s.statefulset.name';
-	const k8sDaemonsetNameKey = 'k8s.daemonset.name';
-	const k8sJobNameKey = 'k8s.job.name';
+	const getKey = (dotKey: string, underscoreKey: string): string =>
+		dotMetricsEnabled ? dotKey : underscoreKey;
+	const k8sPodCpuUtilizationKey = getKey(
+		'k8s.pod.cpu.usage',
+		'k8s_pod_cpu_usage',
+	);
+	const k8sNodeAllocatableCpuKey = getKey(
+		'k8s.node.allocatable_cpu',
+		'k8s_node_allocatable_cpu',
+	);
+	const k8sPodMemoryUsageKey = getKey(
+		'k8s.pod.memory.usage',
+		'k8s_pod_memory_usage',
+	);
+	const k8sNodeAllocatableMemoryKey = getKey(
+		'k8s.node.allocatable_memory',
+		'k8s_node_allocatable_memory',
+	);
+	const k8sNodeConditionReadyKey = getKey(
+		'k8s.node.condition_ready',
+		'k8s_node_condition_ready',
+	);
+	const k8sDeploymentAvailableKey = getKey(
+		'k8s.deployment.available',
+		'k8s_deployment_available',
+	);
+	const k8sDeploymentDesiredKey = getKey(
+		'k8s.deployment.desired',
+		'k8s_deployment_desired',
+	);
+	const k8sStatefulsetCurrentPodsKey = getKey(
+		'k8s.statefulset.current_pods',
+		'k8s_statefulset_current_pods',
+	);
+	const k8sStatefulsetDesiredPodsKey = getKey(
+		'k8s.statefulset.desired_pods',
+		'k8s_statefulset_desired_pods',
+	);
+	const k8sStatefulsetReadyPodsKey = getKey(
+		'k8s.statefulset.ready_pods',
+		'k8s_statefulset_ready_pods',
+	);
+	const k8sStatefulsetUpdatedPodsKey = getKey(
+		'k8s.statefulset.updated_pods',
+		'k8s_statefulset_updated_pods',
+	);
+	const k8sDaemonsetCurrentScheduledNodesKey = getKey(
+		'k8s.daemonset.current_scheduled_nodes',
+		'k8s_daemonset_current_scheduled_nodes',
+	);
+	const k8sDaemonsetDesiredScheduledNodesKey = getKey(
+		'k8s.daemonset.desired_scheduled_nodes',
+		'k8s_daemonset_desired_scheduled_nodes',
+	);
+	const k8sDaemonsetReadyNodesKey = getKey(
+		'k8s.daemonset.ready_nodes',
+		'k8s_daemonset_ready_nodes',
+	);
+	const k8sJobActivePodsKey = getKey(
+		'k8s.job.active_pods',
+		'k8s_job_active_pods',
+	);
+	const k8sJobSuccessfulPodsKey = getKey(
+		'k8s.job.successful_pods',
+		'k8s_job_successful_pods',
+	);
+	const k8sJobFailedPodsKey = getKey(
+		'k8s.job.failed_pods',
+		'k8s_job_failed_pods',
+	);
+	const k8sJobDesiredSuccessfulPodsKey = getKey(
+		'k8s.job.desired_successful_pods',
+		'k8s_job_desired_successful_pods',
+	);
+	const k8sClusterNameKey = getKey('k8s.cluster.name', 'k8s_cluster_name');
+	const k8sNodeNameKey = getKey('k8s.node.name', 'k8s_node_name');
+	const k8sDeploymentNameKey = getKey(
+		'k8s.deployment.name',
+		'k8s_deployment_name',
+	);
+	const k8sNamespaceNameKey = getKey('k8s.namespace.name', 'k8s_namespace_name');
+	const k8sStatefulsetNameKey = getKey(
+		'k8s.statefulset.name',
+		'k8s_statefulset_name',
+	);
+	const k8sDaemonsetNameKey = getKey('k8s.daemonset.name', 'k8s_daemonset_name');
+	const k8sJobNameKey = getKey('k8s.job.name', 'k8s_job_name');
 
 	return [
 		{

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

@@ -25,6 +25,8 @@ import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
@@ -135,6 +137,11 @@ function K8sClustersList({
 		}
 	}, [quickFiltersLastUpdated]);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const createFiltersForSelectedRowData = (
 		selectedRowData: K8sClustersRowData,
 		groupBy: IBuilderQuery['groupBy'],
@@ -224,6 +231,8 @@ function K8sClustersList({
 			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const {
@@ -232,7 +241,10 @@ function K8sClustersList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.CLUSTERS),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(
+				K8sCategory.CLUSTERS,
+				dotMetricsEnabled,
+			),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -313,6 +325,8 @@ function K8sClustersList({
 			enabled: !!query,
 			keepPreviousData: true,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const clustersData = useMemo(() => data?.payload?.data?.records || [], [data]);

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

@@ -136,7 +136,7 @@ export const getK8sClustersListColumns = (
 	return columnsConfig as ColumnType<K8sClustersRowData>[];
 };
 
-const attributeToMetaKey: Record<string, keyof K8sClustersData['meta']> = {
+const dotToUnder: Record<string, keyof K8sClustersData['meta']> = {
 	'k8s.cluster.name': 'k8s_cluster_name',
 	'k8s.cluster.uid': 'k8s_cluster_uid',
 };
@@ -151,8 +151,7 @@ const getGroupByEle = (
 		const rawKey = group.key as string;
 
 		// Choose mapped key if present, otherwise use rawKey
-		const metaKey = (attributeToMetaKey[rawKey] ??
-			rawKey) as keyof typeof cluster.meta;
+		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof cluster.meta;
 		const value = cluster.meta[metaKey];
 
 		groupByValues.push(value);

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

@@ -30,28 +30,49 @@ export const getDaemonSetMetricsQueryPayload = (
 	daemonSet: K8sDaemonSetsData,
 	start: number,
 	end: number,
+	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const k8sPodCpuUtilizationKey = 'k8s.pod.cpu.usage';
+	const k8sPodCpuUtilizationKey = dotMetricsEnabled
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
 
-	const k8sContainerCpuRequestKey = 'k8s.container.cpu_request';
+	const k8sContainerCpuRequestKey = dotMetricsEnabled
+		? 'k8s.container.cpu_request'
+		: 'k8s_container_cpu_request';
 
-	const k8sContainerCpuLimitKey = 'k8s.container.cpu_limit';
+	const k8sContainerCpuLimitKey = dotMetricsEnabled
+		? 'k8s.container.cpu_limit'
+		: 'k8s_container_cpu_limit';
 
-	const k8sPodMemoryUsageKey = 'k8s.pod.memory.usage';
+	const k8sPodMemoryUsageKey = dotMetricsEnabled
+		? 'k8s.pod.memory.usage'
+		: 'k8s_pod_memory_usage';
 
-	const k8sContainerMemoryRequestKey = 'k8s.container.memory_request';
+	const k8sContainerMemoryRequestKey = dotMetricsEnabled
+		? 'k8s.container.memory_request'
+		: 'k8s_container_memory_request';
 
-	const k8sContainerMemoryLimitKey = 'k8s.container.memory_limit';
+	const k8sContainerMemoryLimitKey = dotMetricsEnabled
+		? 'k8s.container.memory_limit'
+		: 'k8s_container_memory_limit';
 
-	const k8sPodNetworkIoKey = 'k8s.pod.network.io';
+	const k8sPodNetworkIoKey = dotMetricsEnabled
+		? 'k8s.pod.network.io'
+		: 'k8s_pod_network_io';
 
-	const k8sPodNetworkErrorsKey = 'k8s.pod.network.errors';
+	const k8sPodNetworkErrorsKey = dotMetricsEnabled
+		? 'k8s.pod.network.errors'
+		: 'k8s_pod_network_errors';
 
-	const k8sDaemonSetNameKey = 'k8s.daemonset.name';
+	const k8sDaemonSetNameKey = dotMetricsEnabled
+		? 'k8s.daemonset.name'
+		: 'k8s_daemonset_name';
 
-	const k8sPodNameKey = 'k8s.pod.name';
+	const k8sPodNameKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
 
-	const k8sNamespaceNameKey = 'k8s.namespace.name';
+	const k8sNamespaceNameKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
 
 	return [
 		{

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

@@ -26,6 +26,8 @@ import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
@@ -137,6 +139,11 @@ function K8sDaemonSetsList({
 		}
 	}, [quickFiltersLastUpdated]);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const createFiltersForSelectedRowData = (
 		selectedRowData: K8sDaemonSetsRowData,
 		groupBy: IBuilderQuery['groupBy'],
@@ -226,6 +233,8 @@ function K8sDaemonSetsList({
 			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const {
@@ -234,7 +243,10 @@ function K8sDaemonSetsList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.DAEMONSETS),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(
+				K8sCategory.DAEMONSETS,
+				dotMetricsEnabled,
+			),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -308,6 +320,8 @@ function K8sDaemonSetsList({
 			enabled: !!query,
 			keepPreviousData: true,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const daemonSetsData = useMemo(() => data?.payload?.data?.records || [], [

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

@@ -236,7 +236,7 @@ export const getK8sDaemonSetsListColumns = (
 	return columnsConfig as ColumnType<K8sDaemonSetsRowData>[];
 };
 
-const attributeToMetaKey: Record<string, keyof K8sDaemonSetsData['meta']> = {
+const dotToUnder: Record<string, keyof K8sDaemonSetsData['meta']> = {
 	'k8s.daemonset.name': 'k8s_daemonset_name',
 	'k8s.namespace.name': 'k8s_namespace_name',
 	'k8s.cluster.name': 'k8s_cluster_name',
@@ -252,8 +252,7 @@ const getGroupByEle = (
 		const rawKey = group.key as string;
 
 		// Choose mapped key if present, otherwise use rawKey
-		const metaKey = (attributeToMetaKey[rawKey] ??
-			rawKey) as keyof typeof daemonSet.meta;
+		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof daemonSet.meta;
 		const value = daemonSet.meta[metaKey];
 
 		groupByValues.push(value);

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

@@ -30,26 +30,45 @@ export const getDeploymentMetricsQueryPayload = (
 	deployment: K8sDeploymentsData,
 	start: number,
 	end: number,
+	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const k8sPodCpuUtilizationKey = 'k8s.pod.cpu.usage';
+	const k8sPodCpuUtilizationKey = dotMetricsEnabled
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
 
-	const k8sContainerCpuRequestKey = 'k8s.container.cpu_request';
+	const k8sContainerCpuRequestKey = dotMetricsEnabled
+		? 'k8s.container.cpu_request'
+		: 'k8s_container_cpu_request';
 
-	const k8sContainerCpuLimitKey = 'k8s.container.cpu_limit';
+	const k8sContainerCpuLimitKey = dotMetricsEnabled
+		? 'k8s.container.cpu_limit'
+		: 'k8s_container_cpu_limit';
 
-	const k8sPodMemoryUsageKey = 'k8s.pod.memory.usage';
+	const k8sPodMemoryUsageKey = dotMetricsEnabled
+		? 'k8s.pod.memory.usage'
+		: 'k8s_pod_memory_usage';
 
-	const k8sContainerMemoryRequestKey = 'k8s.container.memory_request';
+	const k8sContainerMemoryRequestKey = dotMetricsEnabled
+		? 'k8s.container.memory_request'
+		: 'k8s_container_memory_request';
 
-	const k8sContainerMemoryLimitKey = 'k8s.container.memory_limit';
+	const k8sContainerMemoryLimitKey = dotMetricsEnabled
+		? 'k8s.container.memory_limit'
+		: 'k8s_container_memory_limit';
 
-	const k8sPodNetworkIoKey = 'k8s.pod.network.io';
+	const k8sPodNetworkIoKey = dotMetricsEnabled
+		? 'k8s.pod.network.io'
+		: 'k8s_pod_network_io';
 
-	const k8sPodNetworkErrorsKey = 'k8s.pod.network.errors';
+	const k8sPodNetworkErrorsKey = dotMetricsEnabled
+		? 'k8s.pod.network.errors'
+		: 'k8s_pod_network_errors';
 
-	const k8sDeploymentNameKey = 'k8s.deployment.name';
+	const k8sDeploymentNameKey = dotMetricsEnabled
+		? 'k8s.deployment.name'
+		: 'k8s_deployment_name';
 
-	const k8sPodNameKey = 'k8s.pod.name';
+	const k8sPodNameKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
 
 	return [
 		{

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

@@ -26,6 +26,8 @@ import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
@@ -138,6 +140,11 @@ function K8sDeploymentsList({
 		}
 	}, [quickFiltersLastUpdated]);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const createFiltersForSelectedRowData = (
 		selectedRowData: K8sDeploymentsRowData,
 		groupBy: IBuilderQuery['groupBy'],
@@ -227,6 +234,8 @@ function K8sDeploymentsList({
 			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const {
@@ -237,6 +246,7 @@ function K8sDeploymentsList({
 			dataSource: currentQuery.builder.queryData[0].dataSource,
 			aggregateAttribute: GetK8sEntityToAggregateAttribute(
 				K8sCategory.DEPLOYMENTS,
+				dotMetricsEnabled,
 			),
 			aggregateOperator: 'noop',
 			searchText: '',
@@ -311,6 +321,8 @@ function K8sDeploymentsList({
 			enabled: !!query,
 			keepPreviousData: true,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const deploymentsData = useMemo(() => data?.payload?.data?.records || [], [

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

@@ -226,7 +226,7 @@ export const getK8sDeploymentsListColumns = (
 	return columnsConfig as ColumnType<K8sDeploymentsRowData>[];
 };
 
-const attributeToMetaKey: Record<string, keyof K8sDeploymentsData['meta']> = {
+const dotToUnder: Record<string, keyof K8sDeploymentsData['meta']> = {
 	'k8s.deployment.name': 'k8s_deployment_name',
 	'k8s.namespace.name': 'k8s_namespace_name',
 	'k8s.cluster.name': 'k8s_cluster_name',
@@ -242,7 +242,7 @@ const getGroupByEle = (
 		const rawKey = group.key as string;
 
 		// Choose mapped key if present, otherwise use rawKey
-		const metaKey = (attributeToMetaKey[rawKey] ??
+		const metaKey = (dotToUnder[rawKey] ??
 			rawKey) as keyof typeof deployment.meta;
 		const value = deployment.meta[metaKey];
 

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

@@ -28,7 +28,9 @@ import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Options } from 'uplot';
 
+import { FeatureKeys } from '../../../../constants/features';
 import { useMultiIntersectionObserver } from '../../../../hooks/useMultiIntersectionObserver';
+import { useAppContext } from '../../../../providers/App/App';
 
 import './entityMetrics.styles.scss';
 
@@ -52,6 +54,7 @@ interface EntityMetricsProps<T> {
 		node: T,
 		start: number,
 		end: number,
+		dotMetricsEnabled: boolean,
 	) => GetQueryResultsProps[];
 	queryKey: string;
 	category: K8sCategory;
@@ -68,14 +71,31 @@ function EntityMetrics<T>({
 	queryKey,
 	category,
 }: EntityMetricsProps<T>): JSX.Element {
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const {
 		visibilities,
 		setElement,
 	} = useMultiIntersectionObserver(entityWidgetInfo.length, { threshold: 0.1 });
 
 	const queryPayloads = useMemo(
-		() => getEntityQueryPayload(entity, timeRange.startTime, timeRange.endTime),
-		[getEntityQueryPayload, entity, timeRange.startTime, timeRange.endTime],
+		() =>
+			getEntityQueryPayload(
+				entity,
+				timeRange.startTime,
+				timeRange.endTime,
+				dotMetricsEnabled,
+			),
+		[
+			getEntityQueryPayload,
+			entity,
+			timeRange.startTime,
+			timeRange.endTime,
+			dotMetricsEnabled,
+		],
 	);
 
 	const queries = useQueries(

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

@@ -97,7 +97,12 @@ jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
 			plan_version: 'test-plan-version',
 		},
 	},
-	featureFlags: [],
+	featureFlags: [
+		{
+			name: 'DOT_METRICS_ENABLED',
+			active: false,
+		},
+	],
 } as any);
 
 const mockEntity = {
@@ -380,6 +385,7 @@ describe('EntityMetrics', () => {
 			mockEntity,
 			mockTimeRange.startTime,
 			mockTimeRange.endTime,
+			false,
 		);
 	});
 });

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -24,6 +24,8 @@ import {
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
+import { FeatureKeys } from '../../constants/features';
+import { useAppContext } from '../../providers/App/App';
 import K8sClustersList from './Clusters/K8sClustersList';
 import {
 	GetClustersQuickFiltersConfig,
@@ -74,6 +76,11 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		entityVersion: '',
 	});
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const handleFilterChange = (query: Query): void => {
 		// update the current query with the new filters
 		// in infra monitoring k8s, we are using only one query, hence updating the 0th index of queryData
@@ -109,7 +116,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetPodsQuickFiltersConfig()}
+					config={GetPodsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -129,7 +136,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetNodesQuickFiltersConfig()}
+					config={GetNodesQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -152,7 +159,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetNamespaceQuickFiltersConfig()}
+					config={GetNamespaceQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -172,7 +179,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetClustersQuickFiltersConfig()}
+					config={GetClustersQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -192,7 +199,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetDeploymentsQuickFiltersConfig()}
+					config={GetDeploymentsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -212,7 +219,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetJobsQuickFiltersConfig()}
+					config={GetJobsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -232,7 +239,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetDaemonsetsQuickFiltersConfig()}
+					config={GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -255,7 +262,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetStatefulsetsQuickFiltersConfig()}
+					config={GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -275,7 +282,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetVolumesQuickFiltersConfig()}
+					config={GetVolumesQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>

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

@@ -30,13 +30,24 @@ export const getJobMetricsQueryPayload = (
 	job: K8sJobsData,
 	start: number,
 	end: number,
+	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const k8sPodCpuUtilizationKey = 'k8s.pod.cpu.usage';
-	const k8sPodMemoryUsageKey = 'k8s.pod.memory.usage';
-	const k8sPodNetworkIoKey = 'k8s.pod.network.io';
-	const k8sPodNetworkErrorsKey = 'k8s.pod.network.errors';
-	const k8sJobNameKey = 'k8s.job.name';
-	const k8sNamespaceNameKey = 'k8s.namespace.name';
+	const k8sPodCpuUtilizationKey = dotMetricsEnabled
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
+	const k8sPodMemoryUsageKey = dotMetricsEnabled
+		? 'k8s.pod.memory.usage'
+		: 'k8s_pod_memory_usage';
+	const k8sPodNetworkIoKey = dotMetricsEnabled
+		? 'k8s.pod.network.io'
+		: 'k8s_pod_network_io';
+	const k8sPodNetworkErrorsKey = dotMetricsEnabled
+		? 'k8s.pod.network.errors'
+		: 'k8s_pod_network_errors';
+	const k8sJobNameKey = dotMetricsEnabled ? 'k8s.job.name' : 'k8s_job_name';
+	const k8sNamespaceNameKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
 
 	return [
 		{

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

@@ -26,6 +26,8 @@ import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
@@ -132,6 +134,11 @@ function K8sJobsList({
 		}
 	}, [quickFiltersLastUpdated]);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const createFiltersForSelectedRowData = (
 		selectedRowData: K8sJobsRowData,
 		groupBy: IBuilderQuery['groupBy'],
@@ -208,10 +215,15 @@ function K8sJobsList({
 		isLoading: isLoadingGroupedByRowData,
 		isError: isErrorGroupedByRowData,
 		refetch: fetchGroupedByRowData,
-	} = useGetK8sJobsList(fetchGroupedByRowDataQuery as K8sJobsListPayload, {
-		queryKey: groupedByRowDataQueryKey,
-		enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
-	});
+	} = useGetK8sJobsList(
+		fetchGroupedByRowDataQuery as K8sJobsListPayload,
+		{
+			queryKey: groupedByRowDataQueryKey,
+			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
+		},
+		undefined,
+		dotMetricsEnabled,
+	);
 
 	const {
 		data: groupByFiltersData,
@@ -219,7 +231,10 @@ function K8sJobsList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.JOBS),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(
+				K8sCategory.JOBS,
+				dotMetricsEnabled,
+			),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -300,6 +315,8 @@ function K8sJobsList({
 			enabled: !!query,
 			keepPreviousData: true,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const jobsData = useMemo(() => data?.payload?.data?.records || [], [data]);

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

@@ -263,7 +263,7 @@ export const getK8sJobsListColumns = (
 	return columnsConfig as ColumnType<K8sJobsRowData>[];
 };
 
-const attributeToMetaKey: Record<string, keyof K8sJobsData['meta']> = {
+const dotToUnder: Record<string, keyof K8sJobsData['meta']> = {
 	'k8s.job.name': 'k8s_job_name',
 	'k8s.namespace.name': 'k8s_namespace_name',
 	'k8s.cluster.name': 'k8s_cluster_name',
@@ -279,8 +279,7 @@ const getGroupByEle = (
 		const rawKey = group.key as string;
 
 		// Choose mapped key if present, otherwise use rawKey
-		const metaKey = (attributeToMetaKey[rawKey] ??
-			rawKey) as keyof typeof job.meta;
+		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof job.meta;
 		const value = job.meta[metaKey];
 
 		groupByValues.push(value);

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

@@ -25,6 +25,8 @@ import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
@@ -136,6 +138,11 @@ function K8sNamespacesList({
 		}
 	}, [quickFiltersLastUpdated]);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const createFiltersForSelectedRowData = (
 		selectedRowData: K8sNamespacesRowData,
 		groupBy: IBuilderQuery['groupBy'],
@@ -225,6 +232,8 @@ function K8sNamespacesList({
 			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const {
@@ -233,7 +242,10 @@ function K8sNamespacesList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.NAMESPACES),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(
+				K8sCategory.NAMESPACES,
+				dotMetricsEnabled,
+			),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -307,6 +319,8 @@ function K8sNamespacesList({
 			enabled: !!query,
 			keepPreviousData: true,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const namespacesData = useMemo(() => data?.payload?.data?.records || [], [

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

@@ -54,35 +54,95 @@ export const getNamespaceMetricsQueryPayload = (
 	namespace: K8sNamespacesData,
 	start: number,
 	end: number,
+	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const k8sPodCpuUtilizationKey = 'k8s.pod.cpu.usage';
-	const k8sContainerCpuRequestKey = 'k8s.container.cpu_request';
-	const k8sPodMemoryUsageKey = 'k8s.pod.memory.usage';
-	const k8sContainerMemoryRequestKey = 'k8s.container.memory_request';
-	const k8sPodMemoryWorkingSetKey = 'k8s.pod.memory.working_set';
-	const k8sPodMemoryRssKey = 'k8s.pod.memory.rss';
-	const k8sPodNetworkIoKey = 'k8s.pod.network.io';
-	const k8sPodNetworkErrorsKey = 'k8s.pod.network.errors';
-	const k8sStatefulsetCurrentPodsKey = 'k8s.statefulset.current_pods';
-	const k8sStatefulsetDesiredPodsKey = 'k8s.statefulset.desired_pods';
-	const k8sStatefulsetUpdatedPodsKey = 'k8s.statefulset.updated_pods';
-	const k8sReplicasetDesiredKey = 'k8s.replicaset.desired';
-	const k8sReplicasetAvailableKey = 'k8s.replicaset.available';
-	const k8sDaemonsetDesiredScheduledNamespacesKey =
-		'k8s.daemonset.desired.scheduled.namespaces';
-	const k8sDaemonsetCurrentScheduledNamespacesKey =
-		'k8s.daemonset.current.scheduled.namespaces';
-	const k8sDaemonsetReadyNamespacesKey = 'k8s.daemonset.ready.namespaces';
-	const k8sDaemonsetMisscheduledNamespacesKey =
-		'k8s.daemonset.misscheduled.namespaces';
-	const k8sDeploymentDesiredKey = 'k8s.deployment.desired';
-	const k8sDeploymentAvailableKey = 'k8s.deployment.available';
-	const k8sNamespaceNameKey = 'k8s.namespace.name';
-	const k8sPodNameKey = 'k8s.pod.name';
-	const k8sStatefulsetNameKey = 'k8s.statefulset.name';
-	const k8sReplicasetNameKey = 'k8s.replicaset.name';
-	const k8sDaemonsetNameKey = 'k8s.daemonset.name';
-	const k8sDeploymentNameKey = 'k8s.deployment.name';
+	const getKey = (dotKey: string, underscoreKey: string): string =>
+		dotMetricsEnabled ? dotKey : underscoreKey;
+	const k8sPodCpuUtilizationKey = getKey(
+		'k8s.pod.cpu.usage',
+		'k8s_pod_cpu_usage',
+	);
+	const k8sContainerCpuRequestKey = getKey(
+		'k8s.container.cpu_request',
+		'k8s_container_cpu_request',
+	);
+	const k8sPodMemoryUsageKey = getKey(
+		'k8s.pod.memory.usage',
+		'k8s_pod_memory_usage',
+	);
+	const k8sContainerMemoryRequestKey = getKey(
+		'k8s.container.memory_request',
+		'k8s_container_memory_request',
+	);
+	const k8sPodMemoryWorkingSetKey = getKey(
+		'k8s.pod.memory.working_set',
+		'k8s_pod_memory_working_set',
+	);
+	const k8sPodMemoryRssKey = getKey('k8s.pod.memory.rss', 'k8s_pod_memory_rss');
+	const k8sPodNetworkIoKey = getKey('k8s.pod.network.io', 'k8s_pod_network_io');
+	const k8sPodNetworkErrorsKey = getKey(
+		'k8s.pod.network.errors',
+		'k8s_pod_network_errors',
+	);
+	const k8sStatefulsetCurrentPodsKey = getKey(
+		'k8s.statefulset.current_pods',
+		'k8s_statefulset_current_pods',
+	);
+	const k8sStatefulsetDesiredPodsKey = getKey(
+		'k8s.statefulset.desired_pods',
+		'k8s_statefulset_desired_pods',
+	);
+	const k8sStatefulsetUpdatedPodsKey = getKey(
+		'k8s.statefulset.updated_pods',
+		'k8s_statefulset_updated_pods',
+	);
+	const k8sReplicasetDesiredKey = getKey(
+		'k8s.replicaset.desired',
+		'k8s_replicaset_desired',
+	);
+	const k8sReplicasetAvailableKey = getKey(
+		'k8s.replicaset.available',
+		'k8s_replicaset_available',
+	);
+	const k8sDaemonsetDesiredScheduledNamespacesKey = getKey(
+		'k8s.daemonset.desired.scheduled.namespaces',
+		'k8s_daemonset_desired_scheduled_namespaces',
+	);
+	const k8sDaemonsetCurrentScheduledNamespacesKey = getKey(
+		'k8s.daemonset.current.scheduled.namespaces',
+		'k8s_daemonset_current_scheduled_namespaces',
+	);
+	const k8sDaemonsetReadyNamespacesKey = getKey(
+		'k8s.daemonset.ready.namespaces',
+		'k8s_daemonset_ready_namespaces',
+	);
+	const k8sDaemonsetMisscheduledNamespacesKey = getKey(
+		'k8s.daemonset.misscheduled.namespaces',
+		'k8s_daemonset_misscheduled_namespaces',
+	);
+	const k8sDeploymentDesiredKey = getKey(
+		'k8s.deployment.desired',
+		'k8s_deployment_desired',
+	);
+	const k8sDeploymentAvailableKey = getKey(
+		'k8s.deployment.available',
+		'k8s_deployment_available',
+	);
+	const k8sNamespaceNameKey = getKey('k8s.namespace.name', 'k8s_namespace_name');
+	const k8sPodNameKey = getKey('k8s.pod.name', 'k8s_pod_name');
+	const k8sStatefulsetNameKey = getKey(
+		'k8s.statefulset.name',
+		'k8s_statefulset_name',
+	);
+	const k8sReplicasetNameKey = getKey(
+		'k8s.replicaset.name',
+		'k8s_replicaset_name',
+	);
+	const k8sDaemonsetNameKey = getKey('k8s.daemonset.name', 'k8s_daemonset_name');
+	const k8sDeploymentNameKey = getKey(
+		'k8s.deployment.name',
+		'k8s_deployment_name',
+	);
 
 	return [
 		{

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

@@ -122,7 +122,7 @@ export const getK8sNamespacesListColumns = (
 	return columnsConfig as ColumnType<K8sNamespacesRowData>[];
 };
 
-const attributeToMetaKey: Record<string, keyof K8sNamespacesData['meta']> = {
+const dotToUnder: Record<string, keyof K8sNamespacesData['meta']> = {
 	'k8s.namespace.name': 'k8s_namespace_name',
 	'k8s.cluster.name': 'k8s_cluster_name',
 };
@@ -137,8 +137,7 @@ const getGroupByEle = (
 		const rawKey = group.key as string;
 
 		// Choose mapped key if present, otherwise use rawKey
-		const metaKey = (attributeToMetaKey[rawKey] ??
-			rawKey) as keyof typeof namespace.meta;
+		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof namespace.meta;
 		const value = namespace.meta[metaKey];
 
 		groupByValues.push(value);

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

@@ -25,6 +25,8 @@ import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
@@ -130,6 +132,11 @@ function K8sNodesList({
 		}
 	}, [quickFiltersLastUpdated]);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const createFiltersForSelectedRowData = (
 		selectedRowData: K8sNodesRowData,
 		groupBy: IBuilderQuery['groupBy'],
@@ -213,10 +220,15 @@ function K8sNodesList({
 		isLoading: isLoadingGroupedByRowData,
 		isError: isErrorGroupedByRowData,
 		refetch: fetchGroupedByRowData,
-	} = useGetK8sNodesList(fetchGroupedByRowDataQuery as K8sNodesListPayload, {
-		queryKey: groupedByRowDataQueryKey,
-		enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
-	});
+	} = useGetK8sNodesList(
+		fetchGroupedByRowDataQuery as K8sNodesListPayload,
+		{
+			queryKey: groupedByRowDataQueryKey,
+			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
+		},
+		undefined,
+		dotMetricsEnabled,
+	);
 
 	const {
 		data: groupByFiltersData,
@@ -224,7 +236,10 @@ function K8sNodesList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.NODES),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(
+				K8sCategory.NODES,
+				dotMetricsEnabled,
+			),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -305,6 +320,8 @@ function K8sNodesList({
 			enabled: !!query,
 			keepPreviousData: true,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const nodesData = useMemo(() => data?.payload?.data?.records || [], [data]);