fix: add missing filtering for ip address for scalar data

In domain listing api for external api monitoring,
we have option to filter out the IP address but
it only handles timeseries and raw type data while
domain list handler returns scalar data.

.devenv/docker/clickhouse/compose.yaml

@@ -42,7 +42,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.142.0
+    image: signoz/signoz-schema-migrator:v0.129.13
     container_name: schema-migrator-sync
     command:
       - sync
@@ -55,7 +55,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.142.0
+    image: signoz/signoz-schema-migrator:v0.129.13
     container_name: schema-migrator-async
     command:
       - async

.devenv/docker/signoz-otel-collector/compose.yaml

@@ -4,6 +4,7 @@ services:
     container_name: signoz-otel-collector-dev
     command:
       - --config=/etc/otel-collector-config.yaml
+      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
     environment:

.github/workflows/goci.yaml

@@ -93,13 +93,3 @@ jobs:
         run: |
           go run cmd/enterprise/*.go generate openapi
           git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in openapi spec. Run go run cmd/enterprise/*.go generate openapi locally and commit."; exit 1)
-      - name: node-install
-        uses: actions/setup-node@v5
-        with:
-          node-version: "22"
-      - name: install-frontend
-        run: cd frontend && yarn install
-      - name: generate-api-clients
-        run: |
-          cd frontend && yarn generate:api
-          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in generated api clients. Run yarn generate:api in frontend/ locally and commit."; exit 1)

deploy/docker-swarm/docker-compose.ha.yaml

@@ -176,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.111.0
+    image: signoz/signoz:v0.110.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -209,11 +209,12 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.142.0
+    image: signoz/signoz-otel-collector:v0.129.13
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
+      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml
@@ -232,7 +233,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.142.0
+    image: signoz/signoz-schema-migrator:v0.129.13
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.111.0
+    image: signoz/signoz:v0.110.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -150,11 +150,12 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.142.0
+    image: signoz/signoz-otel-collector:v0.129.13
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
+      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     configs:
       - source: otel-collector-config
         target: /etc/otel-collector-config.yaml
@@ -175,7 +176,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.142.0
+    image: signoz/signoz-schema-migrator:v0.129.13
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/docker-compose.ha.yaml

@@ -179,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.111.0}
+    image: signoz/signoz:${VERSION:-v0.110.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -213,12 +213,13 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.13}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
+      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml
@@ -238,7 +239,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -249,7 +250,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -111,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.111.0}
+    image: signoz/signoz:${VERSION:-v0.110.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -144,12 +144,13 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.13}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
       - --copy-path=/var/tmp/collector-config.yaml
+      - --feature-gates=-pkg.translator.prometheus.NormalizeName
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml
@@ -165,7 +166,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -177,7 +178,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
     container_name: schema-migrator-async
     command:
       - async

docs/api/openapi.yml

@@ -4355,8 +4355,6 @@ components:
           type: string
         unit:
           type: string
-      required:
-      - name
       type: object
     Querybuildertypesv5QueryData:
       properties:
@@ -4429,9 +4427,6 @@ components:
             type: array
           nullable: true
           type: object
-      required:
-      - keys
-      - complete
       type: object
     TelemetrytypesGettableFieldValues:
       properties:
@@ -4439,9 +4434,6 @@ components:
           type: boolean
         values:
           $ref: '#/components/schemas/TelemetrytypesTelemetryFieldValues'
-      required:
-      - values
-      - complete
       type: object
     TelemetrytypesTelemetryFieldKey:
       properties:
@@ -4457,8 +4449,6 @@ components:
           type: string
         unit:
           type: string
-      required:
-      - name
       type: object
     TelemetrytypesTelemetryFieldValues:
       properties:

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/jest.config.ts

@@ -17,8 +17,6 @@ const config: Config.InitialOptions = {
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
-		'^@signozhq/icons$':
-			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 	},
 	globals: {
 		extensionsToTreatAsEsm: ['.ts'],

frontend/package.json

@@ -19,7 +19,7 @@
 		"commitlint": "commitlint --edit $1",
 		"test": "jest",
 		"test:changedsince": "jest --changedSince=main --coverage --silent",
-		"generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
+		"generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh && prettier --write src/api/generated && (eslint --fix src/api/generated || true)"
 	},
 	"engines": {
 		"node": ">=16.15.0"
@@ -52,7 +52,6 @@
 		"@signozhq/combobox": "0.0.2",
 		"@signozhq/command": "0.0.0",
 		"@signozhq/design-tokens": "2.1.1",
-		"@signozhq/icons": "0.1.0",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
 		"@signozhq/resizable": "0.0.0",

frontend/public/Logos/convex-logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="184" height="188" fill="none" viewBox="0 0 184 188"><path fill="#f3b01c" d="M108.092 130.021c18.166-2.018 35.293-11.698 44.723-27.854-4.466 39.961-48.162 65.218-83.83 49.711-3.286-1.425-6.115-3.796-8.056-6.844-8.016-12.586-10.65-28.601-6.865-43.135 10.817 18.668 32.81 30.111 54.028 28.122"/><path fill="#8d2676" d="M53.401 90.174c-7.364 17.017-7.682 36.94 1.345 53.336-31.77-23.902-31.423-75.052-.388-98.715 2.87-2.187 6.282-3.485 9.86-3.683 14.713-.776 29.662 4.91 40.146 15.507-21.3.212-42.046 13.857-50.963 33.555"/><path fill="#ee342f" d="M114.637 61.855C103.89 46.87 87.069 36.668 68.639 36.358c35.625-16.17 79.446 10.047 84.217 48.807.444 3.598-.139 7.267-1.734 10.512-6.656 13.518-18.998 24.002-33.42 27.882 10.567-19.599 9.263-43.544-3.065-61.704"/></svg>

frontend/public/locales/en/titles.json

@@ -1,7 +1,6 @@
 {
 	"SIGN_UP": "SigNoz | Sign Up",
 	"LOGIN": "SigNoz | Login",
-	"FORGOT_PASSWORD": "SigNoz | Forgot Password",
 	"HOME": "SigNoz | Home",
 	"SERVICE_METRICS": "SigNoz | Service Metrics",
 	"SERVICE_MAP": "SigNoz | Service Map",

frontend/scripts/post-types-generation.sh

@@ -1,6 +1,5 @@
 #!/bin/bash
 
-echo "\n\n---\nRenamed tag files to index.ts...\n"
 # Rename tag files to index.ts in services directories
 # tags-split creates: services/tagName/tagName.ts -> rename to services/tagName/index.ts
 find src/api/generated/services -mindepth 1 -maxdepth 1 -type d | while read -r dir; do
@@ -12,33 +11,4 @@ find src/api/generated/services -mindepth 1 -maxdepth 1 -type d | while read -r
   fi
 done
 
-echo "\n✅ Tag files renamed to index.ts"
-
-# Format generated files
-echo "\n\n---\nRunning prettier...\n"
-if ! prettier --write src/api/generated; then
-  echo "Prettier formatting failed!"
-  exit 1
-fi
-echo "\n✅ Prettier formatting successful"
-
-
-# Fix linting issues
-echo "\n\n---\nRunning eslint...\n"
-if ! yarn lint --fix --quiet src/api/generated; then
-  echo "ESLint check failed! Please fix linting errors before proceeding."
-  exit 1
-fi
-echo "\n✅ ESLint check successful"
-
-
-# Check for type errors
-echo "\n\n---\nChecking for type errors...\n"
-if ! tsc --noEmit; then
-  echo "Type check failed! Please fix type errors before proceeding."
-  exit 1
-fi
-echo "\n✅ Type check successful"
-
-
-echo "\n\n---\n ✅✅✅ API generation complete!"
+echo "Tag files renamed to index.ts"

frontend/src/AppRoutes/pageComponents.ts

@@ -194,10 +194,6 @@ export const Login = Loadable(
 	() => import(/* webpackChunkName: "Login" */ 'pages/Login'),
 );
 
-export const ForgotPassword = Loadable(
-	() => import(/* webpackChunkName: "ForgotPassword" */ 'pages/ForgotPassword'),
-);
-
 export const UnAuthorized = Loadable(
 	() => import(/* webpackChunkName: "UnAuthorized" */ 'pages/UnAuthorized'),
 );

frontend/src/AppRoutes/routes.ts

