Merge branch 'main' into nv/10282

* chore: refactored the config builder and added base config builder

* chore: added a common chart wrapper

* chore: tsc fix

* fix: pr review changes

* fix: pr review changes

* chore: added different tooltips

* chore: removed dayjs extention

* feat: added new barpanel component

* fix: added fix for pr review changes

* chore: added support for bar alignment configuration

* chore: updated structure for bar panel

* test: added tests for barpanel hooks + utils

.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"
 	}
 }

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

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/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/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/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/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/DashboardVariablesSelection/VariableItem.test.tsx

@@ -53,6 +53,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						transitiveDescendants: {},
 						hasCycle: false,
 					}}
 				/>
@@ -75,6 +76,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						transitiveDescendants: {},
 						hasCycle: false,
 					}}
 				/>
@@ -98,6 +100,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						transitiveDescendants: {},
 						hasCycle: false,
 					}}
 				/>
@@ -139,6 +142,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						transitiveDescendants: {},
 						hasCycle: false,
 					}}
 				/>
@@ -169,6 +173,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						transitiveDescendants: {},
 						hasCycle: false,
 					}}
 				/>
@@ -191,6 +196,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						transitiveDescendants: {},
 						hasCycle: false,
 					}}
 				/>

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

@@ -14,6 +14,7 @@ const baseDependencyData = {
 	order: [],
 	graph: {},
 	parentDependencyGraph: {},
+	transitiveDescendants: {},
 	hasCycle: false,
 };
 

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

@@ -223,6 +223,16 @@ 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);

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

@@ -246,10 +246,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,
 	};

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/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]);

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/constants.ts

