Merge branch 'main' into feat/infra_disk_usage

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/__mocks__/uplotMock.ts

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

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

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

frontend/src/api/dynamicVariables/getFieldValues.ts

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

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -39,6 +39,7 @@ export interface HostData {
 	waitTimeSeries: TimeSeries;
 	load15: number;
 	load15TimeSeries: TimeSeries;
+	filesystem: number;
 }
 
 export interface HostListResponse {

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/HostMetricsDetail.styles.scss

@@ -48,7 +48,7 @@
 			.labels-row,
 			.values-row {
 				display: grid;
-				grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
+				grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr 1.5fr;
 				gap: 30px;
 				align-items: center;
 			}

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -426,6 +426,12 @@ function HostMetricsDetails({
 								>
 									MEMORY USAGE
 								</Typography.Text>
+								<Typography.Text
+									type="secondary"
+									className="host-details-metadata-label"
+								>
+									DISK USAGE
+								</Typography.Text>
 							</div>
 
 							<div className="values-row">
@@ -478,6 +484,23 @@ function HostMetricsDetails({
 										className="progress-bar"
 									/>
 								</div>
+								<div className="progress-container">
+									<Progress
+										percent={Number((host.filesystem * 100).toFixed(1))}
+										size="small"
+										strokeColor={((): string => {
+											const filesystemPercent = Number((host.filesystem * 100).toFixed(1));
+											if (filesystemPercent >= 90) {
+												return Color.BG_CHERRY_500;
+											}
+											if (filesystemPercent >= 60) {
+												return Color.BG_AMBER_500;
+											}
+											return Color.BG_FOREST_500;
+										})()}
+										className="progress-bar"
+									/>
+								</div>
 							</div>
 						</div>
 					</div>

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

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

frontend/src/components/NewSelect/CustomMultiSelect.tsx

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

frontend/src/components/NewSelect/CustomSelect.tsx

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

frontend/src/components/NewSelect/types.ts

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

frontend/src/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/visualization/charts/BarChart/BarChart.tsx

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

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

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

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

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

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

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

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

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

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

@@ -83,7 +83,7 @@ export const prepareUPlotConfig = ({
 			drawStyle: DrawStyle.Line,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: true,
+			spanGaps: false,
 			lineStyle: LineStyle.Solid,
 			lineInterpolation: LineInterpolation.Spline,
 			showPoints: VisibilityMode.Never,

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

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

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

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

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

@@ -88,7 +88,7 @@ export function buildBaseConfig({
 		max: undefined,
 		softMin: widget.softMin ?? undefined,
 		softMax: widget.softMax ?? undefined,
-		thresholds: thresholdOptions,
+		// thresholds,
 		logBase: widget.isLogScale ? 10 : undefined,
 		distribution: widget.isLogScale
 			? DistributionType.Logarithmic

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

@@ -1,20 +1,15 @@
 import { LOCALSTORAGE } from 'constants/localStorage';
 
-import {
-	GraphVisibilityState,
-	SeriesVisibilityItem,
-	SeriesVisibilityState,
-} from '../types';
+import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
 
 /**
- * Retrieves the stored series visibility for a specific widget from localStorage by index.
- * Index 0 is the x-axis (time); indices 1, 2, ... are data series (same order as uPlot plot.series).
+ * Retrieves the visibility map for a specific widget from localStorage
  * @param widgetId - The unique identifier of the widget
- * @returns visibility[i] = show state for series at index i, or null if not found
+ * @returns A Map of series labels to their visibility state, or null if not found
  */
 export function getStoredSeriesVisibility(
 	widgetId: string,
-): SeriesVisibilityState | null {
+): Map<string, boolean> | null {
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
@@ -29,15 +24,8 @@ export function getStoredSeriesVisibility(
 			return null;
 		}
 
-		return {
-			labels: widgetState.dataIndex.map((item) => item.label),
-			visibility: widgetState.dataIndex.map((item) => item.show),
-		};
-	} catch (error) {
-		if (error instanceof SyntaxError) {
-			// If the stored data is malformed, remove it
-			localStorage.removeItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
-		}
+		return new Map(widgetState.dataIndex.map((item) => [item.label, item.show]));
+	} catch {
 		// Silently handle parsing errors - fall back to default visibility
 		return null;
 	}
@@ -47,31 +35,40 @@ export function updateSeriesVisibilityToLocalStorage(
 	widgetId: string,
 	seriesVisibility: SeriesVisibilityItem[],
 ): void {
-	let visibilityStates: GraphVisibilityState[] = [];
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
-		visibilityStates = JSON.parse(storedData || '[]');
-	} catch (error) {
-		if (error instanceof SyntaxError) {
-			visibilityStates = [];
+
+		let visibilityStates: GraphVisibilityState[];
+
+		if (!storedData) {
+			visibilityStates = [
+				{
+					name: widgetId,
+					dataIndex: seriesVisibility,
+				},
+			];
+		} else {
+			visibilityStates = JSON.parse(storedData);
 		}
-	}
-	const widgetState = visibilityStates.find((state) => state.name === widgetId);
+		const widgetState = visibilityStates.find((state) => state.name === widgetId);
 
-	if (widgetState) {
-		widgetState.dataIndex = seriesVisibility;
-	} else {
-		visibilityStates = [
-			...visibilityStates,
-			{
-				name: widgetId,
-				dataIndex: seriesVisibility,
-			},
-		];
-	}
+		if (!widgetState) {
+			visibilityStates = [
+				...visibilityStates,
+				{
+					name: widgetId,
+					dataIndex: seriesVisibility,
+				},
+			];
+		} else {
+			widgetState.dataIndex = seriesVisibility;
+		}
 
-	localStorage.setItem(
-		LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
-		JSON.stringify(visibilityStates),
-	);
+		localStorage.setItem(
+			LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
+			JSON.stringify(visibilityStates),
+		);
+	} catch {
+		// Silently handle parsing errors - fall back to default visibility
+	}
 }

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

@@ -27,6 +27,7 @@ export interface HostRowData {
 	hostName: string;
 	cpu: React.ReactNode;
 	memory: React.ReactNode;
+	filesystem: React.ReactNode;
 	wait: string;
 	load15: number;
 	active: React.ReactNode;
@@ -108,6 +109,14 @@ export const getHostsListColumns = (): ColumnType<HostRowData>[] => [
 		sorter: true,
 		align: 'right',
 	},
+	{
+		title: <div className="column-header-right">Disk Usage</div>,
+		dataIndex: 'filesystem',
+		key: 'filesystem',
+		width: 100,
+		sorter: true,
+		align: 'right',
+	},
 	{
 		title: <div className="column-header-right">IOWait</div>,
 		dataIndex: 'wait',
@@ -178,6 +187,26 @@ export const formatDataForTable = (data: HostData[]): HostRowData[] =>
 				/>
 			</div>
 		),
+		filesystem: (
+			<div className="progress-container">
+				<Progress
+					percent={Number((host.filesystem * 100).toFixed(1))}
+					strokeLinecap="butt"
+					size="small"
+					strokeColor={((): string => {
+						const filesystemPercent = Number((host.filesystem * 100).toFixed(1));
+						if (filesystemPercent >= 90) {
+							return Color.BG_CHERRY_500;
+						}
+						if (filesystemPercent >= 60) {
+							return Color.BG_AMBER_500;
+						}
+						return Color.BG_FOREST_500;
+					})()}
+					className="progress-bar"
+				/>
+			</div>
+		),
 		wait: `${Number((host.wait * 100).toFixed(1))}%`,
 		load15: host.load15,
 	}));
@@ -211,18 +240,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 +273,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 +286,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,45 @@ 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';
+	const fsUsageKey = dotMetricsEnabled
+		? 'system.filesystem.usage'
+		: 'system_filesystem_usage';
 
 	return [
 		{
@@ -2416,6 +2486,143 @@ export const getHostQueryPayload = (
 			start,
 			end,
 		},
+		{
+			selectedTime: 'GLOBAL_TIME',
+			graphType: PANEL_TYPES.TIME_SERIES,
+			query: {
+				builder: {
+					queryData: [
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'system_filesystem_usage--float64--Gauge--true',
+
+								key: fsUsageKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: true,
+							expression: 'A',
+							filters: {
+								items: [
+									{
+										id: 'fs_f1',
+										key: {
+											dataType: DataTypes.String,
+											id: 'host_name--string--tag--false',
+
+											key: hostNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: hostName,
+									},
+									{
+										id: 'fs_f2',
+										key: {
+											dataType: DataTypes.String,
+											id: 'state--string--tag--false',
+
+											key: 'state',
+											type: 'tag',
+										},
+										op: '=',
+										value: 'used',
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'mountpoint--string--tag--false',
+
+									key: 'mountpoint',
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: '{{mountpoint}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'A',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'avg',
+						},
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'system_filesystem_usage--float64--Gauge--true',
+
+								key: fsUsageKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: true,
+							expression: 'B',
+							filters: {
+								items: [
+									{
+										id: 'fs_f3',
+										key: {
+											dataType: DataTypes.String,
+											id: 'host_name--string--tag--false',
+
+											key: hostNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: hostName,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'mountpoint--string--tag--false',
+
+									key: 'mountpoint',
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: '{{mountpoint}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'B',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'avg',
+						},
+					],
+					queryFormulas: [
+						{
+							disabled: false,
+							expression: 'A/B',
+							legend: '{{mountpoint}}',
+							queryName: 'F1',
+						},
+					],
+					queryTraceOperator: [],
+				},
+				clickhouse_sql: [{ disabled: false, legend: '', name: 'A', query: '' }],
+				id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+				promql: [{ disabled: false, legend: '', name: 'A', query: '' }],
+				queryType: EQueryType.QUERY_BUILDER,
+			},
+			variables: {},
+			formatForWeb: false,
+			start,
+			end,
+		},
 		{
 			selectedTime: 'GLOBAL_TIME',
 			graphType: PANEL_TYPES.TIME_SERIES,
@@ -2564,6 +2771,6 @@ export const hostWidgetInfo = [
 	{ title: 'Network connections', yAxisUnit: 'short' },
 	{ title: 'System disk io (bytes transferred)', yAxisUnit: 'bytes' },
 	{ title: 'System disk operations/s', yAxisUnit: 'short' },
+	{ title: 'Disk Usage (%) by mountpoint', yAxisUnit: 'percentunit' },
 	{ title: 'Queue size', yAxisUnit: 'short' },
-	{ title: 'Disk operations time', yAxisUnit: 's' },
 ];

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/PanelWrapper/constants.ts

@@ -1,6 +1,5 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 
-import TimeSeriesPanel from '../DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel';
 import HistogramPanelWrapper from './HistogramPanelWrapper';
 import ListPanelWrapper from './ListPanelWrapper';
 import PiePanelWrapper from './PiePanelWrapper';
@@ -9,7 +8,7 @@ import UplotPanelWrapper from './UplotPanelWrapper';
 import ValuePanelWrapper from './ValuePanelWrapper';
 
 export const PanelTypeVsPanelWrapper = {
-	[PANEL_TYPES.TIME_SERIES]: TimeSeriesPanel,
+	[PANEL_TYPES.TIME_SERIES]: UplotPanelWrapper,
 	[PANEL_TYPES.TABLE]: TablePanelWrapper,
 	[PANEL_TYPES.LIST]: ListPanelWrapper,
 	[PANEL_TYPES.VALUE]: ValuePanelWrapper,

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/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,
 	});