@@ -17,7 +17,6 @@ import {
 	DashboardWidget,
 	EditRulesPage,
 	ErrorDetails,
-	ForgotPassword,
 	Home,
 	InfrastructureMonitoring,
 	InstalledIntegrations,
@@ -340,13 +339,6 @@ const routes: AppRoutes[] = [
 		isPrivate: false,
 		key: 'LOGIN',
 	},
-	{
-		path: ROUTES.FORGOT_PASSWORD,
-		exact: true,
-		component: ForgotPassword,
-		isPrivate: false,
-		key: 'FORGOT_PASSWORD',
-	},
 	{
 		path: ROUTES.UN_AUTHORIZED,
 		exact: true,

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

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

frontend/src/api/dynamicVariables/getFieldValues.ts

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

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

@@ -1,222 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	InvalidateOptions,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-import { useQuery } from 'react-query';
-
-import { GeneratedAPIInstance } from '../../../index';
-import type {
-	GetFieldsKeys200,
-	GetFieldsKeysParams,
-	GetFieldsValues200,
-	GetFieldsValuesParams,
-	RenderErrorResponseDTO,
-} from '../sigNoz.schemas';
-
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
-/**
- * This endpoint returns field keys
- * @summary Get field keys
- */
-export const getFieldsKeys = (
-	params?: GetFieldsKeysParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetFieldsKeys200>({
-		url: `/api/v1/fields/keys`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getGetFieldsKeysQueryKey = (params?: GetFieldsKeysParams) => {
-	return ['getFieldsKeys', ...(params ? [params] : [])] as const;
-};
-
-export const getGetFieldsKeysQueryOptions = <
-	TData = Awaited<ReturnType<typeof getFieldsKeys>>,
-	TError = RenderErrorResponseDTO
->(
-	params?: GetFieldsKeysParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getFieldsKeys>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetFieldsKeysQueryKey(params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getFieldsKeys>>> = ({
-		signal,
-	}) => getFieldsKeys(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getFieldsKeys>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetFieldsKeysQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getFieldsKeys>>
->;
-export type GetFieldsKeysQueryError = RenderErrorResponseDTO;
-
-/**
- * @summary Get field keys
- */
-
-export function useGetFieldsKeys<
-	TData = Awaited<ReturnType<typeof getFieldsKeys>>,
-	TError = RenderErrorResponseDTO
->(
-	params?: GetFieldsKeysParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getFieldsKeys>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetFieldsKeysQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get field keys
- */
-export const invalidateGetFieldsKeys = async (
-	queryClient: QueryClient,
-	params?: GetFieldsKeysParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetFieldsKeysQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint returns field values
- * @summary Get field values
- */
-export const getFieldsValues = (
-	params?: GetFieldsValuesParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetFieldsValues200>({
-		url: `/api/v1/fields/values`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getGetFieldsValuesQueryKey = (params?: GetFieldsValuesParams) => {
-	return ['getFieldsValues', ...(params ? [params] : [])] as const;
-};
-
-export const getGetFieldsValuesQueryOptions = <
-	TData = Awaited<ReturnType<typeof getFieldsValues>>,
-	TError = RenderErrorResponseDTO
->(
-	params?: GetFieldsValuesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getFieldsValues>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetFieldsValuesQueryKey(params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getFieldsValues>>> = ({
-		signal,
-	}) => getFieldsValues(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getFieldsValues>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetFieldsValuesQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getFieldsValues>>
->;
-export type GetFieldsValuesQueryError = RenderErrorResponseDTO;
-
-/**
- * @summary Get field values
- */
-
-export function useGetFieldsValues<
-	TData = Awaited<ReturnType<typeof getFieldsValues>>,
-	TError = RenderErrorResponseDTO
->(
-	params?: GetFieldsValuesParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getFieldsValues>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetFieldsValuesQueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get field values
- */
-export const invalidateGetFieldsValues = async (
-	queryClient: QueryClient,
-	params?: GetFieldsValuesParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetFieldsValuesQueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};

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

@@ -1049,7 +1049,7 @@ export interface Querybuildertypesv5OrderByKeyDTO {
 	/**
 	 * @type string
 	 */
-	name: string;
+	name?: string;
 	/**
 	 * @type string
 	 */
@@ -1141,79 +1141,6 @@ export interface RoletypesRoleDTO {
 	updatedAt?: Date;
 }
 
-/**
- * @nullable
- */
-export type TelemetrytypesGettableFieldKeysDTOKeys = {
-	[key: string]: TelemetrytypesTelemetryFieldKeyDTO[];
-} | null;
-
-export interface TelemetrytypesGettableFieldKeysDTO {
-	/**
-	 * @type boolean
-	 */
-	complete: boolean;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	keys: TelemetrytypesGettableFieldKeysDTOKeys;
-}
-
-export interface TelemetrytypesGettableFieldValuesDTO {
-	/**
-	 * @type boolean
-	 */
-	complete: boolean;
-	values: TelemetrytypesTelemetryFieldValuesDTO;
-}
-
-export interface TelemetrytypesTelemetryFieldKeyDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	fieldContext?: string;
-	/**
-	 * @type string
-	 */
-	fieldDataType?: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	signal?: string;
-	/**
-	 * @type string
-	 */
-	unit?: string;
-}
-
-export interface TelemetrytypesTelemetryFieldValuesDTO {
-	/**
-	 * @type array
-	 */
-	boolValues?: boolean[];
-	/**
-	 * @type array
-	 */
-	numberValues?: number[];
-	/**
-	 * @type array
-	 */
-	relatedValues?: string[];
-	/**
-	 * @type array
-	 */
-	stringValues?: string[];
-}
-
 export interface TypesChangePasswordRequestDTO {
 	/**
 	 * @type string
@@ -1661,132 +1588,6 @@ export type DeleteAuthDomainPathParameters = {
 export type UpdateAuthDomainPathParameters = {
 	id: string;
 };
-export type GetFieldsKeysParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	signal?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	source?: string;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 * @description undefined
-	 */
-	startUnixMilli?: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 * @description undefined
-	 */
-	endUnixMilli?: number;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	fieldContext?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	fieldDataType?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	metricName?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	searchText?: string;
-};
-
-export type GetFieldsKeys200 = {
-	data?: TelemetrytypesGettableFieldKeysDTO;
-	/**
-	 * @type string
-	 */
-	status?: string;
-};
-
-export type GetFieldsValuesParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	signal?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	source?: string;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 * @description undefined
-	 */
-	startUnixMilli?: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 * @description undefined
-	 */
-	endUnixMilli?: number;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	fieldContext?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	fieldDataType?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	metricName?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	searchText?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	existingQuery?: string;
-};
-
-export type GetFieldsValues200 = {
-	data?: TelemetrytypesGettableFieldValuesDTO;
-	/**
-	 * @type string
-	 */
-	status?: string;
-};
-
 export type GetResetPasswordTokenPathParameters = {
 	id: string;
 };

frontend/src/api/infraMonitoring/getK8sClustersList.ts

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

frontend/src/api/infraMonitoring/getK8sDaemonSetsList.ts

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

frontend/src/api/infraMonitoring/getK8sDeploymentsList.ts

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

frontend/src/api/infraMonitoring/getK8sJobsList.ts

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

frontend/src/api/infraMonitoring/getK8sNamespacesList.ts

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

frontend/src/api/infraMonitoring/getK8sNodesList.ts

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

frontend/src/api/infraMonitoring/getK8sPodsList.ts

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

frontend/src/api/infraMonitoring/getK8sVolumesList.ts

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

frontend/src/api/infraMonitoring/getsK8sStatefulSetsList.ts

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

frontend/src/api/utils.ts

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

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

@@ -18,7 +18,6 @@ import '@signozhq/checkbox';
 import '@signozhq/combobox';
 import '@signozhq/command';
 import '@signozhq/design-tokens';
-import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';
 import '@signozhq/resizable';

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/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -648,13 +648,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 											) : (
 												<Typography.Text
 													className="value-string"
-													ellipsis={{
-														tooltip: {
-															placement: 'top',
-															mouseEnterDelay: 0.2,
-															mouseLeaveDelay: 0,
-														},
-													}}
+													ellipsis={{ tooltip: { placement: 'top' } }}
 												>
 													{String(value)}
 												</Typography.Text>

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

@@ -1,7 +1,6 @@
 const ROUTES = {
 	SIGN_UP: '/signup',
 	LOGIN: '/login',
-	FORGOT_PASSWORD: '/forgot-password',
 	HOME: '/home',
 	SERVICE_METRICS: '/services/:servicename',
 	SERVICE_TOP_LEVEL_OPERATIONS: '/services/:servicename/top-level-operations',

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/ApiMonitoring/Explorer/Domains/DomainList.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { LoadingOutlined } from '@ant-design/icons';
-import { Spin, Table } from 'antd';
+import { Spin, Table, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
@@ -14,13 +14,11 @@ import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useListOverview } from 'hooks/thirdPartyApis/useListOverview';
 import { get } from 'lodash-es';
-import { MoveUpRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import DOCLINKS from 'utils/docLinks';
 
 import { ApiMonitoringHardcodedAttributeKeys } from '../../constants';
 import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
@@ -127,67 +125,51 @@ function DomainList(): JSX.Element {
 					hardcodedAttributeKeys={ApiMonitoringHardcodedAttributeKeys}
 				/>
 			</div>
-			{!isFetching && !isLoading && formattedDataForTable.length === 0 && (
-				<div className="no-filtered-domains-message-container">
-					<div className="no-filtered-domains-message-content">
-						<img
-							src="/Icons/emptyState.svg"
-							alt="thinking-emoji"
-							className="empty-state-svg"
-						/>
+			<Table
+				className={cx('api-monitoring-domain-list-table')}
+				dataSource={isFetching || isLoading ? [] : formattedDataForTable}
+				columns={columnsConfig}
+				loading={{
+					spinning: isFetching || isLoading,
+					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+				}}
+				locale={{
+					emptyText:
+						isFetching || isLoading ? null : (
+							<div className="no-filtered-domains-message-container">
+								<div className="no-filtered-domains-message-content">
+									<img
+										src="/Icons/emptyState.svg"
+										alt="thinking-emoji"
+										className="empty-state-svg"
+									/>
 
-						<div className="no-filtered-domains-message">
-							<div className="no-domain-title">
-								No External API calls detected with applied filters.
+									<Typography.Text className="no-filtered-domains-message">
+										This query had no results. Edit your query and try again!
+									</Typography.Text>
+								</div>
 							</div>
-							<div className="no-domain-subtitle">
-								Ensure all HTTP client spans are being sent with kind as{' '}
-								<span className="attribute">Client</span> and url set in{' '}
-								<span className="attribute">url.full</span> or{' '}
-								<span className="attribute">http.url</span> attribute.
-							</div>
-							<a
-								href={DOCLINKS.EXTERNAL_API_MONITORING}
-								target="_blank"
-								rel="noreferrer"
-								className="external-api-doc-link"
-							>
-								Learn how External API monitoring works in SigNoz{' '}
-								<MoveUpRight size={14} />
-							</a>
-						</div>
-					</div>
-				</div>
-			)}
-			{(isFetching || isLoading || formattedDataForTable.length > 0) && (
-				<Table
-					className="api-monitoring-domain-list-table"
-					dataSource={isFetching || isLoading ? [] : formattedDataForTable}
-					columns={columnsConfig}
-					loading={{
-						spinning: isFetching || isLoading,
-						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-					}}
-					scroll={{ x: true }}
-					tableLayout="fixed"
-					onRow={(record, index): { onClick: () => void; className: string } => ({
-						onClick: (): void => {
-							if (index !== undefined) {
-								const dataIndex = formattedDataForTable.findIndex(
-									(item) => item.key === record.key,
-								);
-								setSelectedDomainIndex(dataIndex);
-								setParams({ selectedDomain: record.domainName });
-								logEvent('API Monitoring: Domain name row clicked', {});
-							}
-						},
-						className: 'expanded-clickable-row',
-					})}
-					rowClassName={(_, index): string =>
-						index % 2 === 0 ? 'table-row-dark' : 'table-row-light'
-					}
-				/>
-			)}
+						),
+				}}
+				scroll={{ x: true }}
+				tableLayout="fixed"
+				onRow={(record, index): { onClick: () => void; className: string } => ({
+					onClick: (): void => {
+						if (index !== undefined) {
+							const dataIndex = formattedDataForTable.findIndex(
+								(item) => item.key === record.key,
+							);
+							setSelectedDomainIndex(dataIndex);
+							setParams({ selectedDomain: record.domainName });
+							logEvent('API Monitoring: Domain name row clicked', {});
+						}
+					},
+					className: 'expanded-clickable-row',
+				})}
+				rowClassName={(_, index): string =>
+					index % 2 === 0 ? 'table-row-dark' : 'table-row-light'
+				}
+			/>
 			{selectedDomainIndex !== -1 && (
 				<DomainDetails
 					domainData={formattedDataForTable[selectedDomainIndex]}

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

@@ -180,59 +180,10 @@
 
 	.no-filtered-domains-message {
 		margin-top: 8px;
-		display: flex;
-		gap: 8px;
-		flex-direction: column;
-
-		.no-domain-title {
-			color: var(--bg-vanilla-100, #fff);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 20px; /* 142.857% */
-		}
-
-		.no-domain-subtitle {
-			color: var(--bg-vanilla-400, #c0c1c3);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-
-			.attribute {
-				font-family: 'Space Mono';
-			}
-		}
-
-		.external-api-doc-link {
-			display: flex;
-			flex-direction: row;
-			gap: 4px;
-			align-items: center;
-		}
 	}
 }
 
 .lightMode {
-	.no-filtered-domains-message-container {
-		.no-filtered-domains-message-content {
-			.no-filtered-domains-message {
-				.no-domain-title {
-					color: var(--text-ink-500);
-				}
-
-				.no-domain-subtitle {
-					color: var(--text-ink-400);
-
-					.attribute {
-						font-family: 'Space Mono';
-					}
-				}
-			}
-		}
-	}
 	.api-monitoring-domain-list-table {
 		.ant-table {
 			.ant-table-thead > tr > th {

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

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

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

@@ -1,104 +0,0 @@
-import { useCallback, useRef } from 'react';
-import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
-import Legend from 'lib/uPlotV2/components/Legend/Legend';
-import {
-	LegendPosition,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
-import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
-import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
-import noop from 'lodash-es/noop';
-import uPlot from 'uplot';
-
-import { ChartProps } from '../types';
-
-const TOOLTIP_WIDTH_PADDING = 60;
-const TOOLTIP_MIN_WIDTH = 200;
-
-export default function ChartWrapper({
-	legendConfig = { position: LegendPosition.BOTTOM },
-	config,
-	data,
-	width: containerWidth,
-	height: containerHeight,
-	showTooltip = true,
-	canPinTooltip = false,
-	syncMode,
-	syncKey,
-	onDestroy = noop,
-	children,
-	layoutChildren,
-	renderTooltip,
-	'data-testid': testId,
-}: ChartProps): JSX.Element {
-	const plotInstanceRef = useRef<uPlot | null>(null);
-
-	const legendComponent = useCallback(
-		(averageLegendWidth: number): React.ReactNode => {
-			return (
-				<Legend
-					config={config}
-					position={legendConfig.position}
-					averageLegendWidth={averageLegendWidth}
-				/>
-			);
-		},
-		[config, legendConfig.position],
-	);
-
-	const renderTooltipCallback = useCallback(
-		(args: TooltipRenderArgs): React.ReactNode => {
-			if (renderTooltip) {
-				return renderTooltip(args);
-			}
-			return null;
-		},
-		[renderTooltip],
-	);
-
-	return (
-		<PlotContextProvider>
-			<ChartLayout
-				config={config}
-				containerWidth={containerWidth}
-				containerHeight={containerHeight}
-				legendConfig={legendConfig}
-				legendComponent={legendComponent}
-				layoutChildren={layoutChildren}
-			>
-				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
-					<UPlotChart
-						config={config}
-						data={data}
-						width={chartWidth}
-						height={chartHeight}
-						plotRef={(plot): void => {
-							plotInstanceRef.current = plot;
-						}}
-						onDestroy={(plot: uPlot): void => {
-							plotInstanceRef.current = null;
-							onDestroy(plot);
-						}}
-						data-testid={testId}
-					>
-						{children}
-						{showTooltip && (
-							<TooltipPlugin
-								config={config}
-								canPinTooltip={canPinTooltip}
-								syncMode={syncMode}
-								maxWidth={Math.max(
-									TOOLTIP_MIN_WIDTH,
-									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
-								)}
-								syncKey={syncKey}
-								render={renderTooltipCallback}
-							/>
-						)}
-					</UPlotChart>
-				)}
-			</ChartLayout>
-		</PlotContextProvider>
-	);
-}

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

@@ -1,46 +1,104 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import TimeSeriesTooltip from 'lib/uPlotV2/components/Tooltip/TimeSeriesTooltip';
-import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
+import { useCallback, useRef } from 'react';
+import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
+import Legend from 'lib/uPlotV2/components/Legend/Legend';
+import Tooltip from 'lib/uPlotV2/components/Tooltip/Tooltip';
 import {
-	TimeSeriesTooltipProps,
+	LegendPosition,
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
+import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
+import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
+import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
+import _noop from 'lodash-es/noop';
+import uPlot from 'uplot';
 
-import { TimeSeriesChartProps } from '../types';
+import { ChartProps } from '../types';
 
-export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const { children, renderTooltip: customRenderTooltip, ...rest } = props;
+const TOOLTIP_WIDTH_PADDING = 60;
+const TOOLTIP_MIN_WIDTH = 200;
 
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			if (customRenderTooltip) {
-				return customRenderTooltip(props);
-			}
-			const content = buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: rest.yAxisUnit ?? '',
-				decimalPrecision: rest.decimalPrecision,
-			});
-			const tooltipProps: TimeSeriesTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-				content,
-			};
-			return <TimeSeriesTooltip {...tooltipProps} />;
+export default function TimeSeries({
+	legendConfig = { position: LegendPosition.BOTTOM },
+	config,
+	data,
+	width: containerWidth,
+	height: containerHeight,
+	disableTooltip = false,
+	canPinTooltip = false,
+	timezone,
+	yAxisUnit,
+	decimalPrecision,
+	syncMode,
+	syncKey,
+	onDestroy = _noop,
+	children,
+	layoutChildren,
+	'data-testid': testId,
+}: ChartProps): JSX.Element {
+	const plotInstanceRef = useRef<uPlot | null>(null);
+
+	const legendComponent = useCallback(
+		(averageLegendWidth: number): React.ReactNode => {
+			return (
+				<Legend
+					config={config}
+					position={legendConfig.position}
+					averageLegendWidth={averageLegendWidth}
+				/>
+			);
 		},
-		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[config, legendConfig.position],
 	);
 
 	return (
-		<ChartWrapper {...rest} renderTooltip={renderTooltip}>
-			{children}
-		</ChartWrapper>
+		<PlotContextProvider>
+			<ChartLayout
+				config={config}
+				containerWidth={containerWidth}
+				containerHeight={containerHeight}
+				legendConfig={legendConfig}
+				legendComponent={legendComponent}
+				layoutChildren={layoutChildren}
+			>
+				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
+					<UPlotChart
+						config={config}
+						data={data}
+						width={chartWidth}
+						height={chartHeight}
+						plotRef={(plot): void => {
+							plotInstanceRef.current = plot;
+						}}
+						onDestroy={(plot: uPlot): void => {
+							plotInstanceRef.current = null;
+							onDestroy(plot);
+						}}
+						data-testid={testId}
+					>
+						{children}
+						{!disableTooltip && (
+							<TooltipPlugin
+								config={config}
+								canPinTooltip={canPinTooltip}
+								syncMode={syncMode}
+								maxWidth={Math.max(
+									TOOLTIP_MIN_WIDTH,
+									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
+								)}
+								syncKey={syncKey}
+								render={(props: TooltipRenderArgs): React.ReactNode => (
+									<Tooltip
+										{...props}
+										timezone={timezone}
+										yAxisUnit={yAxisUnit}
+										decimalPrecision={decimalPrecision}
+									/>
+								)}
+							/>
+						)}
+					</UPlotChart>
+				)}
+			</ChartLayout>
+		</PlotContextProvider>
 	);
 }

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

@@ -1,39 +1,29 @@
 import { PrecisionOption } from 'components/Graph/types';
-import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
+import { LegendConfig } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 interface BaseChartProps {
 	width: number;
 	height: number;
-	showTooltip?: boolean;
+	disableTooltip?: boolean;
 	timezone: string;
+	syncMode?: DashboardCursorSync;
+	syncKey?: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-	renderTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
-	'data-testid'?: string;
 }
-interface UPlotBasedChartProps {
+
+interface TimeSeriesChartProps extends BaseChartProps {
 	config: UPlotConfigBuilder;
+	legendConfig: LegendConfig;
 	data: uPlot.AlignedData;
-	syncMode?: DashboardCursorSync;
-	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
 	onDestroy?: (plot: uPlot) => void;
 	children?: React.ReactNode;
 	layoutChildren?: React.ReactNode;
+	'data-testid'?: string;
 }
 
-export interface TimeSeriesChartProps
-	extends BaseChartProps,
-		UPlotBasedChartProps {
-	legendConfig: LegendConfig;
-}
-
-export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
-	legendConfig: LegendConfig;
-	isStackedBarChart?: boolean;
-}
-
-export type ChartProps = TimeSeriesChartProps | BarChartProps;
+export type ChartProps = TimeSeriesChartProps;

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

@@ -6,6 +6,7 @@ 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 { LineInterpolation } from 'lib/uPlotV2/config/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
@@ -72,28 +73,55 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	}, [queryResponse?.data?.payload]);
 
 	const config = useMemo(() => {
+		const tzDate = (timestamp: number): Date =>
+			uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+
 		return prepareUPlotConfig({
-			widget,
-			isDarkMode,
-			currentQuery: widget.query,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
+			widgetId: widget.id || '',
 			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			timezone,
-			panelMode,
+			tzDate,
 			minTimeScale: minTimeScale,
 			maxTimeScale: maxTimeScale,
+			isLogScale: widget?.isLogScale ?? false,
+			thresholds: {
+				scaleKey: 'y',
+				thresholds: (widget.thresholds || []).map((threshold) => ({
+					thresholdValue: threshold.thresholdValue ?? 0,
+					thresholdColor: threshold.thresholdColor,
+					thresholdUnit: threshold.thresholdUnit,
+					thresholdLabel: threshold.thresholdLabel,
+				})),
+				yAxisUnit: widget.yAxisUnit,
+			},
+			yAxisUnit: widget.yAxisUnit || '',
+			softMin: widget.softMin === undefined ? null : widget.softMin,
+			softMax: widget.softMax === undefined ? null : widget.softMax,
+			spanGaps: false,
+			colorMapping: widget.customLegendColors ?? {},
+			lineInterpolation: LineInterpolation.Spline,
+			isDarkMode,
+			onClick: clickHandlerWithContextMenu,
+			onDragSelect,
+			currentQuery: widget.query,
+			panelMode,
 		});
 	}, [
-		widget,
+		widget.id,
+		maxTimeScale,
+		minTimeScale,
+		timezone.value,
+		widget.customLegendColors,
+		widget.isLogScale,
+		widget.softMax,
+		widget.softMin,
 		isDarkMode,
+		queryResponse?.data?.payload,
+		widget.query,
+		widget.thresholds,
+		widget.yAxisUnit,
+		panelMode,
 		clickHandlerWithContextMenu,
 		onDragSelect,
-		queryResponse?.data?.payload,
-		panelMode,
-		minTimeScale,
-		maxTimeScale,
-		timezone,
 	]);
 
 	const layoutChildren = useMemo(() => {

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

@@ -1,4 +1,3 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	fillMissingXAxisTimestamps,
@@ -6,20 +5,23 @@ import {
 } from 'container/DashboardContainer/visualization/panels/utils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import onClickPlugin, {
+	OnClickPluginOpts,
+} from 'lib/uPlotLib/plugins/onClickPlugin';
 import {
+	DistributionType,
 	DrawStyle,
 	LineInterpolation,
 	LineStyle,
+	SelectionPreferencesSource,
 	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { PanelMode } from '../types';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
 
 export const prepareChartData = (
 	apiResponse: MetricRangePayloadProps,
@@ -32,39 +34,112 @@ export const prepareChartData = (
 };
 
 export const prepareUPlotConfig = ({
-	widget,
-	isDarkMode,
-	currentQuery,
-	onClick,
-	onDragSelect,
+	widgetId,
 	apiResponse,
-	timezone,
-	panelMode,
+	tzDate,
 	minTimeScale,
 	maxTimeScale,
+	isLogScale,
+	thresholds,
+	softMin,
+	softMax,
+	spanGaps,
+	colorMapping,
+	lineInterpolation,
+	isDarkMode,
+	currentQuery,
+	onDragSelect,
+	onClick,
+	yAxisUnit,
+	panelMode,
 }: {
-	widget: Widgets;
-	isDarkMode: boolean;
-	currentQuery: Query;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
+	widgetId: string;
 	apiResponse: MetricRangePayloadProps;
-	timezone: Timezone;
+	tzDate: uPlot.LocalDateFromUnix;
+	minTimeScale: number | undefined;
+	maxTimeScale: number | undefined;
+	isLogScale: boolean;
+	softMin: number | null;
+	softMax: number | null;
+	spanGaps: boolean;
+	colorMapping: Record<string, string>;
+	lineInterpolation: LineInterpolation;
+	isDarkMode: boolean;
+	thresholds: ThresholdsDrawHookOptions;
+	currentQuery: Query;
+	yAxisUnit: string;
+	onDragSelect: (startTime: number, endTime: number) => void;
+	onClick?: OnClickPluginOpts['onClick'];
 	panelMode: PanelMode;
-	minTimeScale?: number;
-	maxTimeScale?: number;
 }): UPlotConfigBuilder => {
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		onClick,
+	const builder = new UPlotConfigBuilder({
 		onDragSelect,
-		apiResponse,
-		timezone,
-		panelMode,
+		widgetId,
+		tzDate,
+		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
+		selectionPreferencesSource: [
+			PanelMode.DASHBOARD_VIEW,
+			PanelMode.STANDALONE_VIEW,
+		].includes(panelMode)
+			? SelectionPreferencesSource.LOCAL_STORAGE
+			: SelectionPreferencesSource.IN_MEMORY,
+	});
+
+	// X scale – time axis
+	builder.addScale({
+		scaleKey: 'x',
+		time: true,
+		min: minTimeScale,
+		max: maxTimeScale,
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
+			? DistributionType.Logarithmic
+			: DistributionType.Linear,
+	});
+
+	// Y scale – value axis, driven primarily by softMin/softMax and data
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+		min: undefined,
+		max: undefined,
+		softMin: softMin ?? undefined,
+		softMax: softMax ?? undefined,
+		thresholds,
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
+			? DistributionType.Logarithmic
+			: DistributionType.Linear,
+	});
+
+	builder.addThresholds(thresholds);
+
+	if (typeof onClick === 'function') {
+		builder.addPlugin(
+			onClickPlugin({
+				onClick,
+				apiResponse,
+			}),
+		);
+	}
+
+	builder.addAxis({
+		scaleKey: 'x',
+		show: true,
+		side: 2,
+		isDarkMode,
+		isLogScale: false,
+		panelType: PANEL_TYPES.TIME_SERIES,
+	});
+
+	builder.addAxis({
+		scaleKey: 'y',
+		show: true,
+		side: 3,
+		isDarkMode,
+		isLogScale: false,
+		yAxisUnit,
 		panelType: PANEL_TYPES.TIME_SERIES,
-		minTimeScale,
-		maxTimeScale,
 	});
 
 	apiResponse.data?.result?.forEach((series) => {
@@ -82,16 +157,14 @@ export const prepareUPlotConfig = ({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Line,
 			label: label,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: true,
+			colorMapping,
+			spanGaps,
 			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
+			lineInterpolation,
 			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
-			panelType: PANEL_TYPES.TIME_SERIES,
 		});
 	});
-
 	return builder;
 };

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

@@ -1,127 +0,0 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import onClickPlugin, {
-	OnClickPluginOpts,
-} from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DistributionType,
-	SelectionPreferencesSource,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-import { PanelMode } from '../types';
-
-export interface BaseConfigBuilderProps {
-	widget: Widgets;
-	apiResponse: MetricRangePayloadProps;
-	isDarkMode: boolean;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	panelType: PANEL_TYPES;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}
-
-export function buildBaseConfig({
-	widget,
-	isDarkMode,
-	onClick,
-	onDragSelect,
-	apiResponse,
-	timezone,
-	panelMode,
-	panelType,
-	minTimeScale,
-	maxTimeScale,
-}: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
-
-	const builder = new UPlotConfigBuilder({
-		onDragSelect,
-		widgetId: widget.id,
-		tzDate,
-		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: [
-			PanelMode.DASHBOARD_VIEW,
-			PanelMode.STANDALONE_VIEW,
-		].includes(panelMode)
-			? SelectionPreferencesSource.LOCAL_STORAGE
-			: SelectionPreferencesSource.IN_MEMORY,
-	});
-
-	const thresholdOptions: ThresholdsDrawHookOptions = {
-		scaleKey: 'y',
-		thresholds: (widget.thresholds || []).map((threshold) => ({
-			thresholdValue: threshold.thresholdValue ?? 0,
-			thresholdColor: threshold.thresholdColor,
-			thresholdUnit: threshold.thresholdUnit,
-			thresholdLabel: threshold.thresholdLabel,
-		})),
-		yAxisUnit: widget.yAxisUnit,
-	};
-
-	builder.addThresholds(thresholdOptions);
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: true,
-		min: minTimeScale,
-		max: maxTimeScale,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	// Y scale – value axis, driven primarily by softMin/softMax and data
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		min: undefined,
-		max: undefined,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
-		thresholds: thresholdOptions,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	if (typeof onClick === 'function') {
-		builder.addPlugin(
-			onClickPlugin({
-				onClick,
-				apiResponse,
-			}),
-		);
-	}
-
-	builder.addAxis({
-		scaleKey: 'x',
-		show: true,
-		side: 2,
-		isDarkMode,
-		isLogScale: widget.isLogScale,
-		panelType,
-	});
-
-	builder.addAxis({
-		scaleKey: 'y',
-		show: true,
-		side: 3,
-		isDarkMode,
-		isLogScale: widget.isLogScale,
-		yAxisUnit: widget.yAxisUnit,
-		panelType,
-	});
-
-	return builder;
-}

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

@@ -1,93 +0,0 @@
-.forgot-password-title {
-	font-family: var(--label-large-600-font-family);
-	font-size: var(--label-large-600-font-size);
-	font-weight: var(--label-large-600-font-weight);
-	letter-spacing: var(--label-large-600-letter-spacing);
-	line-height: 1.45;
-	color: var(--l1-foreground);
-	margin: 0;
-}
-
-.forgot-password-description {
-	font-family: var(--paragraph-base-400-font-family);
-	font-size: var(--paragraph-base-400-font-size);
-	font-weight: var(--paragraph-base-400-font-weight);
-	line-height: var(--paragraph-base-400-line-height);
-	letter-spacing: -0.065px;
-	color: var(--l2-foreground);
-	margin: 0;
-	text-align: center;
-	max-width: 317px;
-}
-
-.forgot-password-form {
-	width: 100%;
-
-	// Label styling
-	.forgot-password-label {
-		font-family: Inter, sans-serif;
-		font-size: 13px;
-		font-weight: 600;
-		line-height: 1;
-		letter-spacing: -0.065px;
-		color: var(--l1-foreground);
-		margin-bottom: 12px;
-		display: block;
-
-		.lightMode & {
-			color: var(--text-ink-500);
-		}
-	}
-
-	// Parent container for fields
-	.forgot-password-field {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-
-	&.ant-form {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-
-		.ant-form-item {
-			margin-bottom: 0px;
-			width: 100%;
-		}
-	}
-}
-
-.forgot-password-actions {
-	display: flex;
-	gap: 12px;
-	width: 100%;
-
-	> .forgot-password-back-button,
-	> .login-submit-btn {
-		flex: 1 1 0%;
-	}
-}
-
-.forgot-password-back-button {
-	height: 32px;
-	padding: 10px 16px;
-	border-radius: 2px;
-	font-family: Inter, sans-serif;
-	font-size: 11px;
-	font-weight: 500;
-	line-height: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	background: var(--l3-background);
-	border: 1px solid var(--l3-border);
-	color: var(--l1-foreground);
-
-	&:hover:not(:disabled) {
-		background: var(--l3-border);
-		border-color: var(--l3-border);
-		opacity: 0.9;
-	}
-}

frontend/src/container/ForgotPassword/SuccessScreen.tsx

@@ -1,41 +0,0 @@
-import { Button } from '@signozhq/button';
-import { ArrowLeft, Mail } from '@signozhq/icons';
-
-interface SuccessScreenProps {
-	onBackToLogin: () => void;
-}
-
-function SuccessScreen({ onBackToLogin }: SuccessScreenProps): JSX.Element {
-	return (
-		<div className="login-form-container">
-			<div className="forgot-password-form">
-				<div className="login-form-header">
-					<div className="login-form-emoji">
-						<Mail size={32} />
-					</div>
-					<h4 className="forgot-password-title">Check your email</h4>
-					<p className="forgot-password-description">
-						We&apos;ve sent a password reset link to your email. Please check your
-						inbox and follow the instructions to reset your password.
-					</p>
-				</div>
-
-				<div className="login-form-actions forgot-password-actions">
-					<Button
-						variant="solid"
-						color="primary"
-						type="button"
-						data-testid="back-to-login"
-						className="login-submit-btn"
-						onClick={onBackToLogin}
-						prefixIcon={<ArrowLeft size={12} />}
-					>
-						Back to login
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default SuccessScreen;

frontend/src/container/ForgotPassword/__tests__/ForgotPassword.test.tsx

@@ -1,402 +0,0 @@
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
-import {
-	createErrorResponse,
-	handleInternalServerError,
-	rest,
-	server,
-} from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
-
-import ForgotPassword, { ForgotPasswordRouteState } from '../index';
-
-// Mock dependencies
-jest.mock('lib/history', () => ({
-	__esModule: true,
-	default: {
-		push: jest.fn(),
-		location: {
-			search: '',
-		},
-	},
-}));
-
-const mockHistoryPush = history.push as jest.MockedFunction<
-	typeof history.push
->;
-
-const FORGOT_PASSWORD_ENDPOINT = '*/api/v2/factor_password/forgot';
-
-// Mock data
-const mockSingleOrg: OrgSessionContext[] = [
-	{
-		id: 'org-1',
-		name: 'Test Organization',
-		authNSupport: {
-			password: [{ provider: 'email_password' }],
-			callback: [],
-		},
-	},
-];
-
-const mockMultipleOrgs: OrgSessionContext[] = [
-	{
-		id: 'org-1',
-		name: 'Organization One',
-		authNSupport: {
-			password: [{ provider: 'email_password' }],
-			callback: [],
-		},
-	},
-	{
-		id: 'org-2',
-		name: 'Organization Two',
-		authNSupport: {
-			password: [{ provider: 'email_password' }],
-			callback: [],
-		},
-	},
-];
-
-const TEST_EMAIL = 'jest.test@signoz.io';
-
-const defaultProps: ForgotPasswordRouteState = {
-	email: TEST_EMAIL,
-	orgs: mockSingleOrg,
-};
-
-const multiOrgProps: ForgotPasswordRouteState = {
-	email: TEST_EMAIL,
-	orgs: mockMultipleOrgs,
-};
-
-describe('ForgotPassword Component', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	describe('Initial Render', () => {
-		it('renders forgot password form with all required elements', () => {
-			render(<ForgotPassword {...defaultProps} />);
-
-			expect(screen.getByText(/forgot your password\?/i)).toBeInTheDocument();
-			expect(
-				screen.getByText(/send a reset link to your inbox/i),
-			).toBeInTheDocument();
-			expect(screen.getByTestId('email')).toBeInTheDocument();
-			expect(screen.getByTestId('forgot-password-submit')).toBeInTheDocument();
-			expect(screen.getByTestId('forgot-password-back')).toBeInTheDocument();
-		});
-
-		it('pre-fills email from props', () => {
-			render(<ForgotPassword {...defaultProps} />);
-
-			const emailInput = screen.getByTestId('email');
-			expect(emailInput).toHaveValue(TEST_EMAIL);
-		});
-
-		it('disables email input field', () => {
-			render(<ForgotPassword {...defaultProps} />);
-
-			const emailInput = screen.getByTestId('email');
-			expect(emailInput).toBeDisabled();
-		});
-
-		it('does not show organization dropdown for single org', () => {
-			render(<ForgotPassword {...defaultProps} />);
-
-			expect(screen.queryByTestId('orgId')).not.toBeInTheDocument();
-			expect(screen.queryByText('Organization Name')).not.toBeInTheDocument();
-		});
-
-		it('enables submit button when email is provided with single org', () => {
-			render(<ForgotPassword {...defaultProps} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			expect(submitButton).not.toBeDisabled();
-		});
-	});
-
-	describe('Multiple Organizations', () => {
-		it('shows organization dropdown when multiple orgs exist', () => {
-			render(<ForgotPassword {...multiOrgProps} />);
-
-			expect(screen.getByTestId('orgId')).toBeInTheDocument();
-			expect(screen.getByText('Organization Name')).toBeInTheDocument();
-		});
-
-		it('disables submit button when org is not selected', () => {
-			const propsWithoutOrgId: ForgotPasswordRouteState = {
-				email: TEST_EMAIL,
-				orgs: mockMultipleOrgs,
-			};
-
-			render(<ForgotPassword {...propsWithoutOrgId} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			expect(submitButton).toBeDisabled();
-		});
-
-		it('enables submit button after selecting an organization', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<ForgotPassword {...multiOrgProps} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			expect(submitButton).toBeDisabled();
-
-			// Click on the dropdown to reveal the options
-			await user.click(screen.getByRole('combobox'));
-			await user.click(screen.getByText('Organization One'));
-
-			await waitFor(() => {
-				expect(submitButton).not.toBeDisabled();
-			});
-		});
-
-		it('pre-selects organization when orgId is provided', () => {
-			const propsWithOrgId: ForgotPasswordRouteState = {
-				email: TEST_EMAIL,
-				orgId: 'org-1',
-				orgs: mockMultipleOrgs,
-			};
-
-			render(<ForgotPassword {...propsWithOrgId} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			expect(submitButton).not.toBeDisabled();
-		});
-	});
-
-	describe('Form Submission - Success', () => {
-		it('successfully submits forgot password request and shows success screen', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ status: 'success' })),
-				),
-			);
-
-			render(<ForgotPassword {...defaultProps} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			await user.click(submitButton);
-
-			expect(await screen.findByText(/check your email/i)).toBeInTheDocument();
-			expect(
-				screen.getByText(/we've sent a password reset link/i),
-			).toBeInTheDocument();
-		});
-
-		it('shows back to login button on success screen', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ status: 'success' })),
-				),
-			);
-
-			render(<ForgotPassword {...defaultProps} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			await user.click(submitButton);
-
-			expect(await screen.findByTestId('back-to-login')).toBeInTheDocument();
-		});
-
-		it('redirects to login when clicking back to login on success screen', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ status: 'success' })),
-				),
-			);
-
-			render(<ForgotPassword {...defaultProps} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			await user.click(submitButton);
-
-			expect(await screen.findByTestId('back-to-login')).toBeInTheDocument();
-
-			const backToLoginButton = screen.getByTestId('back-to-login');
-			await user.click(backToLoginButton);
-
-			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
-		});
-	});
-
-	describe('Form Submission - Error Handling', () => {
-		it('displays error message when forgot password API fails', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(
-					FORGOT_PASSWORD_ENDPOINT,
-					createErrorResponse(400, 'USER_NOT_FOUND', 'User not found'),
-				),
-			);
-
-			render(<ForgotPassword {...defaultProps} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			await user.click(submitButton);
-
-			expect(await screen.findByText(/user not found/i)).toBeInTheDocument();
-		});
-
-		it('displays error message when API returns server error', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(rest.post(FORGOT_PASSWORD_ENDPOINT, handleInternalServerError));
-
-			render(<ForgotPassword {...defaultProps} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			await user.click(submitButton);
-
-			expect(
-				await screen.findByText(/internal server error occurred/i),
-			).toBeInTheDocument();
-		});
-
-		it('clears error message on new submission attempt', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			let requestCount = 0;
-
-			server.use(
-				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) => {
-					requestCount += 1;
-					if (requestCount === 1) {
-						return res(
-							ctx.status(400),
-							ctx.json({
-								error: {
-									code: 'USER_NOT_FOUND',
-									message: 'User not found',
-								},
-							}),
-						);
-					}
-					return res(ctx.status(200), ctx.json({ status: 'success' }));
-				}),
-			);
-
-			render(<ForgotPassword {...defaultProps} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			await user.click(submitButton);
-
-			expect(await screen.findByText(/user not found/i)).toBeInTheDocument();
-
-			// Click submit again
-			await user.click(submitButton);
-
-			await waitFor(() => {
-				expect(screen.queryByText(/user not found/i)).not.toBeInTheDocument();
-			});
-			expect(await screen.findByText(/check your email/i)).toBeInTheDocument();
-		});
-	});
-
-	describe('Navigation', () => {
-		it('redirects to login when clicking back button on form', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<ForgotPassword {...defaultProps} />);
-
-			const backButton = screen.getByTestId('forgot-password-back');
-			await user.click(backButton);
-
-			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
-		});
-	});
-
-	describe('Loading States', () => {
-		it('shows loading state during API call', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
-					res(ctx.delay(100), ctx.status(200), ctx.json({ status: 'success' })),
-				),
-			);
-
-			render(<ForgotPassword {...defaultProps} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			await user.click(submitButton);
-
-			// Button should show loading state
-			expect(await screen.findByText(/sending\.\.\./i)).toBeInTheDocument();
-		});
-
-		it('disables submit button during loading', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
-					res(ctx.delay(100), ctx.status(200), ctx.json({ status: 'success' })),
-				),
-			);
-
-			render(<ForgotPassword {...defaultProps} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			await user.click(submitButton);
-
-			await waitFor(() => {
-				expect(submitButton).toBeDisabled();
-			});
-		});
-	});
-
-	describe('Edge Cases', () => {
-		it('handles empty email gracefully', () => {
-			const propsWithEmptyEmail: ForgotPasswordRouteState = {
-				email: '',
-				orgs: mockSingleOrg,
-			};
-
-			render(<ForgotPassword {...propsWithEmptyEmail} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			expect(submitButton).toBeDisabled();
-		});
-
-		it('handles whitespace-only email', () => {
-			const propsWithWhitespaceEmail: ForgotPasswordRouteState = {
-				email: '   ',
-				orgs: mockSingleOrg,
-			};
-
-			render(<ForgotPassword {...propsWithWhitespaceEmail} />);
-
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			expect(submitButton).toBeDisabled();
-		});
-
-		it('handles empty orgs array by disabling submission', () => {
-			const propsWithNoOrgs: ForgotPasswordRouteState = {
-				email: TEST_EMAIL,
-				orgs: [],
-			};
-
-			render(<ForgotPassword {...propsWithNoOrgs} />);
-
-			// Should not show org dropdown
-			expect(screen.queryByTestId('orgId')).not.toBeInTheDocument();
-			// Submit should be disabled because no orgId can be determined
-			const submitButton = screen.getByTestId('forgot-password-submit');
-			expect(submitButton).toBeDisabled();
-		});
-	});
-});

frontend/src/container/ForgotPassword/index.tsx

@@ -1,217 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { Button } from '@signozhq/button';
-import { ArrowLeft, ArrowRight } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { Form, Select } from 'antd';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { useForgotPassword } from 'api/generated/services/users';
-import { AxiosError } from 'axios';
-import AuthError from 'components/AuthError/AuthError';
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
-import { ErrorV2Resp } from 'types/api';
-import APIError from 'types/api/error';
-import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
-
-import SuccessScreen from './SuccessScreen';
-
-import './ForgotPassword.styles.scss';
-import 'container/Login/Login.styles.scss';
-
-type FormValues = {
-	email: string;
-	orgId: string;
-};
-
-export type ForgotPasswordRouteState = {
-	email: string;
-	orgId?: string;
-	orgs: OrgSessionContext[];
-};
-
-function ForgotPassword({
-	email,
-	orgId,
-	orgs,
-}: ForgotPasswordRouteState): JSX.Element {
-	const [form] = Form.useForm<FormValues>();
-	const {
-		mutate: forgotPasswordMutate,
-		isLoading,
-		isSuccess,
-		error: mutationError,
-	} = useForgotPassword();
-
-	const errorMessage = useMemo(() => {
-		if (!mutationError) {
-			return undefined;
-		}
-
-		try {
-			ErrorResponseHandlerV2(mutationError as AxiosError<ErrorV2Resp>);
-		} catch (apiError) {
-			return apiError as APIError;
-		}
-	}, [mutationError]);
-
-	const initialOrgId = useMemo((): string | undefined => {
-		if (orgId) {
-			return orgId;
-		}
-
-		if (orgs.length === 1) {
-			return orgs[0]?.id;
-		}
-
-		return undefined;
-	}, [orgId, orgs]);
-
-	const watchedEmail = Form.useWatch('email', form);
-	const selectedOrgId = Form.useWatch('orgId', form);
-
-	useEffect(() => {
-		form.setFieldsValue({
-			email,
-			orgId: initialOrgId,
-		});
-	}, [email, form, initialOrgId]);
-
-	const hasMultipleOrgs = orgs.length > 1;
-
-	const isSubmitEnabled = useMemo((): boolean => {
-		if (isLoading) {
-			return false;
-		}
-
-		if (!watchedEmail?.trim()) {
-			return false;
-		}
-
-		// Ensure we have an orgId (either selected from dropdown or the initial one)
-		const currentOrgId = hasMultipleOrgs ? selectedOrgId : initialOrgId;
-		return Boolean(currentOrgId);
-	}, [watchedEmail, selectedOrgId, isLoading, initialOrgId, hasMultipleOrgs]);
-
-	const handleSubmit = useCallback((): void => {
-		const values = form.getFieldsValue();
-		const currentOrgId = hasMultipleOrgs ? values.orgId : initialOrgId;
-
-		if (!currentOrgId) {
-			return;
-		}
-
-		// Call the forgot password API
-		forgotPasswordMutate({
-			data: {
-				email: values.email,
-				orgId: currentOrgId,
-				frontendBaseURL: window.location.origin,
-			},
-		});
-	}, [form, forgotPasswordMutate, initialOrgId, hasMultipleOrgs]);
-
-	const handleBackToLogin = useCallback((): void => {
-		history.push(ROUTES.LOGIN);
-	}, []);
-
-	// Success screen
-	if (isSuccess) {
-		return <SuccessScreen onBackToLogin={handleBackToLogin} />;
-	}
-
-	// Form screen
-	return (
-		<div className="login-form-container">
-			<Form
-				form={form}
-				onFinish={handleSubmit}
-				className="forgot-password-form"
-				initialValues={{
-					email,
-					orgId: initialOrgId,
-				}}
-			>
-				<div className="login-form-header">
-					<div className="login-form-emoji">
-						<img src="/svgs/tv.svg" alt="TV" width="32" height="32" />
-					</div>
-					<h4 className="forgot-password-title">Forgot your password?</h4>
-					<p className="forgot-password-description">
-						Send a reset link to your inbox and get back to monitoring.
-					</p>
-				</div>
-
-				<div className="login-form-card">
-					<div className="forgot-password-field">
-						<label className="forgot-password-label" htmlFor="forgotPasswordEmail">
-							Email address
-						</label>
-						<Form.Item name="email">
-							<Input
-								type="email"
-								id="forgotPasswordEmail"
-								data-testid="email"
-								required
-								disabled
-								className="login-form-input"
-							/>
-						</Form.Item>
-					</div>
-
-					{hasMultipleOrgs && (
-						<div className="forgot-password-field">
-							<label className="forgot-password-label" htmlFor="orgId">
-								Organization Name
-							</label>
-							<Form.Item
-								name="orgId"
-								rules={[{ required: true, message: 'Please select your organization' }]}
-							>
-								<Select
-									id="orgId"
-									data-testid="orgId"
-									className="login-form-input login-form-select-no-border"
-									placeholder="Select your organization"
-									options={orgs.map((org) => ({
-										value: org.id,
-										label: org.name || 'default',
-									}))}
-								/>
-							</Form.Item>
-						</div>
-					)}
-				</div>
-
-				{errorMessage && <AuthError error={errorMessage} />}
-
-				<div className="login-form-actions forgot-password-actions">
-					<Button
-						variant="solid"
-						type="button"
-						data-testid="forgot-password-back"
-						className="forgot-password-back-button"
-						onClick={handleBackToLogin}
-						prefixIcon={<ArrowLeft size={12} />}
-					>
-						Back to login
-					</Button>
-
-					<Button
-						disabled={!isSubmitEnabled}
-						loading={isLoading}
-						variant="solid"
-						color="primary"
-						type="submit"
-						data-testid="forgot-password-submit"
-						className="login-submit-btn"
-						suffixIcon={<ArrowRight size={12} />}
-					>
-						{isLoading ? 'Sending...' : 'Send reset link'}
-					</Button>
-				</div>
-			</Form>
-		</div>
-	);
-}
-
-export default ForgotPassword;

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

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

frontend/src/container/InfraMonitoringHosts/HostsList.tsx

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

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

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

frontend/src/container/InfraMonitoringHosts/utils.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -152,7 +152,7 @@ export const getK8sNodesListColumns = (
 	return columnsConfig as ColumnType<K8sNodesRowData>[];
 };
 
-const attributeToMetaKey: Record<string, keyof K8sNodesData['meta']> = {
+const dotToUnder: Record<string, keyof K8sNodesData['meta']> = {
 	'k8s.node.name': 'k8s_node_name',
 	'k8s.cluster.name': 'k8s_cluster_name',
 	'k8s.node.uid': 'k8s_node_uid',
@@ -168,8 +168,7 @@ const getGroupByEle = (
 		const rawKey = group.key as string;
 
 		// Choose mapped key if present, otherwise use rawKey
-		const metaKey = (attributeToMetaKey[rawKey] ??
-			rawKey) as keyof typeof node.meta;
+		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof node.meta;
 
 		const value = node.meta[metaKey];
 

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

@@ -27,6 +27,8 @@ import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
@@ -118,13 +120,21 @@ function K8sPodsList({
 		[currentQuery?.builder?.queryData],
 	);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const {
 		data: groupByFiltersData,
 		isLoading: isLoadingGroupByFilters,
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.PODS),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(
+				K8sCategory.PODS,
+				dotMetricsEnabled,
+			),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -234,6 +244,8 @@ function K8sPodsList({
 			enabled: !!query,
 			keepPreviousData: true,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const createFiltersForSelectedRowData = (
@@ -311,10 +323,15 @@ function K8sPodsList({
 		isLoading: isLoadingGroupedByRowData,
 		isError: isErrorGroupedByRowData,
 		refetch: fetchGroupedByRowData,
-	} = useGetK8sPodsList(fetchGroupedByRowDataQuery as K8sPodsListPayload, {
-		queryKey: groupedByRowDataQueryKey,
-		enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
-	});
+	} = useGetK8sPodsList(
+		fetchGroupedByRowDataQuery as K8sPodsListPayload,
+		{
+			queryKey: groupedByRowDataQueryKey,
+			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
+		},
+		undefined,
+		dotMetricsEnabled,
+	);
 
 	const podsData = useMemo(() => data?.payload?.data?.records || [], [data]);
 	const totalCount = data?.payload?.data?.total || 0;

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

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

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

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

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

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

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

@@ -236,7 +236,7 @@ export const getK8sStatefulSetsListColumns = (
 	return columnsConfig as ColumnType<K8sStatefulSetsRowData>[];
 };
 
-const attributeToMetaKey: Record<string, keyof K8sStatefulSetsData['meta']> = {
+const dotToUnder: Record<string, keyof K8sStatefulSetsData['meta']> = {
 	'k8s.namespace.name': 'k8s_namespace_name',
 	'k8s.statefulset.name': 'k8s_statefulset_name',
 };
@@ -251,7 +251,7 @@ const getGroupByEle = (
 		const rawKey = group.key as string;
 
 		// Choose mapped key if present, otherwise use rawKey
-		const metaKey = (attributeToMetaKey[rawKey] ??
+		const metaKey = (dotToUnder[rawKey] ??
 			rawKey) as keyof typeof statefulSet.meta;
 		const value = statefulSet.meta[metaKey];
 

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

@@ -26,6 +26,8 @@ import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
 import { getOrderByFromParams } from '../commonUtils';
 import {
 	GetK8sEntityToAggregateAttribute,
@@ -137,6 +139,11 @@ function K8sVolumesList({
 		}
 	}, [quickFiltersLastUpdated]);
 
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
 	const createFiltersForSelectedRowData = (
 		selectedRowData: K8sVolumesRowData,
 		groupBy: IBuilderQuery['groupBy'],
@@ -194,10 +201,15 @@ function K8sVolumesList({
 		isLoading: isLoadingGroupedByRowData,
 		isError: isErrorGroupedByRowData,
 		refetch: fetchGroupedByRowData,
-	} = useGetK8sVolumesList(fetchGroupedByRowDataQuery as K8sVolumesListPayload, {
-		queryKey: ['volumeList', fetchGroupedByRowDataQuery],
-		enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
-	});
+	} = useGetK8sVolumesList(
+		fetchGroupedByRowDataQuery as K8sVolumesListPayload,
+		{
+			queryKey: ['volumeList', fetchGroupedByRowDataQuery],
+			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
+		},
+		undefined,
+		dotMetricsEnabled,
+	);
 
 	const {
 		data: groupByFiltersData,
@@ -205,7 +217,10 @@ function K8sVolumesList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.NODES),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(
+				K8sCategory.NODES,
+				dotMetricsEnabled,
+			),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -253,6 +268,8 @@ function K8sVolumesList({
 			queryKey: ['volumeList', query],
 			enabled: !!query,
 		},
+		undefined,
+		dotMetricsEnabled,
 	);
 
 	const volumesData = useMemo(() => data?.payload?.data?.records || [], [data]);

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

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

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

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

frontend/src/container/InfraMonitoringK8s/constants.ts

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

frontend/src/container/InfraMonitoringK8s/utils.tsx

@@ -299,7 +299,7 @@ export const getK8sPodsListColumns = (
 	return updatedColumnsConfig as ColumnType<K8sPodsRowData>[];
 };
 
-const attributeToMetaKey: Record<string, keyof K8sPodsData['meta']> = {
+const dotToUnder: Record<string, keyof K8sPodsData['meta']> = {
 	'k8s.cronjob.name': 'k8s_cronjob_name',
 	'k8s.daemonset.name': 'k8s_daemonset_name',
 	'k8s.deployment.name': 'k8s_deployment_name',
@@ -322,8 +322,7 @@ const getGroupByEle = (
 		const rawKey = group.key as string;
 
 		// Choose mapped key if present, otherwise use rawKey
-		const metaKey = (attributeToMetaKey[rawKey] ??
-			rawKey) as keyof typeof pod.meta;
+		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof pod.meta;
 		const value = pod.meta[metaKey];
 
 		groupByValues.push(value);

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -2,6 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useMutation } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
@@ -26,20 +27,12 @@ import {
 } from 'antd';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import { CollapseProps } from 'antd/lib';
-import {
-	useCreateIngestionKey,
-	useCreateIngestionKeyLimit,
-	useDeleteIngestionKey,
-	useDeleteIngestionKeyLimit,
-	useGetIngestionKeys,
-	useSearchIngestionKeys,
-	useUpdateIngestionKey,
-	useUpdateIngestionKeyLimit,
-} from 'api/generated/services/gateway';
-import {
-	GatewaytypesIngestionKeyDTO,
-	RenderErrorResponseDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import createIngestionKeyApi from 'api/IngestionKeys/createIngestionKey';
+import deleteIngestionKey from 'api/IngestionKeys/deleteIngestionKey';
+import createLimitForIngestionKeyApi from 'api/IngestionKeys/limits/createLimitsForKey';
+import deleteLimitsForIngestionKey from 'api/IngestionKeys/limits/deleteLimitsForIngestionKey';
+import updateLimitForIngestionKeyApi from 'api/IngestionKeys/limits/updateLimitsForIngestionKey';
+import updateIngestionKey from 'api/IngestionKeys/updateIngestionKey';
 import { AxiosError } from 'axios';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import Tags from 'components/Tags/Tags';
@@ -51,6 +44,7 @@ import ROUTES from 'constants/routes';
 import { INITIAL_ALERT_THRESHOLD_STATE } from 'container/CreateAlertV2/context/constants';
 import dayjs from 'dayjs';
 import { useGetGlobalConfig } from 'hooks/globalConfig/useGetGlobalConfig';
+import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionKeys';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
 import { cloneDeep, isNil, isUndefined } from 'lodash-es';
@@ -72,12 +66,16 @@ import {
 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
+import { ErrorResponse } from 'types/api';
 import {
 	AddLimitProps,
 	LimitProps,
 	UpdateLimitProps,
 } from 'types/api/ingestionKeys/limits/types';
-import { PaginationProps } from 'types/api/ingestionKeys/types';
+import {
+	IngestionKeyProps,
+	PaginationProps,
+} from 'types/api/ingestionKeys/types';
 import { MeterAggregateOperator } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 import { getDaysUntilExpiry } from 'utils/timeUtils';
@@ -88,10 +86,6 @@ const { Option } = Select;
 
 const BYTES = 1073741824;
 
-const INITIAL_PAGE_SIZE = 10;
-const SEARCH_PAGE_SIZE = 100;
-const FIRST_PAGE = 1;
-
 const COUNT_MULTIPLIER = {
 	thousand: 1000,
 	million: 1000000,
@@ -117,8 +111,6 @@ export const showErrorNotification = (
 ): void => {
 	notifications.error({
 		message: err.message || SOMETHING_WENT_WRONG,
-		description: (err as AxiosError<RenderErrorResponseDTO>).response?.data?.error
-			?.message,
 	});
 };
 
@@ -171,20 +163,15 @@ function MultiIngestionSettings(): JSX.Element {
 	const [updatedTags, setUpdatedTags] = useState<string[]>([]);
 	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 	const [isEditAddLimitOpen, setIsEditAddLimitOpen] = useState(false);
-	const [
-		activeAPIKey,
-		setActiveAPIKey,
-	] = useState<GatewaytypesIngestionKeyDTO | null>(null);
+	const [activeAPIKey, setActiveAPIKey] = useState<IngestionKeyProps | null>();
 	const [activeSignal, setActiveSignal] = useState<LimitProps | null>(null);
 
 	const [searchValue, setSearchValue] = useState<string>('');
 	const [searchText, setSearchText] = useState<string>('');
-	const [dataSource, setDataSource] = useState<GatewaytypesIngestionKeyDTO[]>(
-		[],
-	);
+	const [dataSource, setDataSource] = useState<IngestionKeyProps[]>([]);
 	const [paginationParams, setPaginationParams] = useState<PaginationProps>({
-		page: FIRST_PAGE,
-		per_page: INITIAL_PAGE_SIZE,
+		page: 1,
+		per_page: 10,
 	});
 
 	const [totalIngestionKeys, setTotalIngestionKeys] = useState(0);
@@ -199,7 +186,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const [
 		createLimitForIngestionKeyError,
 		setCreateLimitForIngestionKeyError,
-	] = useState<string | null>(null);
+	] = useState<ErrorResponse | null>(null);
 
 	const [
 		hasUpdateLimitForIngestionKeyError,
@@ -209,7 +196,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const [
 		updateLimitForIngestionKeyError,
 		setUpdateLimitForIngestionKeyError,
-	] = useState<string | null>(null);
+	] = useState<ErrorResponse | null>(null);
 
 	const { t } = useTranslation(['ingestionKeys']);
 
@@ -229,11 +216,7 @@ function MultiIngestionSettings(): JSX.Element {
 		handleFormReset();
 	};
 
-	const showDeleteModal = (apiKey: GatewaytypesIngestionKeyDTO): void => {
-		setHasCreateLimitForIngestionKeyError(false);
-		setCreateLimitForIngestionKeyError(null);
-		setHasUpdateLimitForIngestionKeyError(false);
-		setUpdateLimitForIngestionKeyError(null);
+	const showDeleteModal = (apiKey: IngestionKeyProps): void => {
 		setActiveAPIKey(apiKey);
 		setIsDeleteModalOpen(true);
 	};
@@ -250,11 +233,7 @@ function MultiIngestionSettings(): JSX.Element {
 		setIsAddModalOpen(false);
 	};
 
-	const showEditModal = (apiKey: GatewaytypesIngestionKeyDTO): void => {
-		setHasCreateLimitForIngestionKeyError(false);
-		setCreateLimitForIngestionKeyError(null);
-		setHasUpdateLimitForIngestionKeyError(false);
-		setUpdateLimitForIngestionKeyError(null);
+	const showEditModal = (apiKey: IngestionKeyProps): void => {
 		setActiveAPIKey(apiKey);
 		handleFormReset();
 		setUpdatedTags(apiKey.tags || []);
@@ -269,10 +248,6 @@ function MultiIngestionSettings(): JSX.Element {
 	};
 
 	const showAddModal = (): void => {
-		setHasCreateLimitForIngestionKeyError(false);
-		setCreateLimitForIngestionKeyError(null);
-		setHasUpdateLimitForIngestionKeyError(false);
-		setUpdateLimitForIngestionKeyError(null);
 		setUpdatedTags([]);
 		setActiveAPIKey(null);
 		setIsAddModalOpen(true);
@@ -283,62 +258,27 @@ function MultiIngestionSettings(): JSX.Element {
 		setActiveSignal(null);
 	};
 
-	// Use search API when searchText is present, otherwise use normal get API
-	const isSearching = searchText.length > 0;
-
 	const {
-		data: ingestionKeysData,
-		isLoading: isLoadingGet,
-		isRefetching: isRefetchingGet,
-		refetch: refetchGetAPIKeys,
-		error: getError,
-		isError: isGetError,
-	} = useGetIngestionKeys(
-		{
-			...paginationParams,
-		},
-		{
-			query: {
-				enabled: !isSearching,
-			},
-		},
-	);
-
-	const {
-		data: searchIngestionKeysData,
-		isLoading: isLoadingSearch,
-		isRefetching: isRefetchingSearch,
-		refetch: refetchSearchAPIKeys,
-		error: searchError,
-		isError: isSearchError,
-	} = useSearchIngestionKeys(
-		{
-			page: FIRST_PAGE,
-			per_page: SEARCH_PAGE_SIZE,
-			name: searchText,
-		},
-		{
-			query: {
-				enabled: isSearching,
-			},
-		},
-	);
-
-	// Use the appropriate data based on which API is active
-	const ingestionKeys = isSearching
-		? searchIngestionKeysData
-		: ingestionKeysData;
-	const isLoading = isSearching ? isLoadingSearch : isLoadingGet;
-	const isRefetching = isSearching ? isRefetchingSearch : isRefetchingGet;
-	const refetchAPIKeys = isSearching ? refetchSearchAPIKeys : refetchGetAPIKeys;
-	const error = isSearching ? searchError : getError;
-	const isError = isSearching ? isSearchError : isGetError;
+		data: IngestionKeys,
+		isLoading,
+		isRefetching,
+		refetch: refetchAPIKeys,
+		error,
+		isError,
+	} = useGetAllIngestionsKeys({
+		search: searchText,
+		...paginationParams,
+	});
 
 	useEffect(() => {
-		setDataSource(ingestionKeys?.data.data?.keys || []);
-		setTotalIngestionKeys(ingestionKeys?.data?.data?._pagination?.total || 0);
+		setActiveAPIKey(IngestionKeys?.data.data[0]);
+	}, [IngestionKeys]);
+
+	useEffect(() => {
+		setDataSource(IngestionKeys?.data.data || []);
+		setTotalIngestionKeys(IngestionKeys?.data?._pagination?.total || 0);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ingestionKeys?.data?.data]);
+	}, [IngestionKeys?.data?.data]);
 
 	useEffect(() => {
 		if (isError) {
@@ -357,7 +297,6 @@ function MultiIngestionSettings(): JSX.Element {
 
 	const clearSearch = (): void => {
 		setSearchValue('');
-		setSearchText('');
 	};
 
 	const {
@@ -370,54 +309,101 @@ function MultiIngestionSettings(): JSX.Element {
 	const {
 		mutate: createIngestionKey,
 		isLoading: isLoadingCreateAPIKey,
-	} = useCreateIngestionKey<AxiosError<RenderErrorResponseDTO>>();
+	} = useMutation(createIngestionKeyApi, {
+		onSuccess: (data) => {
+			setActiveAPIKey(data.payload);
+			setUpdatedTags([]);
+			hideAddViewModal();
+			refetchAPIKeys();
+		},
+		onError: (error) => {
+			showErrorNotification(notifications, error as AxiosError);
+		},
+	});
 
-	const {
-		mutate: updateAPIKey,
-		isLoading: isLoadingUpdateAPIKey,
-	} = useUpdateIngestionKey<AxiosError<RenderErrorResponseDTO>>();
+	const { mutate: updateAPIKey, isLoading: isLoadingUpdateAPIKey } = useMutation(
+		updateIngestionKey,
+		{
+			onSuccess: () => {
+				refetchAPIKeys();
+				setIsEditModalOpen(false);
+			},
+			onError: (error) => {
+				showErrorNotification(notifications, error as AxiosError);
+			},
+		},
+	);
 
-	const {
-		mutate: deleteAPIKey,
-		isLoading: isDeleteingAPIKey,
-	} = useDeleteIngestionKey<AxiosError<RenderErrorResponseDTO>>();
+	const { mutate: deleteAPIKey, isLoading: isDeleteingAPIKey } = useMutation(
+		deleteIngestionKey,
+		{
+			onSuccess: () => {
+				refetchAPIKeys();
+				setIsDeleteModalOpen(false);
+			},
+			onError: (error) => {
+				showErrorNotification(notifications, error as AxiosError);
+			},
+		},
+	);
 
 	const {
 		mutate: createLimitForIngestionKey,
 		isLoading: isLoadingLimitForKey,
-	} = useCreateIngestionKeyLimit<AxiosError<RenderErrorResponseDTO>>();
+	} = useMutation(createLimitForIngestionKeyApi, {
+		onSuccess: () => {
+			setActiveSignal(null);
+			setActiveAPIKey(null);
+			setIsEditAddLimitOpen(false);
+			setUpdatedTags([]);
+			hideAddViewModal();
+			refetchAPIKeys();
+			setHasCreateLimitForIngestionKeyError(false);
+		},
+		onError: (error: ErrorResponse) => {
+			setHasCreateLimitForIngestionKeyError(true);
+			setCreateLimitForIngestionKeyError(error);
+		},
+	});
 
 	const {
 		mutate: updateLimitForIngestionKey,
 		isLoading: isLoadingUpdatedLimitForKey,
-	} = useUpdateIngestionKeyLimit<AxiosError<RenderErrorResponseDTO>>();
+	} = useMutation(updateLimitForIngestionKeyApi, {
+		onSuccess: () => {
+			setActiveSignal(null);
+			setActiveAPIKey(null);
+			setIsEditAddLimitOpen(false);
+			setUpdatedTags([]);
+			hideAddViewModal();
+			refetchAPIKeys();
+			setHasUpdateLimitForIngestionKeyError(false);
+		},
+		onError: (error: ErrorResponse) => {
+			setHasUpdateLimitForIngestionKeyError(true);
+			setUpdateLimitForIngestionKeyError(error);
+		},
+	});
 
-	const {
-		mutate: deleteLimitForKey,
-		isLoading: isDeletingLimit,
-	} = useDeleteIngestionKeyLimit<AxiosError<RenderErrorResponseDTO>>();
+	const { mutate: deleteLimitForKey, isLoading: isDeletingLimit } = useMutation(
+		deleteLimitsForIngestionKey,
+		{
+			onSuccess: () => {
+				setIsDeleteModalOpen(false);
+				setIsDeleteLimitModalOpen(false);
+				refetchAPIKeys();
+			},
+			onError: (error) => {
+				showErrorNotification(notifications, error as AxiosError);
+			},
+		},
+	);
 
 	const onDeleteHandler = (): void => {
 		clearSearch();
 
-		if (activeAPIKey && activeAPIKey.id) {
-			deleteAPIKey(
-				{
-					pathParams: { keyId: activeAPIKey.id },
-				},
-				{
-					onSuccess: () => {
-						notifications.success({
-							message: 'Ingestion key deleted successfully',
-						});
-						refetchAPIKeys();
-						setIsDeleteModalOpen(false);
-					},
-					onError: (error) => {
-						showErrorNotification(notifications, error as AxiosError);
-					},
-				},
-			);
+		if (activeAPIKey) {
+			deleteAPIKey(activeAPIKey.id);
 		}
 	};
 
@@ -425,31 +411,15 @@ function MultiIngestionSettings(): JSX.Element {
 		editForm
 			.validateFields()
 			.then((values) => {
-				if (activeAPIKey && activeAPIKey.id) {
-					updateAPIKey(
-						{
-							pathParams: { keyId: activeAPIKey.id },
-							data: {
-								name: values.name,
-								tags: updatedTags,
-								expires_at: new Date(
-									dayjs(values.expires_at).endOf('day').toISOString(),
-								),
-							},
+				if (activeAPIKey) {
+					updateAPIKey({
+						id: activeAPIKey.id,
+						data: {
+							name: values.name,
+							tags: updatedTags,
+							expires_at: dayjs(values.expires_at).endOf('day').toISOString(),
 						},
-						{
-							onSuccess: () => {
-								notifications.success({
-									message: 'Ingestion key updated successfully',
-								});
-								refetchAPIKeys();
-								setIsEditModalOpen(false);
-							},
-							onError: (error) => {
-								showErrorNotification(notifications, error as AxiosError);
-							},
-						},
-					);
+					});
 				}
 			})
 			.catch((errorInfo) => {
@@ -465,30 +435,10 @@ function MultiIngestionSettings(): JSX.Element {
 					const requestPayload = {
 						name: values.name,
 						tags: updatedTags,
-						expires_at: new Date(dayjs(values.expires_at).endOf('day').toISOString()),
+						expires_at: dayjs(values.expires_at).endOf('day').toISOString(),
 					};
 
-					createIngestionKey(
-						{
-							data: requestPayload,
-						},
-						{
-							onSuccess: (_data) => {
-								notifications.success({
-									message: 'Ingestion key created successfully',
-								});
-								// The new API returns GatewaytypesGettableCreatedIngestionKeyDTO with only id and value
-								// We rely on refetchAPIKeys to get the full key object
-								setActiveAPIKey(null);
-								setUpdatedTags([]);
-								hideAddViewModal();
-								refetchAPIKeys();
-							},
-							onError: (error) => {
-								showErrorNotification(notifications, error as AxiosError);
-							},
-						},
-					);
+					createIngestionKey(requestPayload);
 				}
 			})
 			.catch((errorInfo) => {
@@ -515,7 +465,7 @@ function MultiIngestionSettings(): JSX.Element {
 		formatTimezoneAdjustedTimestamp(date, DATE_TIME_FORMATS.UTC_MONTH_COMPACT);
 
 	const showDeleteLimitModal = (
-		APIKey: GatewaytypesIngestionKeyDTO,
+		APIKey: IngestionKeyProps,
 		limit: LimitProps,
 	): void => {
 		setActiveAPIKey(APIKey);
@@ -539,17 +489,9 @@ function MultiIngestionSettings(): JSX.Element {
 
 	/* eslint-disable sonarjs/cognitive-complexity */
 	const handleAddLimit = (
-		APIKey: GatewaytypesIngestionKeyDTO,
+		APIKey: IngestionKeyProps,
 		signalName: string,
 	): void => {
-		if (!APIKey.id) {
-			notifications.error({
-				message: 'Invalid ingestion key',
-				description: 'Cannot create limit for ingestion key without a valid ID',
-			});
-			return;
-		}
-
 		const {
 			dailyLimit,
 			secondsLimit,
@@ -634,49 +576,13 @@ function MultiIngestionSettings(): JSX.Element {
 			return;
 		}
 
-		createLimitForIngestionKey(
-			{
-				pathParams: { keyId: payload.keyID },
-				data: {
-					signal: payload.signal,
-					config: payload.config,
-				},
-			},
-			{
-				onSuccess: () => {
-					notifications.success({
-						message: 'Limit created successfully',
-					});
-					setActiveSignal(null);
-					setActiveAPIKey(null);
-					setIsEditAddLimitOpen(false);
-					setUpdatedTags([]);
-					hideAddViewModal();
-					refetchAPIKeys();
-					setHasCreateLimitForIngestionKeyError(false);
-				},
-				onError: (error: AxiosError<RenderErrorResponseDTO>) => {
-					setHasCreateLimitForIngestionKeyError(true);
-					setCreateLimitForIngestionKeyError(
-						error.response?.data?.error?.message || 'Failed to create limit',
-					);
-				},
-			},
-		);
+		createLimitForIngestionKey(payload);
 	};
 
 	const handleUpdateLimit = (
-		APIKey: GatewaytypesIngestionKeyDTO,
+		APIKey: IngestionKeyProps,
 		signal: LimitProps,
 	): void => {
-		if (!signal.id) {
-			notifications.error({
-				message: 'Invalid limit',
-				description: 'Cannot update limit without a valid ID',
-			});
-			return;
-		}
-
 		const {
 			dailyLimit,
 			secondsLimit,
@@ -738,34 +644,7 @@ function MultiIngestionSettings(): JSX.Element {
 			}
 		}
 
-		updateLimitForIngestionKey(
-			{
-				pathParams: { limitId: payload.limitID },
-				data: {
-					config: payload.config,
-				},
-			},
-			{
-				onSuccess: () => {
-					notifications.success({
-						message: 'Limit updated successfully',
-					});
-					setActiveSignal(null);
-					setActiveAPIKey(null);
-					setIsEditAddLimitOpen(false);
-					setUpdatedTags([]);
-					hideAddViewModal();
-					refetchAPIKeys();
-					setHasUpdateLimitForIngestionKeyError(false);
-				},
-				onError: (error: AxiosError<RenderErrorResponseDTO>) => {
-					setHasUpdateLimitForIngestionKeyError(true);
-					setUpdateLimitForIngestionKeyError(
-						error.response?.data?.error?.message || 'Failed to update limit',
-					);
-				},
-			},
-		);
+		updateLimitForIngestionKey(payload);
 	};
 	/* eslint-enable sonarjs/cognitive-complexity */
 
@@ -777,7 +656,7 @@ function MultiIngestionSettings(): JSX.Element {
 	};
 
 	const enableEditLimitMode = (
-		APIKey: GatewaytypesIngestionKeyDTO,
+		APIKey: IngestionKeyProps,
 		signal: LimitProps,
 	): void => {
 		const dayCount = signal?.config?.day?.count;
@@ -786,11 +665,6 @@ function MultiIngestionSettings(): JSX.Element {
 		const dayCountConverted = countToUnit(dayCount || 0);
 		const secondCountConverted = countToUnit(secondCount || 0);
 
-		setHasCreateLimitForIngestionKeyError(false);
-		setCreateLimitForIngestionKeyError(null);
-		setHasUpdateLimitForIngestionKeyError(false);
-		setUpdateLimitForIngestionKeyError(null);
-
 		setActiveAPIKey(APIKey);
 		setActiveSignal({
 			...signal,
@@ -829,31 +703,14 @@ function MultiIngestionSettings(): JSX.Element {
 
 	const onDeleteLimitHandler = (): void => {
 		if (activeSignal && activeSignal.id) {
-			deleteLimitForKey(
-				{
-					pathParams: { limitId: activeSignal.id },
-				},
-				{
-					onSuccess: () => {
-						notifications.success({
-							message: 'Limit deleted successfully',
-						});
-						setIsDeleteModalOpen(false);
-						setIsDeleteLimitModalOpen(false);
-						refetchAPIKeys();
-					},
-					onError: (error) => {
-						showErrorNotification(notifications, error as AxiosError);
-					},
-				},
-			);
+			deleteLimitForKey(activeSignal.id);
 		}
 	};
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
 	const handleCreateAlert = (
-		APIKey: GatewaytypesIngestionKeyDTO,
+		APIKey: IngestionKeyProps,
 		signal: LimitProps,
 	): void => {
 		let metricName = '';
@@ -914,61 +771,31 @@ function MultiIngestionSettings(): JSX.Element {
 		history.push(URL);
 	};
 
-	const columns: AntDTableProps<GatewaytypesIngestionKeyDTO>['columns'] = [
+	const columns: AntDTableProps<IngestionKeyProps>['columns'] = [
 		{
 			title: 'Ingestion Key',
 			key: 'ingestion-key',
 			// eslint-disable-next-line sonarjs/cognitive-complexity
-			render: (APIKey: GatewaytypesIngestionKeyDTO): JSX.Element => {
-				const createdOn = APIKey?.created_at
-					? getFormattedTime(
-							dayjs(APIKey.created_at).toISOString(),
-							formatTimezoneAdjustedTimestamp,
-					  )
-					: '';
+			render: (APIKey: IngestionKeyProps): JSX.Element => {
+				const createdOn = getFormattedTime(
+					APIKey.created_at,
+					formatTimezoneAdjustedTimestamp,
+				);
 
 				const expiresOn =
-					!APIKey?.expires_at ||
-					dayjs(APIKey?.expires_at).toISOString() === '0001-01-01T00:00:00.000Z'
+					!APIKey?.expires_at || APIKey?.expires_at === '0001-01-01T00:00:00Z'
 						? 'No Expiry'
-						: getFormattedTime(
-								dayjs(APIKey?.expires_at).toISOString(),
-								formatTimezoneAdjustedTimestamp,
-						  );
+						: getFormattedTime(APIKey?.expires_at, formatTimezoneAdjustedTimestamp);
 
-				const updatedOn = APIKey?.updated_at
-					? getFormattedTime(
-							dayjs(APIKey.updated_at).toISOString(),
-							formatTimezoneAdjustedTimestamp,
-					  )
-					: '';
-
-				const onCopyKey = (e: React.MouseEvent): void => {
-					e.stopPropagation();
-					e.preventDefault();
-					if (APIKey?.value) {
-						handleCopyKey(APIKey.value);
-					}
-				};
-
-				const onEditKey = (e: React.MouseEvent): void => {
-					e.stopPropagation();
-					e.preventDefault();
-					showEditModal(APIKey);
-				};
-
-				const onDeleteKey = (e: React.MouseEvent): void => {
-					e.stopPropagation();
-					e.preventDefault();
-					showDeleteModal(APIKey);
-				};
+				const updatedOn = getFormattedTime(
+					APIKey?.updated_at,
+					formatTimezoneAdjustedTimestamp,
+				);
 
 				// Convert array of limits to a dictionary for quick access
 				const limitsDict: Record<string, LimitProps> = {};
-				APIKey.limits?.forEach((limitItem) => {
-					if (limitItem.signal && limitItem.id) {
-						limitsDict[limitItem.signal] = limitItem as LimitProps;
-					}
+				APIKey.limits?.forEach((limitItem: LimitProps) => {
+					limitsDict[limitItem.signal] = limitItem;
 				});
 
 				const hasLimits = (signalName: string): boolean => !!limitsDict[signalName];
@@ -985,25 +812,39 @@ function MultiIngestionSettings(): JSX.Element {
 
 									<div className="ingestion-key-value">
 										<Typography.Text>
-											{APIKey?.value?.substring(0, 2)}********
-											{APIKey?.value
-												?.substring(APIKey?.value?.length ? APIKey.value.length - 2 : 0)
-												?.trim()}
+											{APIKey?.value.substring(0, 2)}********
+											{APIKey?.value.substring(APIKey.value.length - 2).trim()}
 										</Typography.Text>
 
-										<Copy className="copy-key-btn" size={12} onClick={onCopyKey} />
+										<Copy
+											className="copy-key-btn"
+											size={12}
+											onClick={(e): void => {
+												e.stopPropagation();
+												e.preventDefault();
+												handleCopyKey(APIKey.value);
+											}}
+										/>
 									</div>
 								</div>
 								<div className="action-btn">
 									<Button
 										className="periscope-btn ghost"
 										icon={<PenLine size={14} />}
-										onClick={onEditKey}
+										onClick={(e): void => {
+											e.stopPropagation();
+											e.preventDefault();
+											showEditModal(APIKey);
+										}}
 									/>
 									<Button
 										className="periscope-btn ghost"
 										icon={<Trash2 color={Color.BG_CHERRY_500} size={14} />}
-										onClick={onDeleteKey}
+										onClick={(e): void => {
+											e.stopPropagation();
+											e.preventDefault();
+											showDeleteModal(APIKey);
+										}}
 									/>
 								</div>
 							</div>
@@ -1013,7 +854,7 @@ function MultiIngestionSettings(): JSX.Element {
 								<Row>
 									<Col span={6}> ID </Col>
 									<Col span={12}>
-										<Typography.Text>{APIKey?.id}</Typography.Text>
+										<Typography.Text>{APIKey.id}</Typography.Text>
 									</Col>
 								</Row>
 
@@ -1065,39 +906,6 @@ function MultiIngestionSettings(): JSX.Element {
 													limit?.config?.second?.size !== undefined ||
 													limit?.config?.second?.count !== undefined;
 
-												const onEditSignalLimit = (e: React.MouseEvent): void => {
-													e.stopPropagation();
-													e.preventDefault();
-													enableEditLimitMode(APIKey, limit);
-												};
-
-												const onDeleteSignalLimit = (e: React.MouseEvent): void => {
-													e.stopPropagation();
-													e.preventDefault();
-													showDeleteLimitModal(APIKey, limit);
-												};
-
-												const onAddSignalLimit = (e: React.MouseEvent): void => {
-													e.stopPropagation();
-													e.preventDefault();
-													enableEditLimitMode(APIKey, {
-														id: signalName,
-														signal: signalName,
-														config: {},
-													});
-												};
-
-												const onSaveSignalLimit = (): void => {
-													if (!hasLimits(signalName)) {
-														handleAddLimit(APIKey, signalName);
-													} else {
-														handleUpdateLimit(APIKey, limitsDict[signalName]);
-													}
-												};
-
-												const onCreateSignalAlert = (): void =>
-													handleCreateAlert(APIKey, limitsDict[signalName]);
-
 												return (
 													<div className="signal" key={signalName}>
 														<div className="header">
@@ -1108,18 +916,22 @@ function MultiIngestionSettings(): JSX.Element {
 																		<Button
 																			className="periscope-btn ghost"
 																			icon={<PenLine size={14} />}
-																			disabled={
-																				!!(activeAPIKey?.id === APIKey?.id && activeSignal)
-																			}
-																			onClick={onEditSignalLimit}
+																			disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
+																			onClick={(e): void => {
+																				e.stopPropagation();
+																				e.preventDefault();
+																				enableEditLimitMode(APIKey, limit);
+																			}}
 																		/>
 																		<Button
 																			className="periscope-btn ghost"
 																			icon={<Trash2 color={Color.BG_CHERRY_500} size={14} />}
-																			disabled={
-																				!!(activeAPIKey?.id === APIKey?.id && activeSignal)
-																			}
-																			onClick={onDeleteSignalLimit}
+																			disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
+																			onClick={(e): void => {
+																				e.stopPropagation();
+																				e.preventDefault();
+																				showDeleteLimitModal(APIKey, limit);
+																			}}
 																		/>
 																	</>
 																) : (
@@ -1128,8 +940,16 @@ function MultiIngestionSettings(): JSX.Element {
 																		size="small"
 																		shape="round"
 																		icon={<PlusIcon size={14} />}
-																		disabled={!!(activeAPIKey?.id === APIKey?.id && activeSignal)}
-																		onClick={onAddSignalLimit}
+																		disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
+																		onClick={(e): void => {
+																			e.stopPropagation();
+																			e.preventDefault();
+																			enableEditLimitMode(APIKey, {
+																				id: signalName,
+																				signal: signalName,
+																				config: {},
+																			});
+																		}}
 																	>
 																		Limits
 																	</Button>
@@ -1138,7 +958,7 @@ function MultiIngestionSettings(): JSX.Element {
 														</div>
 
 														<div className="signal-limit-values">
-															{activeAPIKey?.id === APIKey?.id &&
+															{activeAPIKey?.id === APIKey.id &&
 															activeSignal?.signal === signalName &&
 															isEditAddLimitOpen ? (
 																<Form
@@ -1334,27 +1154,27 @@ function MultiIngestionSettings(): JSX.Element {
 																		</div>
 																	</div>
 
-																	{activeAPIKey?.id === APIKey?.id &&
+																	{activeAPIKey?.id === APIKey.id &&
 																		activeSignal.signal === signalName &&
 																		!isLoadingLimitForKey &&
 																		hasCreateLimitForIngestionKeyError &&
-																		createLimitForIngestionKeyError && (
+																		createLimitForIngestionKeyError?.error && (
 																			<div className="error">
-																				{createLimitForIngestionKeyError}
+																				{createLimitForIngestionKeyError?.error}
 																			</div>
 																		)}
 
-																	{activeAPIKey?.id === APIKey?.id &&
+																	{activeAPIKey?.id === APIKey.id &&
 																		activeSignal.signal === signalName &&
 																		!isLoadingLimitForKey &&
 																		hasUpdateLimitForIngestionKeyError &&
-																		updateLimitForIngestionKeyError && (
+																		updateLimitForIngestionKeyError?.error && (
 																			<div className="error">
-																				{updateLimitForIngestionKeyError}
+																				{updateLimitForIngestionKeyError?.error}
 																			</div>
 																		)}
 
-																	{activeAPIKey?.id === APIKey?.id &&
+																	{activeAPIKey?.id === APIKey.id &&
 																		activeSignal.signal === signalName &&
 																		isEditAddLimitOpen && (
 																			<div className="signal-limit-save-discard">
@@ -1368,7 +1188,13 @@ function MultiIngestionSettings(): JSX.Element {
 																					loading={
 																						isLoadingLimitForKey || isLoadingUpdatedLimitForKey
 																					}
-																					onClick={onSaveSignalLimit}
+																					onClick={(): void => {
+																						if (!hasLimits(signalName)) {
+																							handleAddLimit(APIKey, signalName);
+																						} else {
+																							handleUpdateLimit(APIKey, limitsDict[signalName]);
+																						}
+																					}}
 																				>
 																					Save
 																				</Button>
@@ -1449,7 +1275,9 @@ function MultiIngestionSettings(): JSX.Element {
 																					className="set-alert-btn periscope-btn ghost"
 																					type="text"
 																					data-testid={`set-alert-btn-${signalName}`}
-																					onClick={onCreateSignalAlert}
+																					onClick={(): void =>
+																						handleCreateAlert(APIKey, limitsDict[signalName])
+																					}
 																				/>
 																			</Tooltip>
 																		)}
@@ -1564,7 +1392,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const handleTableChange = (pagination: TablePaginationConfig): void => {
 		setPaginationParams({
 			page: pagination?.current || 1,
-			per_page: INITIAL_PAGE_SIZE,
+			per_page: 10,
 		});
 	};
 
@@ -1662,7 +1490,7 @@ function MultiIngestionSettings(): JSX.Element {
 					showHeader={false}
 					onChange={handleTableChange}
 					pagination={{
-						pageSize: isSearching ? SEARCH_PAGE_SIZE : paginationParams?.per_page,
+						pageSize: paginationParams?.per_page,
 						hideOnSinglePage: true,
 						showTotal: (total: number, range: number[]): string =>
 							`${range[0]}-${range[1]} of ${total} Ingestion keys`,

frontend/src/container/IngestionSettings/__tests__/MultiIngestionSettings.test.tsx

@@ -1,4 +1,3 @@
-import { GatewaytypesGettableIngestionKeysDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -19,12 +18,6 @@ interface TestAllIngestionKeyProps extends Omit<AllIngestionKeyProps, 'data'> {
 	data: TestIngestionKeyProps[];
 }
 
-// Gateway API response type (uses actual schema types for contract safety)
-interface TestGatewayIngestionKeysResponse {
-	status: string;
-	data: GatewaytypesGettableIngestionKeysDTO;
-}
-
 // Mock useHistory.push to capture navigation URL used by MultiIngestionSettings
 const mockPush = jest.fn() as jest.MockedFunction<(path: string) => void>;
 jest.mock('react-router-dom', () => {
@@ -93,34 +86,32 @@ describe('MultiIngestionSettings Page', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		// Arrange API response with a metrics daily count limit so the alert button is visible
-		const response: TestGatewayIngestionKeysResponse = {
+		const response: TestAllIngestionKeyProps = {
 			status: 'success',
-			data: {
-				keys: [
-					{
-						name: 'Key One',
-						expires_at: new Date(TEST_EXPIRES_AT),
-						value: 'secret',
-						workspace_id: TEST_WORKSPACE_ID,
-						id: 'k1',
-						created_at: new Date(TEST_CREATED_UPDATED),
-						updated_at: new Date(TEST_CREATED_UPDATED),
-						tags: [],
-						limits: [
-							{
-								id: 'l1',
-								signal: 'metrics',
-								config: { day: { count: 1000 } },
-							},
-						],
-					},
-				],
-				_pagination: { page: 1, per_page: 10, pages: 1, total: 1 },
-			},
+			data: [
+				{
+					name: 'Key One',
+					expires_at: TEST_EXPIRES_AT,
+					value: 'secret',
+					workspace_id: TEST_WORKSPACE_ID,
+					id: 'k1',
+					created_at: TEST_CREATED_UPDATED,
+					updated_at: TEST_CREATED_UPDATED,
+					tags: [],
+					limits: [
+						{
+							id: 'l1',
+							signal: 'metrics',
+							config: { day: { count: 1000 } },
+						},
+					],
+				},
+			],
+			_pagination: { page: 1, per_page: 10, pages: 1, total: 1 },
 		};
 
 		server.use(
-			rest.get('*/api/v2/gateway/ingestion_keys*', (_req, res, ctx) =>
+			rest.get('*/workspaces/me/keys*', (_req, res, ctx) =>
 				res(ctx.status(200), ctx.json(response)),
 			),
 		);
@@ -266,95 +257,4 @@ describe('MultiIngestionSettings Page', () => {
 			'signoz.meter.log.size',
 		);
 	});
-
-	it('switches to search API when search text is entered', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		const getResponse: TestGatewayIngestionKeysResponse = {
-			status: 'success',
-			data: {
-				keys: [
-					{
-						name: 'Key Regular',
-						expires_at: new Date(TEST_EXPIRES_AT),
-						value: 'secret1',
-						workspace_id: TEST_WORKSPACE_ID,
-						id: 'k1',
-						created_at: new Date(TEST_CREATED_UPDATED),
-						updated_at: new Date(TEST_CREATED_UPDATED),
-						tags: [],
-						limits: [],
-					},
-				],
-				_pagination: { page: 1, per_page: 10, pages: 1, total: 1 },
-			},
-		};
-
-		const searchResponse: TestGatewayIngestionKeysResponse = {
-			status: 'success',
-			data: {
-				keys: [
-					{
-						name: 'Key Search Result',
-						expires_at: new Date(TEST_EXPIRES_AT),
-						value: 'secret2',
-						workspace_id: TEST_WORKSPACE_ID,
-						id: 'k2',
-						created_at: new Date(TEST_CREATED_UPDATED),
-						updated_at: new Date(TEST_CREATED_UPDATED),
-						tags: [],
-						limits: [],
-					},
-				],
-				_pagination: { page: 1, per_page: 10, pages: 1, total: 1 },
-			},
-		};
-
-		const getHandler = jest.fn();
-		const searchHandler = jest.fn();
-
-		server.use(
-			rest.get('*/api/v2/gateway/ingestion_keys', (req, res, ctx) => {
-				if (req.url.pathname.endsWith('/search')) {
-					return undefined;
-				}
-				getHandler();
-				return res(ctx.status(200), ctx.json(getResponse));
-			}),
-			rest.get('*/api/v2/gateway/ingestion_keys/search', (_req, res, ctx) => {
-				searchHandler();
-				return res(ctx.status(200), ctx.json(searchResponse));
-			}),
-		);
-
-		render(<MultiIngestionSettings />, undefined, {
-			initialRoute: INGESTION_SETTINGS_ROUTE,
-		});
-
-		await screen.findByText('Key Regular');
-		expect(getHandler).toHaveBeenCalled();
-		expect(searchHandler).not.toHaveBeenCalled();
-
-		// Reset getHandler count to verify it's not called again during search
-		getHandler.mockClear();
-
-		// Type in search box
-		const searchInput = screen.getByPlaceholderText(
-			'Search for ingestion key...',
-		);
-		await user.type(searchInput, 'test');
-
-		await screen.findByText('Key Search Result');
-		expect(searchHandler).toHaveBeenCalled();
-		expect(getHandler).not.toHaveBeenCalled();
-
-		// Clear search
-		searchHandler.mockClear();
-		getHandler.mockClear();
-		await user.clear(searchInput);
-
-		await screen.findByText('Key Regular');
-		// Search API should be disabled when not searching
-		expect(searchHandler).not.toHaveBeenCalled();
-	});
 });

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) => ({