@@ -54,40 +54,88 @@ export const getNodeMetricsQueryPayload = (
 	node: K8sNodesData,
 	start: number,
 	end: number,
+	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const k8sNodeCpuUtilizationKey = 'k8s.node.cpu.usage';
+	const getKey = (dotKey: string, underscoreKey: string): string =>
+		dotMetricsEnabled ? dotKey : underscoreKey;
+	const k8sNodeCpuUtilizationKey = getKey(
+		'k8s.node.cpu.usage',
+		'k8s_node_cpu_usage',
+	);
 
-	const k8sNodeAllocatableCpuKey = 'k8s.node.allocatable_cpu';
+	const k8sNodeAllocatableCpuKey = getKey(
+		'k8s.node.allocatable_cpu',
+		'k8s_node_allocatable_cpu',
+	);
 
-	const k8sContainerCpuRequestKey = 'k8s.container.cpu_request';
+	const k8sContainerCpuRequestKey = getKey(
+		'k8s.container.cpu_request',
+		'k8s_container_cpu_request',
+	);
 
-	const k8sNodeMemoryUsageKey = 'k8s.node.memory.usage';
+	const k8sNodeMemoryUsageKey = getKey(
+		'k8s.node.memory.usage',
+		'k8s_node_memory_usage',
+	);
 
-	const k8sNodeAllocatableMemoryKey = 'k8s.node.allocatable_memory';
+	const k8sNodeAllocatableMemoryKey = getKey(
+		'k8s.node.allocatable_memory',
+		'k8s_node_allocatable_memory',
+	);
 
-	const k8sContainerMemoryRequestKey = 'k8s.container.memory_request';
+	const k8sContainerMemoryRequestKey = getKey(
+		'k8s.container.memory_request',
+		'k8s_container_memory_request',
+	);
 
-	const k8sNodeMemoryWorkingSetKey = 'k8s.node.memory.working_set';
+	const k8sNodeMemoryWorkingSetKey = getKey(
+		'k8s.node.memory.working_set',
+		'k8s_node_memory_working_set',
+	);
 
-	const k8sNodeMemoryRssKey = 'k8s.node.memory.rss';
+	const k8sNodeMemoryRssKey = getKey(
+		'k8s.node.memory.rss',
+		'k8s_node_memory_rss',
+	);
 
-	const k8sPodCpuUtilizationKey = 'k8s.pod.cpu.usage';
+	const k8sPodCpuUtilizationKey = getKey(
+		'k8s.pod.cpu.usage',
+		'k8s_pod_cpu_usage',
+	);
 
-	const k8sPodMemoryUsageKey = 'k8s.pod.memory.usage';
+	const k8sPodMemoryUsageKey = getKey(
+		'k8s.pod.memory.usage',
+		'k8s_pod_memory_usage',
+	);
 
-	const k8sNodeNetworkErrorsKey = 'k8s.node.network.errors';
+	const k8sNodeNetworkErrorsKey = getKey(
+		'k8s.node.network.errors',
+		'k8s_node_network_errors',
+	);
 
-	const k8sNodeNetworkIoKey = 'k8s.node.network.io';
+	const k8sNodeNetworkIoKey = getKey(
+		'k8s.node.network.io',
+		'k8s_node_network_io',
+	);
 
-	const k8sNodeFilesystemUsageKey = 'k8s.node.filesystem.usage';
+	const k8sNodeFilesystemUsageKey = getKey(
+		'k8s.node.filesystem.usage',
+		'k8s_node_filesystem_usage',
+	);
 
-	const k8sNodeFilesystemCapacityKey = 'k8s.node.filesystem.capacity';
+	const k8sNodeFilesystemCapacityKey = getKey(
+		'k8s.node.filesystem.capacity',
+		'k8s_node_filesystem_capacity',
+	);
 
-	const k8sNodeFilesystemAvailableKey = 'k8s.node.filesystem.available';
+	const k8sNodeFilesystemAvailableKey = getKey(
+		'k8s.node.filesystem.available',
+		'k8s_node_filesystem_available',
+	);
 
-	const k8sNodeNameKey = 'k8s.node.name';
+	const k8sNodeNameKey = getKey('k8s.node.name', 'k8s_node_name');
 
-	const k8sPodNameKey = 'k8s.pod.name';
+	const k8sPodNameKey = getKey('k8s.pod.name', 'k8s_pod_name');
 
 	return [
 		{

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

@@ -152,7 +152,7 @@ export const getK8sNodesListColumns = (
 	return columnsConfig as ColumnType<K8sNodesRowData>[];
 };
 
-const attributeToMetaKey: Record<string, keyof K8sNodesData['meta']> = {
+const dotToUnder: Record<string, keyof K8sNodesData['meta']> = {
 	'k8s.node.name': 'k8s_node_name',
 	'k8s.cluster.name': 'k8s_cluster_name',
 	'k8s.node.uid': 'k8s_node_uid',
@@ -168,8 +168,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 node.meta;
+		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof node.meta;
 
 		const value = node.meta[metaKey];
 

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -27,6 +27,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,
@@ -118,13 +120,21 @@ function K8sPodsList({
 		[currentQuery?.builder?.queryData],
 	);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const {
 		data: groupByFiltersData,
 		isLoading: isLoadingGroupByFilters,
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.PODS),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(
+				K8sCategory.PODS,
+				dotMetricsEnabled,
+			),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -234,6 +244,8 @@ function K8sPodsList({
 			enabled: !!query,
 			keepPreviousData: true,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const createFiltersForSelectedRowData = (
@@ -311,10 +323,15 @@ function K8sPodsList({
 		isLoading: isLoadingGroupedByRowData,
 		isError: isErrorGroupedByRowData,
 		refetch: fetchGroupedByRowData,
-	} = useGetK8sPodsList(fetchGroupedByRowDataQuery as K8sPodsListPayload, {
-		queryKey: groupedByRowDataQueryKey,
-		enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
-	});
+	} = useGetK8sPodsList(
+		fetchGroupedByRowDataQuery as K8sPodsListPayload,
+		{
+			queryKey: groupedByRowDataQueryKey,
+			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
+		},
+		undefined,
+		dotMetricsEnabled,
+	);
 
 	const podsData = useMemo(() => data?.payload?.data?.records || [], [data]);
 	const totalCount = data?.payload?.data?.total || 0;

frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/constants.ts

@@ -66,56 +66,116 @@ export const getPodMetricsQueryPayload = (
 	pod: K8sPodsData,
 	start: number,
 	end: number,
+	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const k8sContainerNameKey = 'k8s.container.name';
+	const getKey = (dotKey: string, underscoreKey: string): string =>
+		dotMetricsEnabled ? dotKey : underscoreKey;
+	const k8sContainerNameKey = getKey('k8s.container.name', 'k8s_container_name');
 
-	const k8sPodCpuUtilKey = 'k8s.pod.cpu.usage';
+	const k8sPodCpuUtilKey = getKey('k8s.pod.cpu.usage', 'k8s_pod_cpu_usage');
 
-	const k8sPodCpuReqUtilKey = 'k8s.pod.cpu_request_utilization';
+	const k8sPodCpuReqUtilKey = getKey(
+		'k8s.pod.cpu_request_utilization',
+		'k8s_pod_cpu_request_utilization',
+	);
 
-	const k8sPodCpuLimitUtilKey = 'k8s.pod.cpu_limit_utilization';
+	const k8sPodCpuLimitUtilKey = getKey(
+		'k8s.pod.cpu_limit_utilization',
+		'k8s_pod_cpu_limit_utilization',
+	);
 
-	const k8sPodMemUsageKey = 'k8s.pod.memory.usage';
+	const k8sPodMemUsageKey = getKey(
+		'k8s.pod.memory.usage',
+		'k8s_pod_memory_usage',
+	);
 
-	const k8sPodMemReqUtilKey = 'k8s.pod.memory_request_utilization';
+	const k8sPodMemReqUtilKey = getKey(
+		'k8s.pod.memory_request_utilization',
+		'k8s_pod_memory_request_utilization',
+	);
 
-	const k8sPodMemLimitUtilKey = 'k8s.pod.memory_limit_utilization';
+	const k8sPodMemLimitUtilKey = getKey(
+		'k8s.pod.memory_limit_utilization',
+		'k8s_pod_memory_limit_utilization',
+	);
 
-	const k8sPodMemRssKey = 'k8s.pod.memory.rss';
+	const k8sPodMemRssKey = getKey('k8s.pod.memory.rss', 'k8s_pod_memory_rss');
 
-	const k8sPodMemWorkingSetKey = 'k8s.pod.memory.working_set';
+	const k8sPodMemWorkingSetKey = getKey(
+		'k8s.pod.memory.working_set',
+		'k8s_pod_memory_working_set',
+	);
 
-	const k8sPodMemMajorPFKey = 'k8s.pod.memory.major_page_faults';
+	const k8sPodMemMajorPFKey = getKey(
+		'k8s.pod.memory.major_page_faults',
+		'k8s_pod_memory_major_page_faults',
+	);
 
-	const containerCpuUtilKey = 'container.cpu.usage';
+	const containerCpuUtilKey = getKey(
+		'container.cpu.usage',
+		'container_cpu_usage',
+	);
 
-	const k8sContainerCpuRequestKey = 'k8s.container.cpu_request';
+	const k8sContainerCpuRequestKey = getKey(
+		'k8s.container.cpu_request',
+		'k8s_container_cpu_request',
+	);
 
-	const k8sContainerCpuLimitKey = 'k8s.container.cpu_limit';
+	const k8sContainerCpuLimitKey = getKey(
+		'k8s.container.cpu_limit',
+		'k8s_container_cpu_limit',
+	);
 
-	const k8sContainerMemoryLimitKey = 'k8s.container.memory_limit';
+	const k8sContainerMemoryLimitKey = getKey(
+		'k8s.container.memory_limit',
+		'k8s_container_memory_limit',
+	);
 
-	const k8sContainerMemoryRequestKey = 'k8s.container.memory_request';
+	const k8sContainerMemoryRequestKey = getKey(
+		'k8s.container.memory_request',
+		'k8s_container_memory_request',
+	);
 
-	const containerMemUsageKey = 'container.memory.usage';
+	const containerMemUsageKey = getKey(
+		'container.memory.usage',
+		'container_memory_usage',
+	);
 
-	const containerMemWorkingSetKey = 'container.memory.working_set';
+	const containerMemWorkingSetKey = getKey(
+		'container.memory.working_set',
+		'container_memory_working_set',
+	);
 
-	const containerMemRssKey = 'container.memory.rss';
+	const containerMemRssKey = getKey(
+		'container.memory.rss',
+		'container_memory_rss',
+	);
 
-	const k8sPodNetworkIoKey = 'k8s.pod.network.io';
+	const k8sPodNetworkIoKey = getKey('k8s.pod.network.io', 'k8s_pod_network_io');
 
-	const k8sPodNetworkErrorsKey = 'k8s.pod.network.errors';
+	const k8sPodNetworkErrorsKey = getKey(
+		'k8s.pod.network.errors',
+		'k8s_pod_network_errors',
+	);
 
-	const k8sPodFilesystemCapacityKey = 'k8s.pod.filesystem.capacity';
+	const k8sPodFilesystemCapacityKey = getKey(
+		'k8s.pod.filesystem.capacity',
+		'k8s_pod_filesystem_capacity',
+	);
 
-	const k8sPodFilesystemAvailableKey = 'k8s.pod.filesystem.available';
+	const k8sPodFilesystemAvailableKey = getKey(
+		'k8s.pod.filesystem.available',
+		'k8s_pod_filesystem_available',
+	);
 
-	const k8sPodFilesystemUsageKey = 'k8s.pod.filesystem.usage';
+	const k8sPodFilesystemUsageKey = getKey(
+		'k8s.pod.filesystem.usage',
+		'k8s_pod_filesystem_usage',
+	);
 
-	const k8sPodNameKey = 'k8s.pod.name';
+	const k8sPodNameKey = getKey('k8s.pod.name', 'k8s_pod_name');
 
-	const k8sNamespaceNameKey = 'k8s.namespace.name';
+	const k8sNamespaceNameKey = getKey('k8s.namespace.name', 'k8s_namespace_name');
 	return [
 		{
 			selectedTime: 'GLOBAL_TIME',

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.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 K8sStatefulSetsList({
 		}
 	}, [quickFiltersLastUpdated]);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const createFiltersForSelectedRowData = (
 		selectedRowData: K8sStatefulSetsRowData,
 		groupBy: IBuilderQuery['groupBy'],
@@ -226,6 +233,8 @@ function K8sStatefulSetsList({
 			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const {
@@ -236,6 +245,7 @@ function K8sStatefulSetsList({
 			dataSource: currentQuery.builder.queryData[0].dataSource,
 			aggregateAttribute: GetK8sEntityToAggregateAttribute(
 				K8sCategory.STATEFULSETS,
+				dotMetricsEnabled,
 			),
 			aggregateOperator: 'noop',
 			searchText: '',
@@ -317,6 +327,8 @@ function K8sStatefulSetsList({
 			enabled: !!query,
 			keepPreviousData: true,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const statefulSetsData = useMemo(() => data?.payload?.data?.records || [], [

frontend/src/container/InfraMonitoringK8s/StatefulSets/StatefulSetDetails/constants.ts

@@ -38,25 +38,54 @@ export const getStatefulSetMetricsQueryPayload = (
 	statefulSet: K8sStatefulSetsData,
 	start: number,
 	end: number,
+	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const k8sStatefulSetNameKey = 'k8s.statefulset.name';
-	const k8sNamespaceNameKey = 'k8s.namespace.name';
-	const k8sPodNameKey = 'k8s.pod.name';
+	const k8sStatefulSetNameKey = dotMetricsEnabled
+		? 'k8s.statefulset.name'
+		: 'k8s_statefulset_name';
+	const k8sNamespaceNameKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
+	const k8sPodNameKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
 
-	const k8sPodCpuUtilKey = 'k8s.pod.cpu.usage';
-	const k8sContainerCpuRequestKey = 'k8s.container.cpu_request';
-	const k8sContainerCpuLimitKey = 'k8s.container.cpu_limit';
-	const k8sPodCpuReqUtilKey = 'k8s.pod.cpu_request_utilization';
-	const k8sPodCpuLimitUtilKey = 'k8s.pod.cpu_limit_utilization';
+	const k8sPodCpuUtilKey = dotMetricsEnabled
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
+	const k8sContainerCpuRequestKey = dotMetricsEnabled
+		? 'k8s.container.cpu_request'
+		: 'k8s_container_cpu_request';
+	const k8sContainerCpuLimitKey = dotMetricsEnabled
+		? 'k8s.container.cpu_limit'
+		: 'k8s_container_cpu_limit';
+	const k8sPodCpuReqUtilKey = dotMetricsEnabled
+		? 'k8s.pod.cpu_request_utilization'
+		: 'k8s_pod_cpu_request_utilization';
+	const k8sPodCpuLimitUtilKey = dotMetricsEnabled
+		? 'k8s.pod.cpu_limit_utilization'
+		: 'k8s_pod_cpu_limit_utilization';
 
-	const k8sPodMemUsageKey = 'k8s.pod.memory.usage';
-	const k8sContainerMemRequestKey = 'k8s.container.memory_request';
-	const k8sContainerMemLimitKey = 'k8s.container.memory_limit';
-	const k8sPodMemReqUtilKey = 'k8s.pod.memory_request_utilization';
-	const k8sPodMemLimitUtilKey = 'k8s.pod.memory_limit_utilization';
+	const k8sPodMemUsageKey = dotMetricsEnabled
+		? 'k8s.pod.memory.usage'
+		: 'k8s_pod_memory_usage';
+	const k8sContainerMemRequestKey = dotMetricsEnabled
+		? 'k8s.container.memory_request'
+		: 'k8s_container_memory_request';
+	const k8sContainerMemLimitKey = dotMetricsEnabled
+		? 'k8s.container.memory_limit'
+		: 'k8s_container_memory_limit';
+	const k8sPodMemReqUtilKey = dotMetricsEnabled
+		? 'k8s.pod.memory_request_utilization'
+		: 'k8s_pod_memory_request_utilization';
+	const k8sPodMemLimitUtilKey = dotMetricsEnabled
+		? 'k8s.pod.memory_limit_utilization'
+		: 'k8s_pod_memory_limit_utilization';
 
-	const k8sPodNetworkIoKey = 'k8s.pod.network.io';
-	const k8sPodNetworkErrorsKey = 'k8s.pod.network.errors';
+	const k8sPodNetworkIoKey = dotMetricsEnabled
+		? 'k8s.pod.network.io'
+		: 'k8s_pod_network_io';
+	const k8sPodNetworkErrorsKey = dotMetricsEnabled
+		? 'k8s.pod.network.errors'
+		: 'k8s_pod_network_errors';
 
 	return [
 		{

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

@@ -236,7 +236,7 @@ export const getK8sStatefulSetsListColumns = (
 	return columnsConfig as ColumnType<K8sStatefulSetsRowData>[];
 };
 
-const attributeToMetaKey: Record<string, keyof K8sStatefulSetsData['meta']> = {
+const dotToUnder: Record<string, keyof K8sStatefulSetsData['meta']> = {
 	'k8s.namespace.name': 'k8s_namespace_name',
 	'k8s.statefulset.name': 'k8s_statefulset_name',
 };
@@ -251,7 +251,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 statefulSet.meta;
 		const value = statefulSet.meta[metaKey];
 

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.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 K8sVolumesList({
 		}
 	}, [quickFiltersLastUpdated]);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const createFiltersForSelectedRowData = (
 		selectedRowData: K8sVolumesRowData,
 		groupBy: IBuilderQuery['groupBy'],
@@ -194,10 +201,15 @@ function K8sVolumesList({
 		isLoading: isLoadingGroupedByRowData,
 		isError: isErrorGroupedByRowData,
 		refetch: fetchGroupedByRowData,
-	} = useGetK8sVolumesList(fetchGroupedByRowDataQuery as K8sVolumesListPayload, {
-		queryKey: ['volumeList', fetchGroupedByRowDataQuery],
-		enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
-	});
+	} = useGetK8sVolumesList(
+		fetchGroupedByRowDataQuery as K8sVolumesListPayload,
+		{
+			queryKey: ['volumeList', fetchGroupedByRowDataQuery],
+			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
+		},
+		undefined,
+		dotMetricsEnabled,
+	);
 
 	const {
 		data: groupByFiltersData,
@@ -205,7 +217,10 @@ function K8sVolumesList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.NODES),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(
+				K8sCategory.NODES,
+				dotMetricsEnabled,
+			),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -253,6 +268,8 @@ function K8sVolumesList({
 			queryKey: ['volumeList', query],
 			enabled: !!query,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const volumesData = useMemo(() => data?.payload?.data?.records || [], [data]);

frontend/src/container/InfraMonitoringK8s/Volumes/VolumeDetails/constants.ts

@@ -34,17 +34,38 @@ export const getVolumeQueryPayload = (
 	volume: K8sVolumesData,
 	start: number,
 	end: number,
+	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const k8sClusterNameKey = 'k8s.cluster.name';
-	const k8sNamespaceNameKey = 'k8s.namespace.name';
-	const k8sVolumeAvailableKey = 'k8s.volume.available';
-	const k8sVolumeCapacityKey = 'k8s.volume.capacity';
-	const k8sVolumeInodesUsedKey = 'k8s.volume.inodes.used';
-	const k8sVolumeInodesKey = 'k8s.volume.inodes';
-	const k8sVolumeInodesFreeKey = 'k8s.volume.inodes.free';
-	const k8sVolumeTypeKey = 'k8s.volume.type';
-	const k8sPVCNameKey = 'k8s.persistentvolumeclaim.name';
-	const legendTemplate = '{{k8s.namespace.name}}-{{k8s.pod.name}}';
+	const k8sClusterNameKey = dotMetricsEnabled
+		? 'k8s.cluster.name'
+		: 'k8s_cluster_name';
+	const k8sNamespaceNameKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
+	const k8sVolumeAvailableKey = dotMetricsEnabled
+		? 'k8s.volume.available'
+		: 'k8s_volume_available';
+	const k8sVolumeCapacityKey = dotMetricsEnabled
+		? 'k8s.volume.capacity'
+		: 'k8s_volume_capacity';
+	const k8sVolumeInodesUsedKey = dotMetricsEnabled
+		? 'k8s.volume.inodes.used'
+		: 'k8s_volume_inodes_used';
+	const k8sVolumeInodesKey = dotMetricsEnabled
+		? 'k8s.volume.inodes'
+		: 'k8s_volume_inodes';
+	const k8sVolumeInodesFreeKey = dotMetricsEnabled
+		? 'k8s.volume.inodes.free'
+		: 'k8s_volume_inodes_free';
+	const k8sVolumeTypeKey = dotMetricsEnabled
+		? 'k8s.volume.type'
+		: 'k8s_volume_type';
+	const k8sPVCNameKey = dotMetricsEnabled
+		? 'k8s.persistentvolumeclaim.name'
+		: 'k8s_persistentvolumeclaim_name';
+	const legendTemplate = dotMetricsEnabled
+		? '{{k8s.namespace.name}}-{{k8s.pod.name}}'
+		: '{{k8s_namespace_name}}-{{k8s_pod_name}}';
 
 	return [
 		{

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

@@ -142,7 +142,7 @@ export const getK8sVolumesListColumns = (
 	return columnsConfig as ColumnType<K8sVolumesRowData>[];
 };
 
-const attributeToMetaKey: Record<string, keyof K8sVolumesData['meta']> = {
+const dotToUnder: Record<string, keyof K8sVolumesData['meta']> = {
 	'k8s.namespace.name': 'k8s_namespace_name',
 	'k8s.node.name': 'k8s_node_name',
 	'k8s.pod.name': 'k8s_pod_name',
@@ -161,8 +161,7 @@ const getGroupByEle = (
 	groupBy.forEach((group) => {
 		const rawKey = group.key as string;
 
-		const metaKey = (attributeToMetaKey[rawKey] ??
-			rawKey) as keyof typeof volume.meta;
+		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof volume.meta;
 
 		const value = volume.meta[metaKey];
 

frontend/src/container/InfraMonitoringK8s/constants.ts

@@ -36,7 +36,21 @@ export const K8sCategories = {
 	VOLUMES: 'volumes',
 };
 
-export const K8sEntityToAggregateAttributeMap = {
+export const underscoreMap = {
+	[K8sCategory.HOSTS]: 'system_cpu_load_average_15m',
+	[K8sCategory.PODS]: 'k8s_pod_cpu_usage',
+	[K8sCategory.NODES]: 'k8s_node_cpu_usage',
+	[K8sCategory.NAMESPACES]: 'k8s_pod_cpu_usage',
+	[K8sCategory.CLUSTERS]: 'k8s_node_cpu_usage',
+	[K8sCategory.DEPLOYMENTS]: 'k8s_pod_cpu_usage',
+	[K8sCategory.STATEFULSETS]: 'k8s_pod_cpu_usage',
+	[K8sCategory.DAEMONSETS]: 'k8s_pod_cpu_usage',
+	[K8sCategory.CONTAINERS]: 'k8s_pod_cpu_usage',
+	[K8sCategory.JOBS]: 'k8s_job_desired_successful_pods',
+	[K8sCategory.VOLUMES]: 'k8s_volume_capacity',
+};
+
+export const dotMap = {
 	[K8sCategory.HOSTS]: 'system.cpu.load_average.15m',
 	[K8sCategory.PODS]: 'k8s.pod.cpu.usage',
 	[K8sCategory.NODES]: 'k8s.node.cpu.usage',
@@ -52,23 +66,51 @@ export const K8sEntityToAggregateAttributeMap = {
 
 export function GetK8sEntityToAggregateAttribute(
 	category: K8sCategory,
+	dotMetricsEnabled: boolean,
 ): string {
-	return K8sEntityToAggregateAttributeMap[category];
+	return dotMetricsEnabled ? dotMap[category] : underscoreMap[category];
 }
 
-export function GetPodsQuickFiltersConfig(): IQuickFiltersConfig[] {
+export function GetPodsQuickFiltersConfig(
+	dotMetricsEnabled: boolean,
+): IQuickFiltersConfig[] {
+	const podKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
+	const namespaceKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
+	const nodeKey = dotMetricsEnabled ? 'k8s.node.name' : 'k8s_node_name';
+	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
+	const deploymentKey = dotMetricsEnabled
+		? 'k8s.deployment.name'
+		: 'k8s_deployment_name';
+	const statefulsetKey = dotMetricsEnabled
+		? 'k8s.statefulset.name'
+		: 'k8s_statefulset_name';
+	const daemonsetKey = dotMetricsEnabled
+		? 'k8s.daemonset.name'
+		: 'k8s_daemonset_name';
+	const jobKey = dotMetricsEnabled ? 'k8s.job.name' : 'k8s_job_name';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
+	// Define aggregate attribute (metric) name
+	const cpuUtilizationMetric = dotMetricsEnabled
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
+
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'Pod',
 			attributeKey: {
-				key: 'k8s.pod.name',
+				key: podKey,
 				dataType: DataTypes.String,
 				type: 'tag',
-				id: 'k8s.pod.name--string--tag--true',
+				id: `${podKey}--string--tag--true`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: cpuUtilizationMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -76,13 +118,13 @@ export function GetPodsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Namespace',
 			attributeKey: {
-				key: 'k8s.namespace.name',
+				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.namespace.name--string--resource--false',
+				id: `${namespaceKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: cpuUtilizationMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: false,
 		},
@@ -90,13 +132,13 @@ export function GetPodsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Node',
 			attributeKey: {
-				key: 'k8s.node.name',
+				key: nodeKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.node.name--string--resource--false',
+				id: `${nodeKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: cpuUtilizationMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: false,
 		},
@@ -104,13 +146,13 @@ export function GetPodsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Cluster',
 			attributeKey: {
-				key: 'k8s.cluster.name',
+				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.cluster.name--string--resource--false',
+				id: `${clusterKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: cpuUtilizationMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: false,
 		},
@@ -118,13 +160,13 @@ export function GetPodsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Deployment',
 			attributeKey: {
-				key: 'k8s.deployment.name',
+				key: deploymentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.deployment.name--string--resource--false',
+				id: `${deploymentKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: cpuUtilizationMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: false,
 		},
@@ -132,13 +174,13 @@ export function GetPodsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Statefulset',
 			attributeKey: {
-				key: 'k8s.statefulset.name',
+				key: statefulsetKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.statefulset.name--string--resource--false',
+				id: `${statefulsetKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: cpuUtilizationMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: false,
 		},
@@ -146,13 +188,13 @@ export function GetPodsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'DaemonSet',
 			attributeKey: {
-				key: 'k8s.daemonset.name',
+				key: daemonsetKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.daemonset.name--string--resource--false',
+				id: `${daemonsetKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: cpuUtilizationMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: false,
 		},
@@ -160,13 +202,13 @@ export function GetPodsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Job',
 			attributeKey: {
-				key: 'k8s.job.name',
+				key: jobKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.job.name--string--resource--false',
+				id: `${jobKey}--string--resource--false`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: cpuUtilizationMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: false,
 		},
@@ -174,7 +216,7 @@ export function GetPodsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: 'deployment.environment',
+				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
@@ -183,19 +225,33 @@ export function GetPodsQuickFiltersConfig(): IQuickFiltersConfig[] {
 	];
 }
 
-export function GetNodesQuickFiltersConfig(): IQuickFiltersConfig[] {
+export function GetNodesQuickFiltersConfig(
+	dotMetricsEnabled: boolean,
+): IQuickFiltersConfig[] {
+	// Define attribute keys
+	const nodeKey = dotMetricsEnabled ? 'k8s.node.name' : 'k8s_node_name';
+	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
+
+	// Define aggregate metric name for node CPU utilization
+	const cpuUtilMetric = dotMetricsEnabled
+		? 'k8s.node.cpu.usage'
+		: 'k8s_node_cpu_usage';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'Node Name',
 			attributeKey: {
-				key: 'k8s.node.name',
+				key: nodeKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.node.name--string--resource--true',
+				id: `${nodeKey}--string--resource--true`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.node.cpu.usage',
+			aggregateAttribute: cpuUtilMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -203,13 +259,13 @@ export function GetNodesQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Cluster Name',
 			attributeKey: {
-				key: 'k8s.cluster.name',
+				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.cluster.name--string--resource--true',
+				id: `${clusterKey}--string--resource--true`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.node.cpu.usage',
+			aggregateAttribute: cpuUtilMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -217,7 +273,7 @@ export function GetNodesQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: 'deployment.environment',
+				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
@@ -226,19 +282,32 @@ export function GetNodesQuickFiltersConfig(): IQuickFiltersConfig[] {
 	];
 }
 
-export function GetNamespaceQuickFiltersConfig(): IQuickFiltersConfig[] {
+export function GetNamespaceQuickFiltersConfig(
+	dotMetricsEnabled: boolean,
+): IQuickFiltersConfig[] {
+	const namespaceKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
+	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
+	const cpuUtilMetric = dotMetricsEnabled
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'Namespace Name',
 			attributeKey: {
-				key: 'k8s.namespace.name',
+				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.namespace.name--string--resource',
+				id: `${namespaceKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: cpuUtilMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -246,13 +315,13 @@ export function GetNamespaceQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Cluster Name',
 			attributeKey: {
-				key: 'k8s.cluster.name',
+				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.cluster.name--string--resource',
+				id: `${clusterKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: cpuUtilMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -260,7 +329,7 @@ export function GetNamespaceQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: 'deployment.environment',
+				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
@@ -269,19 +338,29 @@ export function GetNamespaceQuickFiltersConfig(): IQuickFiltersConfig[] {
 	];
 }
 
-export function GetClustersQuickFiltersConfig(): IQuickFiltersConfig[] {
+export function GetClustersQuickFiltersConfig(
+	dotMetricsEnabled: boolean,
+): IQuickFiltersConfig[] {
+	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
+	const cpuUtilMetric = dotMetricsEnabled
+		? 'k8s.node.cpu.usage'
+		: 'k8s_node_cpu_usage';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'Cluster Name',
 			attributeKey: {
-				key: 'k8s.cluster.name',
+				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.cluster.name--string--resource',
+				id: `${clusterKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.node.cpu.usage',
+			aggregateAttribute: cpuUtilMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -289,7 +368,7 @@ export function GetClustersQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: 'deployment.environment',
+				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
@@ -298,16 +377,25 @@ export function GetClustersQuickFiltersConfig(): IQuickFiltersConfig[] {
 	];
 }
 
-export function GetContainersQuickFiltersConfig(): IQuickFiltersConfig[] {
+export function GetContainersQuickFiltersConfig(
+	dotMetricsEnabled: boolean,
+): IQuickFiltersConfig[] {
+	const containerKey = dotMetricsEnabled
+		? 'k8s.container.name'
+		: 'k8s_container_name';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'Container',
 			attributeKey: {
-				key: 'k8s.container.name',
+				key: containerKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.container.name--string--resource',
+				id: `${containerKey}--string--resource`,
 			},
 			defaultOpen: true,
 		},
@@ -315,7 +403,7 @@ export function GetContainersQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: 'deployment.environment',
+				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
@@ -324,19 +412,35 @@ export function GetContainersQuickFiltersConfig(): IQuickFiltersConfig[] {
 	];
 }
 
-export function GetVolumesQuickFiltersConfig(): IQuickFiltersConfig[] {
+export function GetVolumesQuickFiltersConfig(
+	dotMetricsEnabled: boolean,
+): IQuickFiltersConfig[] {
+	const pvcKey = dotMetricsEnabled
+		? 'k8s.persistentvolumeclaim.name'
+		: 'k8s_persistentvolumeclaim_name';
+	const namespaceKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
+	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
+	const volumeMetric = dotMetricsEnabled
+		? 'k8s.volume.capacity'
+		: 'k8s_volume_capacity';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'PVC Volume Claim Name',
 			attributeKey: {
-				key: 'k8s.persistentvolumeclaim.name',
+				key: pvcKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.persistentvolumeclaim.name--string--resource',
+				id: `${pvcKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.volume.capacity',
+			aggregateAttribute: volumeMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -344,13 +448,13 @@ export function GetVolumesQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Namespace Name',
 			attributeKey: {
-				key: 'k8s.namespace.name',
+				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.namespace.name--string--resource',
+				id: `${namespaceKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.volume.capacity',
+			aggregateAttribute: volumeMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -358,13 +462,13 @@ export function GetVolumesQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Cluster Name',
 			attributeKey: {
-				key: 'k8s.cluster.name',
+				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.cluster.name--string--resource',
+				id: `${clusterKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.volume.capacity',
+			aggregateAttribute: volumeMetric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -372,7 +476,7 @@ export function GetVolumesQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: 'deployment.environment',
+				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
@@ -381,19 +485,33 @@ export function GetVolumesQuickFiltersConfig(): IQuickFiltersConfig[] {
 	];
 }
 
-export function GetDeploymentsQuickFiltersConfig(): IQuickFiltersConfig[] {
+export function GetDeploymentsQuickFiltersConfig(
+	dotMetricsEnabled: boolean,
+): IQuickFiltersConfig[] {
+	const deployKey = dotMetricsEnabled
+		? 'k8s.deployment.name'
+		: 'k8s_deployment_name';
+	const namespaceKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
+	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
+	const metric = dotMetricsEnabled ? 'k8s.pod.cpu.usage' : 'k8s_pod_cpu_usage';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'Deployment Name',
 			attributeKey: {
-				key: 'k8s.deployment.name',
+				key: deployKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.deployment.name--string--resource',
+				id: `${deployKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: metric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -401,13 +519,13 @@ export function GetDeploymentsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Namespace Name',
 			attributeKey: {
-				key: 'k8s.namespace.name',
+				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.namespace.name--string--resource',
+				id: `${namespaceKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: metric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -415,13 +533,13 @@ export function GetDeploymentsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Cluster Name',
 			attributeKey: {
-				key: 'k8s.cluster.name',
+				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.cluster.name--string--resource',
+				id: `${clusterKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: metric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -429,7 +547,7 @@ export function GetDeploymentsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: 'deployment.environment',
+				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
@@ -438,19 +556,33 @@ export function GetDeploymentsQuickFiltersConfig(): IQuickFiltersConfig[] {
 	];
 }
 
-export function GetStatefulsetsQuickFiltersConfig(): IQuickFiltersConfig[] {
+export function GetStatefulsetsQuickFiltersConfig(
+	dotMetricsEnabled: boolean,
+): IQuickFiltersConfig[] {
+	const ssKey = dotMetricsEnabled
+		? 'k8s.statefulset.name'
+		: 'k8s_statefulset_name';
+	const namespaceKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
+	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
+	const metric = dotMetricsEnabled ? 'k8s.pod.cpu.usage' : 'k8s_pod_cpu_usage';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'Statefulset Name',
 			attributeKey: {
-				key: 'k8s.statefulset.name',
+				key: ssKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.statefulset.name--string--resource',
+				id: `${ssKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: metric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -458,13 +590,13 @@ export function GetStatefulsetsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Namespace Name',
 			attributeKey: {
-				key: 'k8s.namespace.name',
+				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.namespace.name--string--resource',
+				id: `${namespaceKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: metric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -472,13 +604,13 @@ export function GetStatefulsetsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Cluster Name',
 			attributeKey: {
-				key: 'k8s.cluster.name',
+				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.cluster.name--string--resource',
+				id: `${clusterKey}--string--resource`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: metric,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -486,7 +618,7 @@ export function GetStatefulsetsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: 'deployment.environment',
+				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
@@ -495,19 +627,35 @@ export function GetStatefulsetsQuickFiltersConfig(): IQuickFiltersConfig[] {
 	];
 }
 
-export function GetDaemonsetsQuickFiltersConfig(): IQuickFiltersConfig[] {
+export function GetDaemonsetsQuickFiltersConfig(
+	dotMetricsEnabled: boolean,
+): IQuickFiltersConfig[] {
+	const nameKey = dotMetricsEnabled
+		? 'k8s.daemonset.name'
+		: 'k8s_daemonset_name';
+	const namespaceKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
+	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
+	const metricName = dotMetricsEnabled
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'DaemonSet Name',
 			attributeKey: {
-				key: 'k8s.daemonset.name',
+				key: nameKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.daemonset.name--string--resource--true',
+				id: `${nameKey}--string--resource--true`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: metricName,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -515,12 +663,12 @@ export function GetDaemonsetsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Namespace Name',
 			attributeKey: {
-				key: 'k8s.namespace.name',
+				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: metricName,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -528,12 +676,12 @@ export function GetDaemonsetsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Cluster Name',
 			attributeKey: {
-				key: 'k8s.cluster.name',
+				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: metricName,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -541,7 +689,7 @@ export function GetDaemonsetsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: 'deployment.environment',
+				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
@@ -550,19 +698,33 @@ export function GetDaemonsetsQuickFiltersConfig(): IQuickFiltersConfig[] {
 	];
 }
 
-export function GetJobsQuickFiltersConfig(): IQuickFiltersConfig[] {
+export function GetJobsQuickFiltersConfig(
+	dotMetricsEnabled: boolean,
+): IQuickFiltersConfig[] {
+	const nameKey = dotMetricsEnabled ? 'k8s.job.name' : 'k8s_job_name';
+	const namespaceKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
+	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
+	const metricName = dotMetricsEnabled
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'Job Name',
 			attributeKey: {
-				key: 'k8s.job.name',
+				key: nameKey,
 				dataType: DataTypes.String,
 				type: 'resource',
-				id: 'k8s.job.name--string--resource--true',
+				id: `${nameKey}--string--resource--true`,
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: metricName,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -570,12 +732,12 @@ export function GetJobsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Namespace Name',
 			attributeKey: {
-				key: 'k8s.namespace.name',
+				key: namespaceKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: metricName,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -583,12 +745,12 @@ export function GetJobsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Cluster Name',
 			attributeKey: {
-				key: 'k8s.cluster.name',
+				key: clusterKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: 'k8s.pod.cpu.usage',
+			aggregateAttribute: metricName,
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -596,7 +758,7 @@ export function GetJobsQuickFiltersConfig(): IQuickFiltersConfig[] {
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: 'deployment.environment',
+				key: environmentKey,
 				dataType: DataTypes.String,
 				type: 'resource',
 			},

frontend/src/container/InfraMonitoringK8s/utils.tsx

@@ -299,7 +299,7 @@ export const getK8sPodsListColumns = (
 	return updatedColumnsConfig as ColumnType<K8sPodsRowData>[];
 };
 
-const attributeToMetaKey: Record<string, keyof K8sPodsData['meta']> = {
+const dotToUnder: Record<string, keyof K8sPodsData['meta']> = {
 	'k8s.cronjob.name': 'k8s_cronjob_name',
 	'k8s.daemonset.name': 'k8s_daemonset_name',
 	'k8s.deployment.name': 'k8s_deployment_name',
@@ -322,8 +322,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 pod.meta;
+		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof pod.meta;
 		const value = pod.meta[metaKey];
 
 		groupByValues.push(value);

frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx

@@ -16,6 +16,8 @@ import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import {
 	getHostQueryPayload,
 	getNodeQueryPayload,
@@ -50,12 +52,23 @@ function NodeMetrics({
 		};
 	}, [timestamp]);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const queryPayloads = useMemo(() => {
 		if (nodeName) {
-			return getNodeQueryPayload(clusterName, nodeName, start, end);
+			return getNodeQueryPayload(
+				clusterName,
+				nodeName,
+				start,
+				end,
+				dotMetricsEnabled,
+			);
 		}
-		return getHostQueryPayload(hostName, start, end);
-	}, [nodeName, hostName, clusterName, start, end]);
+		return getHostQueryPayload(hostName, start, end, dotMetricsEnabled);
+	}, [nodeName, hostName, clusterName, start, end, dotMetricsEnabled]);
 
 	const widgetInfo = nodeName ? nodeWidgetInfo : hostWidgetInfo;
 	const queries = useQueries(

frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx

@@ -11,11 +11,13 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
+import { FeatureKeys } from '../../../constants/features';
 import { getPodQueryPayload, podWidgetInfo } from './constants';
 
 function PodMetrics({
@@ -51,9 +53,14 @@ function PodMetrics({
 		scrollLeft: 0,
 	});
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const queryPayloads = useMemo(
-		() => getPodQueryPayload(clusterName, podName, start, end),
-		[clusterName, end, podName, start],
+		() => getPodQueryPayload(clusterName, podName, start, end, dotMetricsEnabled),
+		[clusterName, end, podName, start, dotMetricsEnabled],
 	);
 	const queries = useQueries(
 		queryPayloads.map((payload) => ({

frontend/src/container/LogDetailedView/InfraMetrics/constants.ts

@@ -10,21 +10,48 @@ export const getPodQueryPayload = (
 	podName: string,
 	start: number,
 	end: number,
+	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const k8sClusterNameKey = 'k8s.cluster.name';
-	const k8sPodNameKey = 'k8s.pod.name';
-	const containerCpuUtilKey = 'container.cpu.usage';
-	const containerMemUsageKey = 'container.memory.usage';
-	const k8sContainerCpuReqKey = 'k8s.container.cpu_request';
-	const k8sContainerCpuLimitKey = 'k8s.container.cpu_limit';
-	const k8sContainerMemReqKey = 'k8s.container.memory_request';
-	const k8sContainerMemLimitKey = 'k8s.container.memory_limit';
-	const k8sPodFsAvailKey = 'k8s.pod.filesystem.available';
-	const k8sPodFsCapKey = 'k8s.pod.filesystem.capacity';
-	const k8sPodNetIoKey = 'k8s.pod.network.io';
-	const podLegendTemplate = '{{k8s.pod.name}}';
-	const podLegendUsage = 'usage - {{k8s.pod.name}}';
-	const podLegendLimit = 'limit - {{k8s.pod.name}}';
+	const k8sClusterNameKey = dotMetricsEnabled
+		? 'k8s.cluster.name'
+		: 'k8s_cluster_name';
+	const k8sPodNameKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
+	const containerCpuUtilKey = dotMetricsEnabled
+		? 'container.cpu.usage'
+		: 'container_cpu_usage';
+	const containerMemUsageKey = dotMetricsEnabled
+		? 'container.memory.usage'
+		: 'container_memory_usage';
+	const k8sContainerCpuReqKey = dotMetricsEnabled
+		? 'k8s.container.cpu_request'
+		: 'k8s_container_cpu_request';
+	const k8sContainerCpuLimitKey = dotMetricsEnabled
+		? 'k8s.container.cpu_limit'
+		: 'k8s_container_cpu_limit';
+	const k8sContainerMemReqKey = dotMetricsEnabled
+		? 'k8s.container.memory_request'
+		: 'k8s_container_memory_request';
+	const k8sContainerMemLimitKey = dotMetricsEnabled
+		? 'k8s.container.memory_limit'
+		: 'k8s_container_memory_limit';
+	const k8sPodFsAvailKey = dotMetricsEnabled
+		? 'k8s.pod.filesystem.available'
+		: 'k8s_pod_filesystem_available';
+	const k8sPodFsCapKey = dotMetricsEnabled
+		? 'k8s.pod.filesystem.capacity'
+		: 'k8s_pod_filesystem_capacity';
+	const k8sPodNetIoKey = dotMetricsEnabled
+		? 'k8s.pod.network.io'
+		: 'k8s_pod_network_io';
+	const podLegendTemplate = dotMetricsEnabled
+		? '{{k8s.pod.name}}'
+		: '{{k8s_pod_name}}';
+	const podLegendUsage = dotMetricsEnabled
+		? 'usage - {{k8s.pod.name}}'
+		: 'usage - {{k8s_pod_name}}';
+	const podLegendLimit = dotMetricsEnabled
+		? 'limit - {{k8s.pod.name}}'
+		: 'limit - {{k8s_pod_name}}';
 
 	return [
 		{
@@ -1001,17 +1028,36 @@ export const getNodeQueryPayload = (
 	nodeName: string,
 	start: number,
 	end: number,
+	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const k8sClusterNameKey = 'k8s.cluster.name';
-	const k8sNodeNameKey = 'k8s.node.name';
-	const k8sNodeCpuTimeKey = 'k8s.node.cpu.time';
-	const k8sNodeAllocCpuKey = 'k8s.node.allocatable_cpu';
-	const k8sNodeMemWsKey = 'k8s.node.memory.working_set';
-	const k8sNodeAllocMemKey = 'k8s.node.allocatable_memory';
-	const k8sNodeNetIoKey = 'k8s.node.network.io';
-	const k8sNodeFsAvailKey = 'k8s.node.filesystem.available';
-	const k8sNodeFsCapKey = 'k8s.node.filesystem.capacity';
-	const podLegend = '{{k8s.node.name}}';
+	const k8sClusterNameKey = dotMetricsEnabled
+		? 'k8s.cluster.name'
+		: 'k8s_cluster_name';
+	const k8sNodeNameKey = dotMetricsEnabled ? 'k8s.node.name' : 'k8s_node_name';
+	const k8sNodeCpuTimeKey = dotMetricsEnabled
+		? 'k8s.node.cpu.time'
+		: 'k8s_node_cpu_time';
+	const k8sNodeAllocCpuKey = dotMetricsEnabled
+		? 'k8s.node.allocatable_cpu'
+		: 'k8s_node_allocatable_cpu';
+	const k8sNodeMemWsKey = dotMetricsEnabled
+		? 'k8s.node.memory.working_set'
+		: 'k8s_node_memory_working_set';
+	const k8sNodeAllocMemKey = dotMetricsEnabled
+		? 'k8s.node.allocatable_memory'
+		: 'k8s_node_allocatable_memory';
+	const k8sNodeNetIoKey = dotMetricsEnabled
+		? 'k8s.node.network.io'
+		: 'k8s_node_network_io';
+	const k8sNodeFsAvailKey = dotMetricsEnabled
+		? 'k8s.node.filesystem.available'
+		: 'k8s_node_filesystem_available';
+	const k8sNodeFsCapKey = dotMetricsEnabled
+		? 'k8s.node.filesystem.capacity'
+		: 'k8s_node_filesystem_capacity';
+	const podLegend = dotMetricsEnabled
+		? '{{k8s.node.name}}'
+		: '{{k8s_node_name}}';
 
 	return [
 		{
@@ -1541,21 +1587,42 @@ export const getHostQueryPayload = (
 	hostName: string,
 	start: number,
 	end: number,
+	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const hostNameKey = 'host.name';
-	const cpuTimeKey = 'system.cpu.time';
-	const memUsageKey = 'system.memory.usage';
-	const load1mKey = 'system.cpu.load_average.1m';
-	const load5mKey = 'system.cpu.load_average.5m';
-	const load15mKey = 'system.cpu.load_average.15m';
-	const netIoKey = 'system.network.io';
-	const netPktsKey = 'system.network.packets';
-	const netErrKey = 'system.network.errors';
-	const netDropKey = 'system.network.dropped';
-	const netConnKey = 'system.network.connections';
-	const diskIoKey = 'system.disk.io';
-	const diskOpTimeKey = 'system.disk.operation_time';
-	const diskPendingKey = 'system.disk.pending_operations';
+	const hostNameKey = dotMetricsEnabled ? 'host.name' : 'host_name';
+	const cpuTimeKey = dotMetricsEnabled ? 'system.cpu.time' : 'system_cpu_time';
+	const memUsageKey = dotMetricsEnabled
+		? 'system.memory.usage'
+		: 'system_memory_usage';
+	const load1mKey = dotMetricsEnabled
+		? 'system.cpu.load_average.1m'
+		: 'system_cpu_load_average_1m';
+	const load5mKey = dotMetricsEnabled
+		? 'system.cpu.load_average.5m'
+		: 'system_cpu_load_average_5m';
+	const load15mKey = dotMetricsEnabled
+		? 'system.cpu.load_average.15m'
+		: 'system_cpu_load_average_15m';
+	const netIoKey = dotMetricsEnabled ? 'system.network.io' : 'system_network_io';
+	const netPktsKey = dotMetricsEnabled
+		? 'system.network.packets'
+		: 'system_network_packets';
+	const netErrKey = dotMetricsEnabled
+		? 'system.network.errors'
+		: 'system_network_errors';
+	const netDropKey = dotMetricsEnabled
+		? 'system.network.dropped'
+		: 'system_network_dropped';
+	const netConnKey = dotMetricsEnabled
+		? 'system.network.connections'
+		: 'system_network_connections';
+	const diskIoKey = dotMetricsEnabled ? 'system.disk.io' : 'system_disk_io';
+	const diskOpTimeKey = dotMetricsEnabled
+		? 'system.disk.operation_time'
+		: 'system_disk_operation_time';
+	const diskPendingKey = dotMetricsEnabled
+		? 'system.disk.pending_operations'
+		: 'system_disk_pending_operations';
 
 	return [
 		{

frontend/src/container/MetricsApplication/MetricsPageQueries/DBCallQueries.ts

@@ -21,6 +21,7 @@ export const databaseCallsRPS = ({
 	servicename,
 	legend,
 	tagFilterItems,
+	dotMetricsEnabled,
 }: DatabaseCallsRPSProps): QueryBuilderData => {
 	const autocompleteData: BaseAutocompleteData[] = [
 		{
@@ -32,7 +33,7 @@ export const databaseCallsRPS = ({
 	const groupBy: BaseAutocompleteData[] = [
 		{
 			dataType: DataTypes.String,
-			key: WidgetKeys.DbSystem,
+			key: dotMetricsEnabled ? WidgetKeys.Db_system : WidgetKeys.Db_system_norm,
 			type: 'tag',
 		},
 	];
@@ -41,7 +42,9 @@ export const databaseCallsRPS = ({
 			{
 				id: '',
 				key: {
-					key: WidgetKeys.OTelServiceName,
+					key: dotMetricsEnabled
+						? WidgetKeys.Service_name
+						: WidgetKeys.Service_name_norm,
 					dataType: DataTypes.String,
 					type: MetricsType.Resource,
 				},
@@ -72,6 +75,7 @@ export const databaseCallsRPS = ({
 export const databaseCallsAvgDuration = ({
 	servicename,
 	tagFilterItems,
+	dotMetricsEnabled,
 }: DatabaseCallProps): QueryBuilderData => {
 	const autocompleteDataA: BaseAutocompleteData = {
 		key: WidgetKeys.SignozDbLatencySum,
@@ -88,7 +92,9 @@ export const databaseCallsAvgDuration = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				dataType: DataTypes.String,
 				type: MetricsType.Resource,
 			},

frontend/src/container/MetricsApplication/MetricsPageQueries/ExternalQueries.ts

@@ -32,6 +32,7 @@ export const externalCallErrorPercent = ({
 	servicename,
 	legend,
 	tagFilterItems,
+	dotMetricsEnabled,
 }: ExternalCallDurationByAddressProps): QueryBuilderData => {
 	const autocompleteDataA: BaseAutocompleteData = {
 		key: WidgetKeys.SignozExternalCallLatencyCount,
@@ -48,7 +49,9 @@ export const externalCallErrorPercent = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				dataType: DataTypes.String,
 				type: MetricsType.Resource,
 			},
@@ -58,7 +61,7 @@ export const externalCallErrorPercent = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.StatusCode,
+				key: dotMetricsEnabled ? WidgetKeys.StatusCode : WidgetKeys.StatusCodeNorm,
 				dataType: DataTypes.Int64,
 				type: MetricsType.Tag,
 			},
@@ -71,7 +74,9 @@ export const externalCallErrorPercent = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				dataType: DataTypes.String,
 				type: MetricsType.Resource,
 			},
@@ -115,6 +120,7 @@ export const externalCallErrorPercent = ({
 export const externalCallDuration = ({
 	servicename,
 	tagFilterItems,
+	dotMetricsEnabled,
 }: ExternalCallProps): QueryBuilderData => {
 	const autocompleteDataA: BaseAutocompleteData = {
 		dataType: DataTypes.Float64,
@@ -135,7 +141,9 @@ export const externalCallDuration = ({
 			id: '',
 			key: {
 				dataType: DataTypes.String,
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				type: MetricsType.Resource,
 			},
 			op: OPERATORS.IN,
@@ -175,6 +183,7 @@ export const externalCallRpsByAddress = ({
 	servicename,
 	legend,
 	tagFilterItems,
+	dotMetricsEnabled,
 }: ExternalCallDurationByAddressProps): QueryBuilderData => {
 	const autocompleteData: BaseAutocompleteData[] = [
 		{
@@ -189,7 +198,9 @@ export const externalCallRpsByAddress = ({
 				id: '',
 				key: {
 					dataType: DataTypes.String,
-					key: WidgetKeys.OTelServiceName,
+					key: dotMetricsEnabled
+						? WidgetKeys.Service_name
+						: WidgetKeys.Service_name_norm,
 					type: MetricsType.Resource,
 				},
 				op: OPERATORS.IN,
@@ -220,6 +231,7 @@ export const externalCallDurationByAddress = ({
 	servicename,
 	legend,
 	tagFilterItems,
+	dotMetricsEnabled,
 }: ExternalCallDurationByAddressProps): QueryBuilderData => {
 	const autocompleteDataA: BaseAutocompleteData = {
 		dataType: DataTypes.Float64,
@@ -239,7 +251,9 @@ export const externalCallDurationByAddress = ({
 			id: '',
 			key: {
 				dataType: DataTypes.String,
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				type: MetricsType.Resource,
 			},
 			op: OPERATORS.IN,

frontend/src/container/MetricsApplication/MetricsPageQueries/OverviewQueries.ts

@@ -37,10 +37,15 @@ export const latency = ({
 	tagFilterItems,
 	isSpanMetricEnable = false,
 	topLevelOperationsRoute,
+	dotMetricsEnabled,
 }: LatencyProps): QueryBuilderData => {
-	const signozLatencyBucketMetrics = WidgetKeys.SignozLatencyBucket;
+	const signozLatencyBucketMetrics = dotMetricsEnabled
+		? WidgetKeys.Signoz_latency_bucket
+		: WidgetKeys.Signoz_latency_bucket_norm;
 
-	const signozMetricsServiceName = WidgetKeys.OTelServiceName;
+	const signozMetricsServiceName = dotMetricsEnabled
+		? WidgetKeys.Service_name
+		: WidgetKeys.Service_name_norm;
 	const newAutoCompleteData: BaseAutocompleteData = {
 		key: isSpanMetricEnable
 			? signozLatencyBucketMetrics
@@ -282,21 +287,28 @@ export const apDexMetricsQueryBuilderQueries = ({
 	threashold,
 	delta,
 	metricsBuckets,
+	dotMetricsEnabled,
 }: ApDexMetricsQueryBuilderQueriesProps): QueryBuilderData => {
 	const autoCompleteDataA: BaseAutocompleteData = {
-		key: WidgetKeys.SignozLatencyCount,
+		key: dotMetricsEnabled
+			? WidgetKeys.SignozLatencyCount
+			: WidgetKeys.SignozLatencyCountNorm,
 		dataType: DataTypes.Float64,
 		type: '',
 	};
 
 	const autoCompleteDataB: BaseAutocompleteData = {
-		key: WidgetKeys.SignozLatencyBucket,
+		key: dotMetricsEnabled
+			? WidgetKeys.Signoz_latency_bucket
+			: WidgetKeys.Signoz_latency_bucket_norm,
 		dataType: DataTypes.Float64,
 		type: '',
 	};
 
 	const autoCompleteDataC: BaseAutocompleteData = {
-		key: WidgetKeys.SignozLatencyBucket,
+		key: dotMetricsEnabled
+			? WidgetKeys.Signoz_latency_bucket
+			: WidgetKeys.Signoz_latency_bucket_norm,
 		dataType: DataTypes.Float64,
 		type: '',
 	};
@@ -305,7 +317,9 @@ export const apDexMetricsQueryBuilderQueries = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				dataType: DataTypes.String,
 				type: MetricsType.Tag,
 			},
@@ -329,7 +343,7 @@ export const apDexMetricsQueryBuilderQueries = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.StatusCode,
+				key: dotMetricsEnabled ? WidgetKeys.StatusCode : WidgetKeys.StatusCodeNorm,
 				dataType: DataTypes.String,
 				type: MetricsType.Tag,
 			},
@@ -349,7 +363,9 @@ export const apDexMetricsQueryBuilderQueries = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				dataType: DataTypes.String,
 				type: MetricsType.Tag,
 			},
@@ -383,7 +399,7 @@ export const apDexMetricsQueryBuilderQueries = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.StatusCode,
+				key: dotMetricsEnabled ? WidgetKeys.StatusCode : WidgetKeys.StatusCodeNorm,
 				dataType: DataTypes.String,
 				type: MetricsType.Tag,
 			},
@@ -393,7 +409,9 @@ export const apDexMetricsQueryBuilderQueries = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				dataType: DataTypes.String,
 				type: MetricsType.Tag,
 			},
@@ -456,10 +474,13 @@ export const operationPerSec = ({
 	servicename,
 	tagFilterItems,
 	topLevelOperations,
+	dotMetricsEnabled,
 }: OperationPerSecProps): QueryBuilderData => {
 	const autocompleteData: BaseAutocompleteData[] = [
 		{
-			key: WidgetKeys.SignozLatencyCount,
+			key: dotMetricsEnabled
+				? WidgetKeys.SignozLatencyCount
+				: WidgetKeys.SignozLatencyCountNorm,
 			dataType: DataTypes.Float64,
 			type: '',
 		},
@@ -470,7 +491,9 @@ export const operationPerSec = ({
 			{
 				id: '',
 				key: {
-					key: WidgetKeys.OTelServiceName,
+					key: dotMetricsEnabled
+						? WidgetKeys.Service_name
+						: WidgetKeys.Service_name_norm,
 					dataType: DataTypes.String,
 					type: MetricsType.Resource,
 				},
@@ -511,6 +534,7 @@ export const errorPercentage = ({
 	servicename,
 	tagFilterItems,
 	topLevelOperations,
+	dotMetricsEnabled,
 }: OperationPerSecProps): QueryBuilderData => {
 	const autocompleteDataA: BaseAutocompleteData = {
 		key: WidgetKeys.SignozCallsTotal,
@@ -529,7 +553,9 @@ export const errorPercentage = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				dataType: DataTypes.String,
 				type: MetricsType.Resource,
 			},
@@ -549,7 +575,7 @@ export const errorPercentage = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.StatusCode,
+				key: dotMetricsEnabled ? WidgetKeys.StatusCode : WidgetKeys.StatusCodeNorm,
 				dataType: DataTypes.Int64,
 				type: MetricsType.Tag,
 			},
@@ -563,7 +589,9 @@ export const errorPercentage = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				dataType: DataTypes.String,
 				type: MetricsType.Resource,
 			},

frontend/src/container/MetricsApplication/MetricsPageQueries/TopOperationQueries.ts

@@ -21,9 +21,12 @@ import { getQueryBuilderQuerieswithFormula } from './MetricsPageQueriesFactory';
 
 export const topOperationQueries = ({
 	servicename,
+	dotMetricsEnabled,
 }: TopOperationQueryFactoryProps): QueryBuilderData => {
 	const latencyAutoCompleteData: BaseAutocompleteData = {
-		key: WidgetKeys.SignozLatencyBucket,
+		key: dotMetricsEnabled
+			? WidgetKeys.Signoz_latency_bucket
+			: WidgetKeys.Signoz_latency_bucket_norm,
 		dataType: DataTypes.Float64,
 		type: '',
 	};
@@ -35,7 +38,9 @@ export const topOperationQueries = ({
 	};
 
 	const numOfCallAutoCompleteData: BaseAutocompleteData = {
-		key: WidgetKeys.SignozLatencyCount,
+		key: dotMetricsEnabled
+			? WidgetKeys.SignozLatencyCount
+			: WidgetKeys.SignozLatencyCountNorm,
 		dataType: DataTypes.Float64,
 		type: '',
 	};
@@ -44,7 +49,9 @@ export const topOperationQueries = ({
 		{
 			id: '',
 			key: {
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				dataType: DataTypes.String,
 				type: MetricsType.Resource,
 			},
@@ -58,7 +65,9 @@ export const topOperationQueries = ({
 			id: '',
 			key: {
 				dataType: DataTypes.String,
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				type: MetricsType.Resource,
 			},
 			op: OPERATORS.IN,
@@ -68,7 +77,7 @@ export const topOperationQueries = ({
 			id: '',
 			key: {
 				dataType: DataTypes.Int64,
-				key: WidgetKeys.StatusCode,
+				key: dotMetricsEnabled ? WidgetKeys.StatusCode : WidgetKeys.StatusCodeNorm,
 				type: MetricsType.Tag,
 			},
 			op: OPERATORS.IN,

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

@@ -27,6 +27,8 @@ import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import { GraphTitle, MENU_ITEMS, SERVICE_CHART_ID } from '../constant';
 import { getWidgetQueryBuilder } from '../MetricsApplication.factory';
 import { Card, GraphContainer, Row } from '../styles';
@@ -81,7 +83,12 @@ function DBCall(): JSX.Element {
 		[queries],
 	);
 
-	const legend = '{{db.system}}';
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
+	const legend = dotMetricsEnabled ? '{{db.system}}' : '{{db_system}}';
 
 	const databaseCallsRPSWidget = useMemo(
 		() =>
@@ -93,6 +100,7 @@ function DBCall(): JSX.Element {
 						servicename,
 						legend,
 						tagFilterItems,
+						dotMetricsEnabled,
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
@@ -103,7 +111,7 @@ function DBCall(): JSX.Element {
 				id: SERVICE_CHART_ID.dbCallsRPS,
 				fillSpans: false,
 			}),
-		[servicename, tagFilterItems, legend],
+		[servicename, tagFilterItems, dotMetricsEnabled, legend],
 	);
 	const databaseCallsAverageDurationWidget = useMemo(
 		() =>
@@ -114,6 +122,7 @@ function DBCall(): JSX.Element {
 					builder: databaseCallsAvgDuration({
 						servicename,
 						tagFilterItems,
+						dotMetricsEnabled,
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
@@ -124,7 +133,7 @@ function DBCall(): JSX.Element {
 				id: GraphTitle.DATABASE_CALLS_AVG_DURATION,
 				fillSpans: true,
 			}),
-		[servicename, tagFilterItems],
+		[servicename, tagFilterItems, dotMetricsEnabled],
 	);
 
 	const stepInterval = useMemo(
@@ -142,7 +151,7 @@ function DBCall(): JSX.Element {
 	useEffect(() => {
 		if (!logEventCalledRef.current) {
 			const selectedEnvironments = queries.find(
-				(val) => val.tagKey === getResourceDeploymentKeys(),
+				(val) => val.tagKey === getResourceDeploymentKeys(dotMetricsEnabled),
 			)?.tagValue;
 
 			logEvent('APM: Service detail page visited', {

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

@@ -29,6 +29,8 @@ import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import { GraphTitle, legend, MENU_ITEMS } from '../constant';
 import { getWidgetQueryBuilder } from '../MetricsApplication.factory';
 import { Card, GraphContainer, Row } from '../styles';
@@ -76,6 +78,11 @@ function External(): JSX.Element {
 			handleNonInQueryRange(resourceAttributesToTagFilterItems(queries)) || [],
 		[queries],
 	);
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const externalCallErrorWidget = useMemo(
 		() =>
 			getWidgetQueryBuilder({
@@ -86,6 +93,7 @@ function External(): JSX.Element {
 						servicename,
 						legend: legend.address,
 						tagFilterItems,
+						dotMetricsEnabled,
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
@@ -95,7 +103,7 @@ function External(): JSX.Element {
 				yAxisUnit: '%',
 				id: GraphTitle.EXTERNAL_CALL_ERROR_PERCENTAGE,
 			}),
-		[servicename, tagFilterItems],
+		[servicename, tagFilterItems, dotMetricsEnabled],
 	);
 
 	const selectedTraceTags = useMemo(
@@ -112,6 +120,7 @@ function External(): JSX.Element {
 					builder: externalCallDuration({
 						servicename,
 						tagFilterItems,
+						dotMetricsEnabled,
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
@@ -122,7 +131,7 @@ function External(): JSX.Element {
 				id: GraphTitle.EXTERNAL_CALL_DURATION,
 				fillSpans: true,
 			}),
-		[servicename, tagFilterItems],
+		[servicename, tagFilterItems, dotMetricsEnabled],
 	);
 
 	const errorApmToTraceQuery = useGetAPMToTracesQueries({
@@ -156,7 +165,7 @@ function External(): JSX.Element {
 	useEffect(() => {
 		if (!logEventCalledRef.current) {
 			const selectedEnvironments = queries.find(
-				(val) => val.tagKey === getResourceDeploymentKeys(),
+				(val) => val.tagKey === getResourceDeploymentKeys(dotMetricsEnabled),
 			)?.tagValue;
 
 			logEvent('APM: Service detail page visited', {
@@ -179,6 +188,7 @@ function External(): JSX.Element {
 						servicename,
 						legend: legend.address,
 						tagFilterItems,
+						dotMetricsEnabled,
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
@@ -189,7 +199,7 @@ function External(): JSX.Element {
 				id: GraphTitle.EXTERNAL_CALL_RPS_BY_ADDRESS,
 				fillSpans: true,
 			}),
-		[servicename, tagFilterItems],
+		[servicename, tagFilterItems, dotMetricsEnabled],
 	);
 
 	const externalCallDurationAddressWidget = useMemo(
@@ -202,6 +212,7 @@ function External(): JSX.Element {
 						servicename,
 						legend: legend.address,
 						tagFilterItems,
+						dotMetricsEnabled,
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
@@ -212,7 +223,7 @@ function External(): JSX.Element {
 				id: GraphTitle.EXTERNAL_CALL_DURATION_BY_ADDRESS,
 				fillSpans: true,
 			}),
-		[servicename, tagFilterItems],
+		[servicename, tagFilterItems, dotMetricsEnabled],
 	);
 
 	const apmToTraceQuery = useGetAPMToTracesQueries({

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

@@ -93,11 +93,15 @@ function Application(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[handleSetTimeStamp],
 	);
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const logEventCalledRef = useRef(false);
 	useEffect(() => {
 		if (!logEventCalledRef.current) {
 			const selectedEnvironments = queries.find(
-				(val) => val.tagKey === getResourceDeploymentKeys(),
+				(val) => val.tagKey === getResourceDeploymentKeys(dotMetricsEnabled),
 			)?.tagValue;
 
 			logEvent('APM: Service detail page visited', {
@@ -155,6 +159,7 @@ function Application(): JSX.Element {
 						servicename,
 						tagFilterItems,
 						topLevelOperations: topLevelOperationsRoute,
+						dotMetricsEnabled,
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
@@ -164,7 +169,7 @@ function Application(): JSX.Element {
 				yAxisUnit: 'ops',
 				id: SERVICE_CHART_ID.rps,
 			}),
-		[servicename, tagFilterItems, topLevelOperationsRoute],
+		[servicename, tagFilterItems, topLevelOperationsRoute, dotMetricsEnabled],
 	);
 
 	const errorPercentageWidget = useMemo(
@@ -177,6 +182,7 @@ function Application(): JSX.Element {
 						servicename,
 						tagFilterItems,
 						topLevelOperations: topLevelOperationsRoute,
+						dotMetricsEnabled,
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
@@ -187,7 +193,7 @@ function Application(): JSX.Element {
 				id: SERVICE_CHART_ID.errorPercentage,
 				fillSpans: true,
 			}),
-		[servicename, tagFilterItems, topLevelOperationsRoute],
+		[servicename, tagFilterItems, topLevelOperationsRoute, dotMetricsEnabled],
 	);
 
 	const stepInterval = useMemo(

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

@@ -20,6 +20,8 @@ import { apDexMetricsQueryBuilderQueries } from 'container/MetricsApplication/Me
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';
 
+import { FeatureKeys } from '../../../../../constants/features';
+import { useAppContext } from '../../../../../providers/App/App';
 import { IServiceName } from '../../types';
 import { ApDexMetricsProps } from './types';
 
@@ -34,6 +36,10 @@ function ApDexMetrics({
 }: ApDexMetricsProps): JSX.Element {
 	const { servicename: encodedServiceName } = useParams<IServiceName>();
 	const servicename = decodeURIComponent(encodedServiceName);
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
 	const apDexMetricsWidget = useMemo(
 		() =>
 			getWidgetQueryBuilder({
@@ -47,6 +53,7 @@ function ApDexMetrics({
 						threashold: thresholdValue || 0,
 						delta: delta || false,
 						metricsBuckets: metricsBuckets || [],
+						dotMetricsEnabled,
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
@@ -72,6 +79,7 @@ function ApDexMetrics({
 			tagFilterItems,
 			thresholdValue,
 			topLevelOperationsRoute,
+			dotMetricsEnabled,
 		],
 	);
 

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

@@ -3,6 +3,8 @@ import Spinner from 'components/Spinner';
 import { useGetMetricMeta } from 'hooks/apDex/useGetMetricMeta';
 import useErrorNotification from 'hooks/useErrorNotification';
 
+import { FeatureKeys } from '../../../../../constants/features';
+import { useAppContext } from '../../../../../providers/App/App';
 import { WidgetKeys } from '../../../constant';
 import { IServiceName } from '../../types';
 import ApDexMetrics from './ApDexMetrics';
@@ -18,8 +20,17 @@ function ApDexMetricsApplication({
 	const { servicename: encodedServiceName } = useParams<IServiceName>();
 	const servicename = decodeURIComponent(encodedServiceName);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
+	const signozLatencyBucketMetrics = dotMetricsEnabled
+		? WidgetKeys.Signoz_latency_bucket
+		: WidgetKeys.Signoz_latency_bucket_norm;
+
 	const { data, isLoading, error } = useGetMetricMeta(
-		WidgetKeys.SignozLatencyBucket,
+		signozLatencyBucketMetrics,
 		servicename,
 	);
 	useErrorNotification(error);

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

@@ -56,6 +56,10 @@ function ServiceOverview({
 		[isSpanMetricEnable, queries],
 	);
 
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const latencyWidget = useMemo(
 		() =>
 			getWidgetQueryBuilder({
@@ -67,6 +71,7 @@ function ServiceOverview({
 						tagFilterItems,
 						isSpanMetricEnable,
 						topLevelOperationsRoute,
+						dotMetricsEnabled,
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
@@ -76,7 +81,13 @@ function ServiceOverview({
 				yAxisUnit: 'ns',
 				id: SERVICE_CHART_ID.latency,
 			}),
-		[isSpanMetricEnable, servicename, tagFilterItems, topLevelOperationsRoute],
+		[
+			isSpanMetricEnable,
+			servicename,
+			tagFilterItems,
+			topLevelOperationsRoute,
+			dotMetricsEnabled,
+		],
 	);
 
 	const isQueryEnabled =

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

@@ -18,6 +18,8 @@ import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as uuid } from 'uuid';
 
+import { FeatureKeys } from '../../../../constants/features';
+import { useAppContext } from '../../../../providers/App/App';
 import { IServiceName } from '../types';
 import { title } from './config';
 import ColumnWithLink from './TableRenderer/ColumnWithLink';
@@ -40,6 +42,11 @@ function TopOperationMetrics(): JSX.Element {
 		convertRawQueriesToTraceSelectedTags(queries) || [],
 	);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const keyOperationWidget = useMemo(
 		() =>
 			getWidgetQueryBuilder({
@@ -48,13 +55,14 @@ function TopOperationMetrics(): JSX.Element {
 					promql: [],
 					builder: topOperationQueries({
 						servicename,
+						dotMetricsEnabled,
 					}),
 					clickhouse_sql: [],
 					id: uuid(),
 				},
 				panelTypes: PANEL_TYPES.TABLE,
 			}),
-		[servicename],
+		[servicename, dotMetricsEnabled],
 	);
 
 	const updatedQuery = updateStepInterval(keyOperationWidget.query);

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

@@ -10,6 +10,7 @@ export interface IServiceName {
 
 export interface TopOperationQueryFactoryProps {
 	servicename: IServiceName['servicename'];
+	dotMetricsEnabled: boolean;
 }
 
 export interface ExternalCallDurationByAddressProps extends ExternalCallProps {
@@ -19,6 +20,7 @@ export interface ExternalCallDurationByAddressProps extends ExternalCallProps {
 export interface ExternalCallProps {
 	servicename: IServiceName['servicename'];
 	tagFilterItems: TagFilterItem[];
+	dotMetricsEnabled: boolean;
 }
 
 export interface BuilderQueriesProps {
@@ -50,6 +52,7 @@ export interface OperationPerSecProps {
 	servicename: IServiceName['servicename'];
 	tagFilterItems: TagFilterItem[];
 	topLevelOperations: string[];
+	dotMetricsEnabled: boolean;
 }
 
 export interface LatencyProps {
@@ -57,6 +60,7 @@ export interface LatencyProps {
 	tagFilterItems: TagFilterItem[];
 	isSpanMetricEnable?: boolean;
 	topLevelOperationsRoute: string[];
+	dotMetricsEnabled: boolean;
 }
 
 export interface ApDexProps {
@@ -74,4 +78,5 @@ export interface TableRendererProps {
 export interface ApDexMetricsQueryBuilderQueriesProps extends ApDexProps {
 	delta: boolean;
 	metricsBuckets: number[];
+	dotMetricsEnabled: boolean;
 }

frontend/src/container/MetricsApplication/constant.ts

@@ -85,11 +85,14 @@ export enum WidgetKeys {
 	HasError = 'hasError',
 	Address = 'address',
 	DurationNano = 'durationNano',
+	StatusCodeNorm = 'status_code',
 	StatusCode = 'status.code',
 	Operation = 'operation',
 	OperationName = 'operationName',
-	OTelServiceName = 'service.name',
+	Service_name_norm = 'service_name',
+	Service_name = 'service.name',
 	ServiceName = 'serviceName',
+	SignozLatencyCountNorm = 'signoz_latency_count',
 	SignozLatencyCount = 'signoz_latency.count',
 	SignozDBLatencyCount = 'signoz_db_latency_count',
 	DatabaseCallCount = 'signoz_database_call_count',
@@ -98,8 +101,10 @@ export enum WidgetKeys {
 	SignozCallsTotal = 'signoz_calls_total',
 	SignozExternalCallLatencyCount = 'signoz_external_call_latency_count',
 	SignozExternalCallLatencySum = 'signoz_external_call_latency_sum',
-	SignozLatencyBucket = 'signoz_latency.bucket',
-	DbSystem = 'db.system',
+	Signoz_latency_bucket_norm = 'signoz_latency_bucket',
+	Signoz_latency_bucket = 'signoz_latency.bucket',
+	Db_system = 'db.system',
+	Db_system_norm = 'db_system',
 }
 
 export const topOperationMetricsDownloadOptions: DownloadOptions = {

frontend/src/container/MetricsApplication/types.ts

@@ -32,4 +32,5 @@ export interface DatabaseCallsRPSProps extends DatabaseCallProps {
 export interface DatabaseCallProps {
 	servicename: IServiceName['servicename'];
 	tagFilterItems: TagFilterItem[];
+	dotMetricsEnabled: boolean;
 }

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx

@@ -49,6 +49,8 @@ import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
 import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
+import { FeatureKeys } from '../../../../constants/features';
+import { useAppContext } from '../../../../providers/App/App';
 import { selectStyle } from './config';
 import { PLACEHOLDER } from './constant';
 import ExampleQueriesRendererForLogs from './ExampleQueriesRendererForLogs';
@@ -85,6 +87,11 @@ function QueryBuilderSearch({
 
 	const [isEditingTag, setIsEditingTag] = useState(false);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const {
 		updateTag,
 		handleClearTag,
@@ -104,6 +111,7 @@ function QueryBuilderSearch({
 		exampleQueries,
 	} = useAutoComplete(
 		query,
+		dotMetricsEnabled,
 		whereClauseConfig,
 		isLogsExplorerPage,
 		isInfraMonitoring,
@@ -121,6 +129,7 @@ function QueryBuilderSearch({
 	const { sourceKeys, handleRemoveSourceKey } = useFetchKeysAndValues(
 		searchValue,
 		query,
+		dotMetricsEnabled,
 		searchKey,
 		isLogsExplorerPage,
 		isInfraMonitoring,

frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx

@@ -14,6 +14,8 @@ import { SelectOption } from 'types/common/select';
 import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
+import { FeatureKeys } from '../../constants/features';
+import { useAppContext } from '../../providers/App/App';
 import QueryChip from './components/QueryChip';
 import { QueryChipItem, SearchContainer } from './styles';
 
@@ -40,7 +42,12 @@ function ResourceAttributesFilter({
 		SelectOption<string, string>[]
 	>([]);
 
-	const resourceDeploymentKey = getResourceDeploymentKeys();
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
+	const resourceDeploymentKey = getResourceDeploymentKeys(dotMetricsEnabled);
 
 	const [selectedEnvironments, setSelectedEnvironments] = useState<string[]>([]);
 
@@ -66,14 +73,14 @@ function ResourceAttributesFilter({
 	}, [queries, resourceDeploymentKey]);
 
 	useEffect(() => {
-		getEnvironmentTagKeys().then((tagKeys) => {
+		getEnvironmentTagKeys(dotMetricsEnabled).then((tagKeys) => {
 			if (tagKeys && Array.isArray(tagKeys) && tagKeys.length > 0) {
-				getEnvironmentTagValues().then((tagValues) => {
+				getEnvironmentTagValues(dotMetricsEnabled).then((tagValues) => {
 					setEnvironments(tagValues);
 				});
 			}
 		});
-	}, []);
+	}, [dotMetricsEnabled]);
 
 	return (
 		<div className="resourceAttributesFilter-container">

frontend/src/container/ResourceAttributesFilter/components/QueryChip/QueryChip.tsx

@@ -3,6 +3,8 @@ import {
 	getResourceDeploymentKeys,
 } from 'hooks/useResourceAttribute/utils';
 
+import { FeatureKeys } from '../../../../constants/features';
+import { useAppContext } from '../../../../providers/App/App';
 import { QueryChipContainer, QueryChipItem } from '../../styles';
 import { IQueryChipProps } from './types';
 
@@ -11,12 +13,17 @@ function QueryChip({ queryData, onClose }: IQueryChipProps): JSX.Element {
 		onClose(queryData.id);
 	};
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	return (
 		<QueryChipContainer>
 			<QueryChipItem>{convertMetricKeyToTrace(queryData.tagKey)}</QueryChipItem>
 			<QueryChipItem>{queryData.operator}</QueryChipItem>
 			<QueryChipItem
-				closable={queryData.tagKey !== getResourceDeploymentKeys()}
+				closable={queryData.tagKey !== getResourceDeploymentKeys(dotMetricsEnabled)}
 				onClose={onCloseHandler}
 			>
 				{queryData.tagValue.join(', ')}

frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricsApplication.tsx

@@ -3,6 +3,8 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import { ServiceMetricsProps } from '../types';
 import { getQueryRangeRequestData } from '../utils';
 import ServiceMetricTable from './ServiceMetricTable';
@@ -15,13 +17,19 @@ function ServiceMetricsApplication({
 		GlobalReducer
 	>((state) => state.globalTime);
 
+	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],
 	);
 	return (
 		<ServiceMetricTable

frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricsQuery.ts

@@ -19,10 +19,13 @@ import {
 
 export const serviceMetricsQuery = (
 	topLevelOperation: [keyof ServiceDataProps, string[]],
+	dotMetricsEnabled: boolean,
 ): QueryBuilderData => {
 	const p99AutoCompleteData: BaseAutocompleteData = {
 		dataType: DataTypes.Float64,
-		key: WidgetKeys.SignozLatencyBucket,
+		key: dotMetricsEnabled
+			? WidgetKeys.Signoz_latency_bucket
+			: WidgetKeys.Signoz_latency_bucket_norm,
 		type: '',
 	};
 
@@ -50,7 +53,9 @@ export const serviceMetricsQuery = (
 			id: '',
 			key: {
 				dataType: DataTypes.String,
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				type: MetricsType.Resource,
 			},
 			op: OPERATORS.IN,
@@ -73,7 +78,9 @@ export const serviceMetricsQuery = (
 			id: '',
 			key: {
 				dataType: DataTypes.String,
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				type: MetricsType.Resource,
 			},
 			op: OPERATORS.IN,
@@ -83,7 +90,7 @@ export const serviceMetricsQuery = (
 			id: '',
 			key: {
 				dataType: DataTypes.Int64,
-				key: WidgetKeys.StatusCode,
+				key: dotMetricsEnabled ? WidgetKeys.StatusCode : WidgetKeys.StatusCodeNorm,
 				type: MetricsType.Tag,
 			},
 			op: OPERATORS.IN,
@@ -106,7 +113,9 @@ export const serviceMetricsQuery = (
 			id: '',
 			key: {
 				dataType: DataTypes.String,
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				type: MetricsType.Resource,
 			},
 			op: OPERATORS.IN,
@@ -129,7 +138,9 @@ export const serviceMetricsQuery = (
 			id: '',
 			key: {
 				dataType: DataTypes.String,
-				key: WidgetKeys.OTelServiceName,
+				key: dotMetricsEnabled
+					? WidgetKeys.Service_name
+					: WidgetKeys.Service_name_norm,
 				type: MetricsType.Resource,
 			},
 			op: OPERATORS.IN,
@@ -182,7 +193,9 @@ export const serviceMetricsQuery = (
 	const groupBy: BaseAutocompleteData[] = [
 		{
 			dataType: DataTypes.String,
-			key: WidgetKeys.OTelServiceName,
+			key: dotMetricsEnabled
+				? WidgetKeys.Service_name
+				: WidgetKeys.Service_name_norm,
 			type: MetricsType.Tag,
 		},
 	];

frontend/src/container/ServiceApplication/ServiceTraces/index.tsx

@@ -16,6 +16,8 @@ import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import SkipOnBoardingModal from '../SkipOnBoardModal';
 import ServiceTraceTable from './ServiceTracesTable';
 
@@ -37,6 +39,11 @@ function ServiceTraces(): JSX.Element {
 		selectedTags,
 	});
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	useErrorNotification(error);
 
 	const services = data || [];
@@ -54,7 +61,7 @@ function ServiceTraces(): JSX.Element {
 	useEffect(() => {
 		if (!logEventCalledRef.current && !isUndefined(data)) {
 			const selectedEnvironments = queries.find(
-				(val) => val.tagKey === getResourceDeploymentKeys(),
+				(val) => val.tagKey === getResourceDeploymentKeys(dotMetricsEnabled),
 			)?.tagValue;
 
 			const rps = data.reduce((total, service) => total + service.callRate, 0);

frontend/src/container/ServiceApplication/types.ts

@@ -26,6 +26,7 @@ export interface ServiceMetricsTableProps {
 export interface GetQueryRangeRequestDataProps {
 	topLevelOperations: [keyof ServiceDataProps, string[]][];
 	globalSelectedInterval: Time | CustomTimeType;
+	dotMetricsEnabled: boolean;
 }
 
 export interface GetServiceListFromQueryProps {

frontend/src/container/ServiceApplication/utils.ts

@@ -26,6 +26,7 @@ export function getSeriesValue(
 export const getQueryRangeRequestData = ({
 	topLevelOperations,
 	globalSelectedInterval,
+	dotMetricsEnabled,
 }: GetQueryRangeRequestDataProps): GetQueryResultsProps[] => {
 	const requestData: GetQueryResultsProps[] = [];
 	topLevelOperations.forEach((operation) => {
@@ -33,7 +34,7 @@ export const getQueryRangeRequestData = ({
 			query: {
 				queryType: EQueryType.QUERY_BUILDER,
 				promql: [],
-				builder: serviceMetricsQuery(operation),
+				builder: serviceMetricsQuery(operation, dotMetricsEnabled),
 				clickhouse_sql: [],
 				id: uuid(),
 			},

frontend/src/hooks/dashboard/useVariableFetchState.ts

@@ -0,0 +1,153 @@
+import { useCallback, useMemo, useRef, useSyncExternalStore } from 'react';
+import isEmpty from 'lodash-es/isEmpty';
+import {
+	IVariableFetchStoreState,
+	VariableFetchState,
+	variableFetchStore,
+} from 'providers/Dashboard/store/variableFetchStore';
+
+import { useDashboardVariablesSelector } from './useDashboardVariables';
+
+/**
+ * Generic selector hook for the variable fetch store.
+ * Same pattern as useDashboardVariablesSelector.
+ */
+const useVariableFetchSelector = <T>(
+	selector: (state: IVariableFetchStoreState) => T,
+): T => {
+	const selectorRef = useRef(selector);
+	selectorRef.current = selector;
+
+	const getSnapshot = useCallback(
+		() => selectorRef.current(variableFetchStore.getSnapshot()),
+		[],
+	);
+
+	return useSyncExternalStore(variableFetchStore.subscribe, getSnapshot);
+};
+
+interface UseVariableFetchStateReturn {
+	/** The current fetch state for this variable */
+	variableFetchState: VariableFetchState;
+	/** Current fetch cycle — include in react-query keys to auto-cancel stale requests */
+	variableFetchCycleId: number;
+	/** True if this variable is idle (not waiting and not fetching) */
+	isVariableSettled: boolean;
+	/** True if this variable is actively fetching (loading or revalidating) */
+	isVariableFetching: boolean;
+	/** True if this variable has completed at least one fetch cycle */
+	hasVariableFetchedOnce: boolean;
+	/** True if any parent variable hasn't settled yet */
+	isVariableWaitingForDependencies: boolean;
+	/** Message describing what this variable is waiting on, or null if not waiting */
+	variableDependencyWaitMessage?: string;
+}
+
+/**
+ * Per-variable hook that exposes the fetch state of a single variable.
+ * Reusable by both variable input components and panel components.
+ *
+ * Subscribes to both variableFetchStore (for states) and
+ * dashboardVariablesStore (for parent graph) to compute derived values.
+ */
+export function useVariableFetchState(
+	variableName: string,
+): UseVariableFetchStateReturn {
+	// This variable's fetch state (loading, waiting, idle, etc.)
+	const variableFetchState = useVariableFetchSelector(
+		(s) => s.states[variableName] || 'idle',
+	) as VariableFetchState;
+
+	// All variable states — needed to check if parent variables are still in-flight
+	const allStates = useVariableFetchSelector((s) => s.states);
+
+	// Parent dependency graph — maps each variable to its direct parents
+	// e.g. { "childVariable": ["parentVariable"] } means "childVariable" depends on "parentVariable"
+	const parentGraph = useDashboardVariablesSelector(
+		(s) => s.dependencyData?.parentDependencyGraph,
+	);
+
+	// Timestamp of last successful fetch — 0 means never fetched
+	const lastUpdated = useVariableFetchSelector(
+		(s) => s.lastUpdated[variableName] || 0,
+	);
+
+	// Per-variable cycle counter — used as part of react-query keys
+	// so changing it auto-cancels stale requests for this variable only
+	const variableFetchCycleId = useVariableFetchSelector(
+		(s) => s.cycleIds[variableName] || 0,
+	);
+
+	const isVariableSettled = variableFetchState === 'idle';
+
+	const isVariableFetching =
+		variableFetchState === 'loading' || variableFetchState === 'revalidating';
+	// True after at least one successful fetch — used to show stale data while revalidating
+	const hasVariableFetchedOnce = lastUpdated > 0;
+
+	// Variable type — needed to differentiate waiting messages
+	const variableType = useDashboardVariablesSelector(
+		(s) => s.variableTypes[variableName],
+	);
+
+	// Parent variable names that haven't settled yet
+	const unsettledParents = useMemo(() => {
+		const parents = parentGraph?.[variableName] || [];
+		return parents.filter((p) => (allStates[p] || 'idle') !== 'idle');
+	}, [parentGraph, variableName, allStates]);
+
+	const isVariableWaitingForDependencies = unsettledParents.length > 0;
+
+	const variableDependencyWaitMessage = useMemo(() => {
+		if (variableFetchState !== 'waiting') {
+			return;
+		}
+
+		if (variableType === 'DYNAMIC') {
+			return 'Waiting for all query variable options to load.';
+		}
+
+		if (unsettledParents.length === 0) {
+			return;
+		}
+
+		const quoted = unsettledParents.map((p) => `"${p}"`);
+		const names =
+			quoted.length > 1
+				? `${quoted.slice(0, -1).join(', ')} and ${quoted[quoted.length - 1]}`
+				: quoted[0];
+		return `Waiting for options of ${names} to load.`;
+	}, [variableFetchState, variableType, unsettledParents]);
+
+	return {
+		variableFetchState,
+		isVariableSettled,
+		isVariableWaitingForDependencies,
+		variableDependencyWaitMessage,
+		isVariableFetching,
+		hasVariableFetchedOnce,
+		variableFetchCycleId,
+	};
+}
+
+export function useIsPanelWaitingOnVariable(variableNames: string[]): boolean {
+	const states = useVariableFetchSelector((s) => s.states);
+	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
+	const variableTypesMap = useDashboardVariablesSelector((s) => s.variableTypes);
+
+	return variableNames.some((name) => {
+		const variableFetchState = states[name];
+		const { selectedValue, allSelected } = dashboardVariables?.[name] || {};
+
+		const isVariableInFetchingOrWaitingState =
+			variableFetchState === 'loading' ||
+			variableFetchState === 'revalidating' ||
+			variableFetchState === 'waiting';
+
+		if (variableTypesMap[name] === 'DYNAMIC' && allSelected) {
+			return isVariableInFetchingOrWaitingState;
+		}
+
+		return isEmpty(selectedValue) ? isVariableInFetchingOrWaitingState : false;
+	});
+}

frontend/src/hooks/dashboard/utils.ts

@@ -3,6 +3,7 @@ import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { placeWidgetAtBottom } from 'container/NewWidget/utils';
+import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
 import { isArray } from 'lodash-es';
 import {
 	Dashboard,
@@ -116,10 +117,17 @@ export const createDynamicVariableToWidgetsMap = (
 						dynamicVariables.forEach((variable) => {
 							if (
 								variable.dynamicVariablesAttribute &&
+								variable.name &&
 								filter.key?.key === variable.dynamicVariablesAttribute &&
-								((isArray(filter.value) &&
-									filter.value.includes(`$${variable.name}`)) ||
-									filter.value === `$${variable.name}`) &&
+								(isArray(filter.value)
+									? filter.value.some(
+											(v) =>
+												typeof v === 'string' &&
+												variable.name &&
+												textContainsVariableReference(v, variable.name),
+									  )
+									: typeof filter.value === 'string' &&
+									  textContainsVariableReference(filter.value, variable.name)) &&
 								!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 							) {
 								dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -132,7 +140,12 @@ export const createDynamicVariableToWidgetsMap = (
 						dynamicVariables.forEach((variable) => {
 							if (
 								variable.dynamicVariablesAttribute &&
-								queryData.filter?.expression?.includes(`$${variable.name}`) &&
+								variable.name &&
+								queryData.filter?.expression &&
+								textContainsVariableReference(
+									queryData.filter.expression,
+									variable.name,
+								) &&
 								!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 							) {
 								dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -149,7 +162,9 @@ export const createDynamicVariableToWidgetsMap = (
 					dynamicVariables.forEach((variable) => {
 						if (
 							variable.dynamicVariablesAttribute &&
-							promqlQuery.query?.includes(`$${variable.name}`) &&
+							variable.name &&
+							promqlQuery.query &&
+							textContainsVariableReference(promqlQuery.query, variable.name) &&
 							!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 						) {
 							dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -165,7 +180,9 @@ export const createDynamicVariableToWidgetsMap = (
 					dynamicVariables.forEach((variable) => {
 						if (
 							variable.dynamicVariablesAttribute &&
-							clickhouseQuery.query?.includes(`$${variable.name}`) &&
+							variable.name &&
+							clickhouseQuery.query &&
+							textContainsVariableReference(clickhouseQuery.query, variable.name) &&
 							!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 						) {
 							dynamicVariableToWidgetsMap[variable.id].push(widget.id);

frontend/src/hooks/infraMonitoring/useGetK8sClustersList.ts

@@ -17,6 +17,7 @@ type UseGetK8sClustersList = (
 	>,
 
 	headers?: Record<string, string>,
+	dotMetricsEnabled?: boolean,
 ) => UseQueryResult<
 	SuccessResponse<K8sClustersListResponse> | ErrorResponse,
 	Error
@@ -28,6 +29,7 @@ export const useGetK8sClustersList: UseGetK8sClustersList = (
 	options,
 
 	headers,
+	dotMetricsEnabled?: boolean,
 ) => {
 	const queryKey = useMemo(() => {
 		if (options?.queryKey && Array.isArray(options.queryKey)) {
@@ -45,7 +47,8 @@ export const useGetK8sClustersList: UseGetK8sClustersList = (
 		SuccessResponse<K8sClustersListResponse> | ErrorResponse,
 		Error
 	>({
-		queryFn: ({ signal }) => getK8sClustersList(requestData, signal, headers),
+		queryFn: ({ signal }) =>
+			getK8sClustersList(requestData, signal, headers, dotMetricsEnabled),
 
 		...options,
 

frontend/src/hooks/infraMonitoring/useGetK8sDaemonSetsList.ts

@@ -17,6 +17,7 @@ type UseGetK8sDaemonSetsList = (
 	>,
 
 	headers?: Record<string, string>,
+	dotMetricsEnabled?: boolean,
 ) => UseQueryResult<
 	SuccessResponse<K8sDaemonSetsListResponse> | ErrorResponse,
 	Error
@@ -28,6 +29,7 @@ export const useGetK8sDaemonSetsList: UseGetK8sDaemonSetsList = (
 	options,
 
 	headers,
+	dotMetricsEnabled,
 ) => {
 	const queryKey = useMemo(() => {
 		if (options?.queryKey && Array.isArray(options.queryKey)) {
@@ -45,7 +47,8 @@ export const useGetK8sDaemonSetsList: UseGetK8sDaemonSetsList = (
 		SuccessResponse<K8sDaemonSetsListResponse> | ErrorResponse,
 		Error
 	>({
-		queryFn: ({ signal }) => getK8sDaemonSetsList(requestData, signal, headers),
+		queryFn: ({ signal }) =>
+			getK8sDaemonSetsList(requestData, signal, headers, dotMetricsEnabled),
 
 		...options,
 

frontend/src/hooks/infraMonitoring/useGetK8sDeploymentsList.ts

@@ -15,6 +15,7 @@ type UseGetK8sDeploymentsList = (
 		Error
 	>,
 	headers?: Record<string, string>,
+	dotMetricsEnabled?: boolean,
 ) => UseQueryResult<
 	SuccessResponse<K8sDeploymentsListResponse> | ErrorResponse,
 	Error
@@ -24,6 +25,7 @@ export const useGetK8sDeploymentsList: UseGetK8sDeploymentsList = (
 	requestData,
 	options,
 	headers,
+	dotMetricsEnabled,
 ) => {
 	const queryKey = useMemo(() => {
 		if (options?.queryKey && Array.isArray(options.queryKey)) {
@@ -41,7 +43,8 @@ export const useGetK8sDeploymentsList: UseGetK8sDeploymentsList = (
 		SuccessResponse<K8sDeploymentsListResponse> | ErrorResponse,
 		Error
 	>({
-		queryFn: ({ signal }) => getK8sDeploymentsList(requestData, signal, headers),
+		queryFn: ({ signal }) =>
+			getK8sDeploymentsList(requestData, signal, headers, dotMetricsEnabled),
 		...options,
 		queryKey,
 	});

frontend/src/hooks/infraMonitoring/useGetK8sJobsList.ts

@@ -17,6 +17,7 @@ type UseGetK8sJobsList = (
 	>,
 
 	headers?: Record<string, string>,
+	dotMetricsEnabled?: boolean,
 ) => UseQueryResult<
 	SuccessResponse<K8sJobsListResponse> | ErrorResponse,
 	Error
@@ -28,6 +29,7 @@ export const useGetK8sJobsList: UseGetK8sJobsList = (
 	options,
 
 	headers,
+	dotMetricsEnabled,
 ) => {
 	const queryKey = useMemo(() => {
 		if (options?.queryKey && Array.isArray(options.queryKey)) {
@@ -42,7 +44,8 @@ export const useGetK8sJobsList: UseGetK8sJobsList = (
 	}, [options?.queryKey, requestData]);
 
 	return useQuery<SuccessResponse<K8sJobsListResponse> | ErrorResponse, Error>({
-		queryFn: ({ signal }) => getK8sJobsList(requestData, signal, headers),
+		queryFn: ({ signal }) =>
+			getK8sJobsList(requestData, signal, headers, dotMetricsEnabled),
 
 		...options,
 

frontend/src/hooks/infraMonitoring/useGetK8sNamespacesList.ts

@@ -15,6 +15,7 @@ type UseGetK8sNamespacesList = (
 		Error
 	>,
 	headers?: Record<string, string>,
+	dotMetricsEnabled?: boolean,
 ) => UseQueryResult<
 	SuccessResponse<K8sNamespacesListResponse> | ErrorResponse,
 	Error
@@ -24,6 +25,7 @@ export const useGetK8sNamespacesList: UseGetK8sNamespacesList = (
 	requestData,
 	options,
 	headers,
+	dotMetricsEnabled,
 ) => {
 	const queryKey = useMemo(() => {
 		if (options?.queryKey && Array.isArray(options.queryKey)) {
@@ -41,7 +43,8 @@ export const useGetK8sNamespacesList: UseGetK8sNamespacesList = (
 		SuccessResponse<K8sNamespacesListResponse> | ErrorResponse,
 		Error
 	>({
-		queryFn: ({ signal }) => getK8sNamespacesList(requestData, signal, headers),
+		queryFn: ({ signal }) =>
+			getK8sNamespacesList(requestData, signal, headers, dotMetricsEnabled),
 		...options,
 		queryKey,
 	});

frontend/src/hooks/infraMonitoring/useGetK8sNodesList.ts

@@ -15,6 +15,7 @@ type UseGetK8sNodesList = (
 		Error
 	>,
 	headers?: Record<string, string>,
+	dotMetricsEnabled?: boolean,
 ) => UseQueryResult<
 	SuccessResponse<K8sNodesListResponse> | ErrorResponse,
 	Error
@@ -24,6 +25,7 @@ export const useGetK8sNodesList: UseGetK8sNodesList = (
 	requestData,
 	options,
 	headers,
+	dotMetricsEnabled,
 ) => {
 	const queryKey = useMemo(() => {
 		if (options?.queryKey && Array.isArray(options.queryKey)) {
@@ -38,7 +40,8 @@ export const useGetK8sNodesList: UseGetK8sNodesList = (
 	}, [options?.queryKey, requestData]);
 
 	return useQuery<SuccessResponse<K8sNodesListResponse> | ErrorResponse, Error>({
-		queryFn: ({ signal }) => getK8sNodesList(requestData, signal, headers),
+		queryFn: ({ signal }) =>
+			getK8sNodesList(requestData, signal, headers, dotMetricsEnabled),
 		...options,
 		queryKey,
 	});

frontend/src/hooks/infraMonitoring/useGetK8sPodsList.ts

@@ -15,6 +15,7 @@ type UseGetK8sPodsList = (
 		Error
 	>,
 	headers?: Record<string, string>,
+	dotMetricsEnabled?: boolean,
 ) => UseQueryResult<
 	SuccessResponse<K8sPodsListResponse> | ErrorResponse,
 	Error
@@ -24,6 +25,7 @@ export const useGetK8sPodsList: UseGetK8sPodsList = (
 	requestData,
 	options,
 	headers,
+	dotMetricsEnabled,
 ) => {
 	const queryKey = useMemo(() => {
 		if (options?.queryKey && Array.isArray(options.queryKey)) {
@@ -38,7 +40,8 @@ export const useGetK8sPodsList: UseGetK8sPodsList = (
 	}, [options?.queryKey, requestData]);
 
 	return useQuery<SuccessResponse<K8sPodsListResponse> | ErrorResponse, Error>({
-		queryFn: ({ signal }) => getK8sPodsList(requestData, signal, headers),
+		queryFn: ({ signal }) =>
+			getK8sPodsList(requestData, signal, headers, dotMetricsEnabled),
 		...options,
 		queryKey,
 	});

frontend/src/hooks/infraMonitoring/useGetK8sStatefulSetsList.ts

@@ -17,6 +17,7 @@ type UseGetK8sStatefulSetsList = (
 	>,
 
 	headers?: Record<string, string>,
+	dotMetricsEnabled?: boolean,
 ) => UseQueryResult<
 	SuccessResponse<K8sStatefulSetsListResponse> | ErrorResponse,
 	Error
@@ -28,6 +29,7 @@ export const useGetK8sStatefulSetsList: UseGetK8sStatefulSetsList = (
 	options,
 
 	headers,
+	dotMetricsEnabled,
 ) => {
 	const queryKey = useMemo(() => {
 		if (options?.queryKey && Array.isArray(options.queryKey)) {
@@ -45,7 +47,8 @@ export const useGetK8sStatefulSetsList: UseGetK8sStatefulSetsList = (
 		SuccessResponse<K8sStatefulSetsListResponse> | ErrorResponse,
 		Error
 	>({
-		queryFn: ({ signal }) => getK8sStatefulSetsList(requestData, signal, headers),
+		queryFn: ({ signal }) =>
+			getK8sStatefulSetsList(requestData, signal, headers, dotMetricsEnabled),
 
 		...options,
 

frontend/src/hooks/infraMonitoring/useGetK8sVolumesList.ts

@@ -15,6 +15,7 @@ type UseGetK8sVolumesList = (
 		Error
 	>,
 	headers?: Record<string, string>,
+	dotMetricsEnabled?: boolean,
 ) => UseQueryResult<
 	SuccessResponse<K8sVolumesListResponse> | ErrorResponse,
 	Error
@@ -24,6 +25,7 @@ export const useGetK8sVolumesList: UseGetK8sVolumesList = (
 	requestData,
 	options,
 	headers,
+	dotMetricsEnabled,
 ) => {
 	const queryKey = useMemo(() => {
 		if (options?.queryKey && Array.isArray(options.queryKey)) {
@@ -41,7 +43,8 @@ export const useGetK8sVolumesList: UseGetK8sVolumesList = (
 		SuccessResponse<K8sVolumesListResponse> | ErrorResponse,
 		Error
 	>({
-		queryFn: ({ signal }) => getK8sVolumesList(requestData, signal, headers),
+		queryFn: ({ signal }) =>
+			getK8sVolumesList(requestData, signal, headers, dotMetricsEnabled),
 		...options,
 		queryKey,
 	});

frontend/src/hooks/queryBuilder/useAutoComplete.ts

@@ -27,6 +27,7 @@ export type WhereClauseConfig = {
 
 export const useAutoComplete = (
 	query: IBuilderQuery,
+	dotMetricsEnabled: boolean,
 	whereClauseConfig?: WhereClauseConfig,
 	shouldUseSuggestions?: boolean,
 	isInfraMonitoring?: boolean,
@@ -39,6 +40,7 @@ export const useAutoComplete = (
 	const { keys, results, isFetching, exampleQueries } = useFetchKeysAndValues(
 		searchValue,
 		query,
+		dotMetricsEnabled,
 		searchKey,
 		shouldUseSuggestions,
 		isInfraMonitoring,

frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts

@@ -50,6 +50,7 @@ type IuseFetchKeysAndValues = {
 export const useFetchKeysAndValues = (
 	searchValue: string,
 	query: IBuilderQuery,
+	dotMetricsEnabled: boolean,
 	searchKey: string,
 	shouldUseSuggestions?: boolean,
 	isInfraMonitoring?: boolean,
@@ -123,7 +124,7 @@ export const useFetchKeysAndValues = (
 			aggregateOperator: query.aggregateOperator || '',
 			aggregateAttribute:
 				isInfraMonitoring && entity
-					? GetK8sEntityToAggregateAttribute(entity)
+					? GetK8sEntityToAggregateAttribute(entity, dotMetricsEnabled)
 					: query.aggregateAttribute?.key || '',
 			tagType: query.aggregateAttribute?.type ?? null,
 		},
@@ -219,7 +220,7 @@ export const useFetchKeysAndValues = (
 					aggregateOperator: 'noop',
 					dataSource: query.dataSource,
 					aggregateAttribute:
-						GetK8sEntityToAggregateAttribute(entity) ||
+						GetK8sEntityToAggregateAttribute(entity, dotMetricsEnabled) ||
 						query.aggregateAttribute?.key ||
 						'',
 					attributeKey: filterAttributeKey?.key ?? tagKey,