chore: remove dot_metrics_enable and associated code

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

* chore: added a common chart wrapper

* chore: tsc fix

* fix: pr review changes

* fix: pr review changes

* chore: added different tooltips

* chore: removed dayjs extention

* feat: added new barpanel component

* fix: added fix for pr review changes

* chore: added support for bar alignment configuration

* chore: updated structure for bar panel

* chore: pr review fix

.devenv/docker/clickhouse/compose.yaml

@@ -42,7 +42,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.13
+    image: signoz/signoz-schema-migrator:v0.142.0
     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.129.13
+    image: signoz/signoz-schema-migrator:v0.142.0
     container_name: schema-migrator-async
     command:
       - async

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

@@ -4,7 +4,6 @@ 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,3 +93,13 @@ 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.110.1
+    image: signoz/signoz:v0.111.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -209,12 +209,11 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.13
+    image: signoz/signoz-otel-collector:v0.142.0
     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
@@ -233,7 +232,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.13
+    image: signoz/signoz-schema-migrator:v0.142.0
     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.110.1
+    image: signoz/signoz:v0.111.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -150,12 +150,11 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.13
+    image: signoz/signoz-otel-collector:v0.142.0
     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
@@ -176,7 +175,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.13
+    image: signoz/signoz-schema-migrator:v0.142.0
     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.110.1}
+    image: signoz/signoz:${VERSION:-v0.111.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -213,13 +213,12 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
     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
@@ -239,7 +238,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -250,7 +249,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
     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.110.1}
+    image: signoz/signoz:${VERSION:-v0.111.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -144,13 +144,12 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
     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
@@ -166,7 +165,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -178,7 +177,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
     container_name: schema-migrator-async
     command:
       - async

docs/api/openapi.yml

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

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

@@ -67,14 +67,6 @@ 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,14 +18,3 @@ 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,6 +12,8 @@ export interface MockUPlotInstance {
 export interface MockUPlotPaths {
 	spline: jest.Mock;
 	bars: jest.Mock;
+	linear: jest.Mock;
+	stepped: jest.Mock;
 }
 
 // Create mock instance methods
@@ -23,10 +25,23 @@ const createMockUPlotInstance = (): MockUPlotInstance => ({
 	setSeries: jest.fn(),
 });
 
-// Create mock paths
-const mockPaths: MockUPlotPaths = {
-	spline: jest.fn(),
-	bars: 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})`),
+	),
 };
 
 // Mock static methods

frontend/jest.config.ts

@@ -17,6 +17,8 @@ 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 && prettier --write src/api/generated && (eslint --fix src/api/generated || true)"
+		"generate:api": "orval --config ./orval.config.ts && sh scripts/post-types-generation.sh"
 	},
 	"engines": {
 		"node": ">=16.15.0"
@@ -52,6 +52,7 @@
 		"@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

@@ -0,0 +1 @@
+<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,6 +1,7 @@
 {
 	"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,5 +1,6 @@
 #!/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
@@ -11,4 +12,33 @@ find src/api/generated/services -mindepth 1 -maxdepth 1 -type d | while read -r
   fi
 done
 
-echo "Tag files renamed to index.ts"
+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!"

frontend/src/AppRoutes/pageComponents.ts

@@ -194,6 +194,10 @@ 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,6 +17,7 @@ import {
 	DashboardWidget,
 	EditRulesPage,
 	ErrorDetails,
+	ForgotPassword,
 	Home,
 	InfrastructureMonitoring,
 	InstalledIntegrations,
@@ -339,6 +340,13 @@ 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,6 +11,7 @@ import {
 
 const dashboardVariablesQuery = async (
 	props: Props,
+	signal?: AbortSignal,
 ): Promise<SuccessResponse<VariableResponseProps> | ErrorResponse> => {
 	try {
 		const { globalTime } = store.getState();
@@ -32,7 +33,7 @@ const dashboardVariablesQuery = async (
 
 		payload.variables = { ...payload.variables, ...timeVariables };
 
-		const response = await axios.post(`/variables/query`, payload);
+		const response = await axios.post(`/variables/query`, payload, { signal });
 
 		return {
 			statusCode: 200,

frontend/src/api/dynamicVariables/getFieldValues.ts

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

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

@@ -0,0 +1,222 @@
+/**
+ * ! 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,6 +1141,79 @@ 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
@@ -1588,6 +1661,132 @@ 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 { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sClustersListPayload {
 	filters: TagFilter;
@@ -64,41 +64,39 @@ export const getK8sClustersList = async (
 	props: K8sClustersListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sClustersListResponse> | ErrorResponse> => {
 	try {
-		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);
-									}
+		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) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								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;
 
 		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 { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sDaemonSetsListPayload {
 	filters: TagFilter;
@@ -71,42 +71,39 @@ export const getK8sDaemonSetsList = async (
 	props: K8sDaemonSetsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sDaemonSetsListResponse> | ErrorResponse> => {
 	try {
-		// 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);
-									}
+		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) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								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;
 
 		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 { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sDeploymentsListPayload {
 	filters: TagFilter;
@@ -71,41 +71,39 @@ export const getK8sDeploymentsList = async (
 	props: K8sDeploymentsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sDeploymentsListResponse> | ErrorResponse> => {
 	try {
-		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);
-									}
+		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) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								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;
 
 		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 { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sJobsListPayload {
 	filters: TagFilter;
@@ -71,41 +71,39 @@ export const getK8sJobsList = async (
 	props: K8sJobsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sJobsListResponse> | ErrorResponse> => {
 	try {
-		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);
-									}
+		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) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								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;
 
 		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 { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sNamespacesListPayload {
 	filters: TagFilter;
@@ -62,41 +62,39 @@ export const getK8sNamespacesList = async (
 	props: K8sNamespacesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sNamespacesListResponse> | ErrorResponse> => {
 	try {
-		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);
-									}
+		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) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								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;
 
 		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 { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sNodesListPayload {
 	filters: TagFilter;
@@ -66,41 +66,39 @@ export const getK8sNodesList = async (
 	props: K8sNodesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sNodesListResponse> | ErrorResponse> => {
 	try {
-		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);
-									}
+		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) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								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;
 
 		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 { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sPodsListPayload {
 	filters: TagFilter;
@@ -102,41 +102,39 @@ export const getK8sPodsList = async (
 	props: K8sPodsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sPodsListResponse> | ErrorResponse> => {
 	try {
-		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);
-									}
+		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) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								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;
 
 		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 { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sVolumesListPayload {
 	filters: TagFilter;
@@ -86,39 +86,37 @@ export const getK8sVolumesList = async (
 	props: K8sVolumesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sVolumesListResponse> | ErrorResponse> => {
 	try {
 		// Prepare filters
-		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);
-									}
+		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) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								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;
 
 		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 { UnderscoreToDotMap } from '../utils';
+import { AttributeKeyMap } from '../utils';
 
 export interface K8sStatefulSetsListPayload {
 	filters: TagFilter;
@@ -69,39 +69,37 @@ export const getK8sStatefulSetsList = async (
 	props: K8sStatefulSetsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
-	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sStatefulSetsListResponse> | ErrorResponse> => {
 	try {
 		// Prepare filters
-		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);
-									}
+		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) {
 									return acc;
-								},
-								[] as typeof props.filters.items,
-							),
-						},
-				  }
-				: props;
+								}
+								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;
 
 		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 UnderscoreToDotMap: Record<string, string> = {
+export const AttributeKeyMap: 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,6 +18,7 @@ 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,9 +23,6 @@ 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 {
@@ -50,11 +47,6 @@ 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,
@@ -69,14 +61,8 @@ function Metrics({
 	});
 
 	const queryPayloads = useMemo(
-		() =>
-			getHostQueryPayload(
-				hostName,
-				timeRange.startTime,
-				timeRange.endTime,
-				dotMetricsEnabled,
-			),
-		[hostName, timeRange.startTime, timeRange.endTime, dotMetricsEnabled],
+		() => getHostQueryPayload(hostName, timeRange.startTime, timeRange.endTime),
+		[hostName, timeRange.startTime, timeRange.endTime],
 	);
 
 	const queries = useQueries(

frontend/src/components/NewSelect/CustomMultiSelect.tsx

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

frontend/src/components/NewSelect/CustomSelect.tsx

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

frontend/src/components/NewSelect/types.ts

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

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

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

frontend/src/constants/features.ts

@@ -8,5 +8,4 @@ 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,6 +1,7 @@
 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,8 +41,6 @@ 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,
@@ -415,11 +413,6 @@ 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,
@@ -455,7 +448,7 @@ function AllErrors(): JSX.Element {
 	useEffect(() => {
 		if (!isUndefined(errorCountResponse.data?.payload)) {
 			const selectedEnvironments = queries.find(
-				(val) => val.tagKey === getResourceDeploymentKeys(dotMetricsEnabled),
+				(val) => val.tagKey === getResourceDeploymentKeys(),
 			)?.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, Typography } from 'antd';
+import { Spin, Table } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
@@ -14,11 +14,13 @@ 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';
@@ -125,51 +127,67 @@ function DomainList(): JSX.Element {
 					hardcodedAttributeKeys={ApiMonitoringHardcodedAttributeKeys}
 				/>
 			</div>
-			<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"
-									/>
+			{!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"
+						/>
 
-									<Typography.Text className="no-filtered-domains-message">
-										This query had no results. Edit your query and try again!
-									</Typography.Text>
-								</div>
+						<div className="no-filtered-domains-message">
+							<div className="no-domain-title">
+								No External API calls detected with applied filters.
 							</div>
-						),
-				}}
-				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'
-				}
-			/>
+							<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'
+					}
+				/>
+			)}
 			{selectedDomainIndex !== -1 && (
 				<DomainDetails
 					domainData={formattedDataForTable[selectedDomainIndex]}

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

@@ -180,10 +180,59 @@
 
 	.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

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

@@ -0,0 +1,104 @@
+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,104 +1,46 @@
-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 { 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 {
-	LegendPosition,
+	TimeSeriesTooltipProps,
 	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';
+import { TimeSeriesChartProps } from '../types';
 
-const TOOLTIP_WIDTH_PADDING = 60;
-const TOOLTIP_MIN_WIDTH = 200;
+export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
+	const { children, renderTooltip: customRenderTooltip, ...rest } = props;
 
-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}
-				/>
-			);
+	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} />;
 		},
-		[config, legendConfig.position],
+		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	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}
-						{!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>
+		<ChartWrapper {...rest} renderTooltip={renderTooltip}>
+			{children}
+		</ChartWrapper>
 	);
 }

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

@@ -1,29 +1,39 @@
 import { PrecisionOption } from 'components/Graph/types';
-import { LegendConfig } from 'lib/uPlotV2/components/types';
+import { LegendConfig, TooltipRenderArgs } 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;
-	disableTooltip?: boolean;
+	showTooltip?: boolean;
 	timezone: string;
-	syncMode?: DashboardCursorSync;
-	syncKey?: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
+	renderTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
+	'data-testid'?: string;
 }
-
-interface TimeSeriesChartProps extends BaseChartProps {
+interface UPlotBasedChartProps {
 	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 type ChartProps = TimeSeriesChartProps;
+export interface TimeSeriesChartProps
+	extends BaseChartProps,
+		UPlotBasedChartProps {
+	legendConfig: LegendConfig;
+}
+
+export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
+	legendConfig: LegendConfig;
+	isStackedBarChart?: boolean;
+}
+
+export type ChartProps = TimeSeriesChartProps | BarChartProps;

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

@@ -0,0 +1,116 @@
+import uPlot, { AlignedData } from 'uplot';
+
+/**
+ * Stack data cumulatively (top-down: first series = top, last = bottom).
+ * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
+ */
+export function 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

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

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

@@ -0,0 +1,108 @@
+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,7 +6,6 @@ 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';
@@ -73,55 +72,28 @@ 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({
-			widgetId: widget.id || '',
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			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,
+			widget,
 			isDarkMode,
+			currentQuery: widget.query,
 			onClick: clickHandlerWithContextMenu,
 			onDragSelect,
-			currentQuery: widget.query,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			timezone,
 			panelMode,
+			minTimeScale: minTimeScale,
+			maxTimeScale: maxTimeScale,
 		});
 	}, [
-		widget.id,
-		maxTimeScale,
-		minTimeScale,
-		timezone.value,
-		widget.customLegendColors,
-		widget.isLogScale,
-		widget.softMax,
-		widget.softMin,
+		widget,
 		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,3 +1,4 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	fillMissingXAxisTimestamps,
@@ -5,23 +6,20 @@ import {
 } from 'container/DashboardContainer/visualization/panels/utils';
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
-import onClickPlugin, {
-	OnClickPluginOpts,
-} from 'lib/uPlotLib/plugins/onClickPlugin';
+import { 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 { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
+import { Widgets } from 'types/api/dashboard/getAll';
 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,
@@ -34,112 +32,39 @@ export const prepareChartData = (
 };
 
 export const prepareUPlotConfig = ({
-	widgetId,
-	apiResponse,
-	tzDate,
-	minTimeScale,
-	maxTimeScale,
-	isLogScale,
-	thresholds,
-	softMin,
-	softMax,
-	spanGaps,
-	colorMapping,
-	lineInterpolation,
+	widget,
 	isDarkMode,
 	currentQuery,
-	onDragSelect,
 	onClick,
-	yAxisUnit,
+	onDragSelect,
+	apiResponse,
+	timezone,
 	panelMode,
+	minTimeScale,
+	maxTimeScale,
 }: {
-	widgetId: string;
-	apiResponse: MetricRangePayloadProps;
-	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;
+	widget: Widgets;
 	isDarkMode: boolean;
-	thresholds: ThresholdsDrawHookOptions;
 	currentQuery: Query;
-	yAxisUnit: string;
+	onClick: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
+	apiResponse: MetricRangePayloadProps;
+	timezone: Timezone;
 	panelMode: PanelMode;
+	minTimeScale?: number;
+	maxTimeScale?: number;
 }): UPlotConfigBuilder => {
-	const builder = new UPlotConfigBuilder({
+	const builder = buildBaseConfig({
+		widget,
+		isDarkMode,
+		onClick,
 		onDragSelect,
-		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,
+		apiResponse,
+		timezone,
+		panelMode,
 		panelType: PANEL_TYPES.TIME_SERIES,
+		minTimeScale,
+		maxTimeScale,
 	});
 
 	apiResponse.data?.result?.forEach((series) => {
@@ -157,14 +82,16 @@ export const prepareUPlotConfig = ({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Line,
 			label: label,
-			colorMapping,
-			spanGaps,
+			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: true,
 			lineStyle: LineStyle.Solid,
-			lineInterpolation,
+			lineInterpolation: LineInterpolation.Spline,
 			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
+			panelType: PANEL_TYPES.TIME_SERIES,
 		});
 	});
+
 	return builder;
 };

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

@@ -14,6 +14,11 @@ 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

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

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

frontend/src/container/ForgotPassword/ForgotPassword.styles.scss

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

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

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

@@ -0,0 +1,217 @@
+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,7 +30,6 @@ 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';
 
@@ -211,19 +210,13 @@ 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, dotMetricsEnabled],
+		[globalSelectedInterval, topLevelOperations],
 	);
 
 	const dataQueries = useGetQueriesRange(

frontend/src/container/InfraMonitoringHosts/HostsList.tsx

@@ -23,8 +23,6 @@ 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';
@@ -146,11 +144,6 @@ 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;
@@ -221,7 +214,7 @@ function HostsList(): JSX.Element {
 						</div>
 						<QuickFilters
 							source={QuickFiltersSource.INFRA_MONITORING}
-							config={GetHostsQuickFiltersConfig(dotMetricsEnabled)}
+							config={GetHostsQuickFiltersConfig()}
 							handleFilterVisibilityChange={handleFilterVisibilityChange}
 							onFilterChange={handleQuickFiltersChange}
 						/>

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

@@ -71,20 +71,12 @@ describe('InfraMonitoringHosts utils', () => {
 	});
 
 	describe('GetHostsQuickFiltersConfig', () => {
-		it('should return correct config when dotMetricsEnabled is true', () => {
-			const result = GetHostsQuickFiltersConfig(true);
+		it('should return correct config with dot-notation keys', () => {
+			const result = GetHostsQuickFiltersConfig();
 
 			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,32 +211,18 @@ export const HostsQuickFiltersConfig: 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';
-
+export function GetHostsQuickFiltersConfig(): IQuickFiltersConfig[] {
 	return [
 		{
 			type: FiltersType.CHECKBOX,
 			title: 'Host Name',
 			attributeKey: {
-				key: hostNameKey,
+				key: 'host.name',
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: metricName,
+			aggregateAttribute: 'system.cpu.load_average.15m',
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -244,12 +230,12 @@ export function GetHostsQuickFiltersConfig(
 			type: FiltersType.CHECKBOX,
 			title: 'OS Type',
 			attributeKey: {
-				key: osTypeKey,
+				key: 'os.type',
 				dataType: DataTypes.String,
 				type: 'resource',
 			},
 			aggregateOperator: 'noop',
-			aggregateAttribute: metricName,
+			aggregateAttribute: 'system.cpu.load_average.15m',
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
@@ -257,7 +243,7 @@ export function GetHostsQuickFiltersConfig(
 			type: FiltersType.CHECKBOX,
 			title: 'Environment',
 			attributeKey: {
-				key: environmentKey,
+				key: 'deployment.environment',
 				dataType: DataTypes.String,
 				type: 'resource',
 			},

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

@@ -46,95 +46,34 @@ export const getClusterMetricsQueryPayload = (
 	cluster: K8sClustersData,
 	start: number,
 	end: number,
-	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	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');
+	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';
 
 	return [
 		{

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

@@ -25,8 +25,6 @@ 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,11 +135,6 @@ 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'],
@@ -231,8 +224,6 @@ function K8sClustersList({
 			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
-		undefined,
-		dotMetricsEnabled,
 	);
 
 	const {
@@ -241,10 +232,7 @@ function K8sClustersList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(
-				K8sCategory.CLUSTERS,
-				dotMetricsEnabled,
-			),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.CLUSTERS),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -325,8 +313,6 @@ 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 dotToUnder: Record<string, keyof K8sClustersData['meta']> = {
+const attributeToMetaKey: Record<string, keyof K8sClustersData['meta']> = {
 	'k8s.cluster.name': 'k8s_cluster_name',
 	'k8s.cluster.uid': 'k8s_cluster_uid',
 };
@@ -151,7 +151,8 @@ const getGroupByEle = (
 		const rawKey = group.key as string;
 
 		// Choose mapped key if present, otherwise use rawKey
-		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof cluster.meta;
+		const metaKey = (attributeToMetaKey[rawKey] ??
+			rawKey) as keyof typeof cluster.meta;
 		const value = cluster.meta[metaKey];
 
 		groupByValues.push(value);

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

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

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

@@ -26,8 +26,6 @@ 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,
@@ -139,11 +137,6 @@ 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'],
@@ -233,8 +226,6 @@ function K8sDaemonSetsList({
 			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
-		undefined,
-		dotMetricsEnabled,
 	);
 
 	const {
@@ -243,10 +234,7 @@ function K8sDaemonSetsList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(
-				K8sCategory.DAEMONSETS,
-				dotMetricsEnabled,
-			),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.DAEMONSETS),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -320,8 +308,6 @@ 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 dotToUnder: Record<string, keyof K8sDaemonSetsData['meta']> = {
+const attributeToMetaKey: Record<string, keyof K8sDaemonSetsData['meta']> = {
 	'k8s.daemonset.name': 'k8s_daemonset_name',
 	'k8s.namespace.name': 'k8s_namespace_name',
 	'k8s.cluster.name': 'k8s_cluster_name',
@@ -252,7 +252,8 @@ const getGroupByEle = (
 		const rawKey = group.key as string;
 
 		// Choose mapped key if present, otherwise use rawKey
-		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof daemonSet.meta;
+		const metaKey = (attributeToMetaKey[rawKey] ??
+			rawKey) as keyof typeof daemonSet.meta;
 		const value = daemonSet.meta[metaKey];
 
 		groupByValues.push(value);

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

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

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

@@ -26,8 +26,6 @@ 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,
@@ -140,11 +138,6 @@ 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'],
@@ -234,8 +227,6 @@ function K8sDeploymentsList({
 			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
-		undefined,
-		dotMetricsEnabled,
 	);
 
 	const {
@@ -246,7 +237,6 @@ function K8sDeploymentsList({
 			dataSource: currentQuery.builder.queryData[0].dataSource,
 			aggregateAttribute: GetK8sEntityToAggregateAttribute(
 				K8sCategory.DEPLOYMENTS,
-				dotMetricsEnabled,
 			),
 			aggregateOperator: 'noop',
 			searchText: '',
@@ -321,8 +311,6 @@ 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 dotToUnder: Record<string, keyof K8sDeploymentsData['meta']> = {
+const attributeToMetaKey: 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 = (dotToUnder[rawKey] ??
+		const metaKey = (attributeToMetaKey[rawKey] ??
 			rawKey) as keyof typeof deployment.meta;
 		const value = deployment.meta[metaKey];
 

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

@@ -28,9 +28,7 @@ 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';
 
@@ -54,7 +52,6 @@ interface EntityMetricsProps<T> {
 		node: T,
 		start: number,
 		end: number,
-		dotMetricsEnabled: boolean,
 	) => GetQueryResultsProps[];
 	queryKey: string;
 	category: K8sCategory;
@@ -71,31 +68,14 @@ 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,
-				dotMetricsEnabled,
-			),
-		[
-			getEntityQueryPayload,
-			entity,
-			timeRange.startTime,
-			timeRange.endTime,
-			dotMetricsEnabled,
-		],
+		() => getEntityQueryPayload(entity, timeRange.startTime, timeRange.endTime),
+		[getEntityQueryPayload, entity, timeRange.startTime, timeRange.endTime],
 	);
 
 	const queries = useQueries(

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

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

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -24,8 +24,6 @@ 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,
@@ -76,11 +74,6 @@ 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
@@ -116,7 +109,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetPodsQuickFiltersConfig(dotMetricsEnabled)}
+					config={GetPodsQuickFiltersConfig()}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -136,7 +129,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetNodesQuickFiltersConfig(dotMetricsEnabled)}
+					config={GetNodesQuickFiltersConfig()}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -159,7 +152,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetNamespaceQuickFiltersConfig(dotMetricsEnabled)}
+					config={GetNamespaceQuickFiltersConfig()}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -179,7 +172,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetClustersQuickFiltersConfig(dotMetricsEnabled)}
+					config={GetClustersQuickFiltersConfig()}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -199,7 +192,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetDeploymentsQuickFiltersConfig(dotMetricsEnabled)}
+					config={GetDeploymentsQuickFiltersConfig()}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -219,7 +212,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetJobsQuickFiltersConfig(dotMetricsEnabled)}
+					config={GetJobsQuickFiltersConfig()}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -239,7 +232,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled)}
+					config={GetDaemonsetsQuickFiltersConfig()}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -262,7 +255,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled)}
+					config={GetStatefulsetsQuickFiltersConfig()}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>
@@ -282,7 +275,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			children: (
 				<QuickFilters
 					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetVolumesQuickFiltersConfig(dotMetricsEnabled)}
+					config={GetVolumesQuickFiltersConfig()}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
 				/>

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

@@ -30,24 +30,13 @@ export const getJobMetricsQueryPayload = (
 	job: K8sJobsData,
 	start: number,
 	end: number,
-	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	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';
+	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';
 
 	return [
 		{

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

@@ -26,8 +26,6 @@ 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,
@@ -134,11 +132,6 @@ 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'],
@@ -215,15 +208,10 @@ function K8sJobsList({
 		isLoading: isLoadingGroupedByRowData,
 		isError: isErrorGroupedByRowData,
 		refetch: fetchGroupedByRowData,
-	} = useGetK8sJobsList(
-		fetchGroupedByRowDataQuery as K8sJobsListPayload,
-		{
-			queryKey: groupedByRowDataQueryKey,
-			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
-		},
-		undefined,
-		dotMetricsEnabled,
-	);
+	} = useGetK8sJobsList(fetchGroupedByRowDataQuery as K8sJobsListPayload, {
+		queryKey: groupedByRowDataQueryKey,
+		enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
+	});
 
 	const {
 		data: groupByFiltersData,
@@ -231,10 +219,7 @@ function K8sJobsList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(
-				K8sCategory.JOBS,
-				dotMetricsEnabled,
-			),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.JOBS),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -315,8 +300,6 @@ 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 dotToUnder: Record<string, keyof K8sJobsData['meta']> = {
+const attributeToMetaKey: Record<string, keyof K8sJobsData['meta']> = {
 	'k8s.job.name': 'k8s_job_name',
 	'k8s.namespace.name': 'k8s_namespace_name',
 	'k8s.cluster.name': 'k8s_cluster_name',
@@ -279,7 +279,8 @@ const getGroupByEle = (
 		const rawKey = group.key as string;
 
 		// Choose mapped key if present, otherwise use rawKey
-		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof job.meta;
+		const metaKey = (attributeToMetaKey[rawKey] ??
+			rawKey) as keyof typeof job.meta;
 		const value = job.meta[metaKey];
 
 		groupByValues.push(value);

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

@@ -25,8 +25,6 @@ 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,11 +136,6 @@ 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'],
@@ -232,8 +225,6 @@ function K8sNamespacesList({
 			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
-		undefined,
-		dotMetricsEnabled,
 	);
 
 	const {
@@ -242,10 +233,7 @@ function K8sNamespacesList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(
-				K8sCategory.NAMESPACES,
-				dotMetricsEnabled,
-			),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.NAMESPACES),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -319,8 +307,6 @@ function K8sNamespacesList({
 			enabled: !!query,
 			keepPreviousData: true,
 		},
-		undefined,
-		dotMetricsEnabled,
 	);
 
 	const namespacesData = useMemo(() => data?.payload?.data?.records || [], [

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

@@ -54,95 +54,35 @@ export const getNamespaceMetricsQueryPayload = (
 	namespace: K8sNamespacesData,
 	start: number,
 	end: number,
-	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	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',
-	);
+	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';
 
 	return [
 		{

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

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

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

@@ -25,8 +25,6 @@ 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,11 +130,6 @@ 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'],
@@ -220,15 +213,10 @@ function K8sNodesList({
 		isLoading: isLoadingGroupedByRowData,
 		isError: isErrorGroupedByRowData,
 		refetch: fetchGroupedByRowData,
-	} = useGetK8sNodesList(
-		fetchGroupedByRowDataQuery as K8sNodesListPayload,
-		{
-			queryKey: groupedByRowDataQueryKey,
-			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
-		},
-		undefined,
-		dotMetricsEnabled,
-	);
+	} = useGetK8sNodesList(fetchGroupedByRowDataQuery as K8sNodesListPayload, {
+		queryKey: groupedByRowDataQueryKey,
+		enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
+	});
 
 	const {
 		data: groupByFiltersData,
@@ -236,10 +224,7 @@ function K8sNodesList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(
-				K8sCategory.NODES,
-				dotMetricsEnabled,
-			),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.NODES),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -320,8 +305,6 @@ 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,88 +54,40 @@ export const getNodeMetricsQueryPayload = (
 	node: K8sNodesData,
 	start: number,
 	end: number,
-	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	const getKey = (dotKey: string, underscoreKey: string): string =>
-		dotMetricsEnabled ? dotKey : underscoreKey;
-	const k8sNodeCpuUtilizationKey = getKey(
-		'k8s.node.cpu.usage',
-		'k8s_node_cpu_usage',
-	);
+	const k8sNodeCpuUtilizationKey = 'k8s.node.cpu.usage';
 
-	const k8sNodeAllocatableCpuKey = getKey(
-		'k8s.node.allocatable_cpu',
-		'k8s_node_allocatable_cpu',
-	);
+	const k8sNodeAllocatableCpuKey = 'k8s.node.allocatable_cpu';
 
-	const k8sContainerCpuRequestKey = getKey(
-		'k8s.container.cpu_request',
-		'k8s_container_cpu_request',
-	);
+	const k8sContainerCpuRequestKey = 'k8s.container.cpu_request';
 
-	const k8sNodeMemoryUsageKey = getKey(
-		'k8s.node.memory.usage',
-		'k8s_node_memory_usage',
-	);
+	const k8sNodeMemoryUsageKey = 'k8s.node.memory.usage';
 
-	const k8sNodeAllocatableMemoryKey = getKey(
-		'k8s.node.allocatable_memory',
-		'k8s_node_allocatable_memory',
-	);
+	const k8sNodeAllocatableMemoryKey = 'k8s.node.allocatable_memory';
 
-	const k8sContainerMemoryRequestKey = getKey(
-		'k8s.container.memory_request',
-		'k8s_container_memory_request',
-	);
+	const k8sContainerMemoryRequestKey = 'k8s.container.memory_request';
 
-	const k8sNodeMemoryWorkingSetKey = getKey(
-		'k8s.node.memory.working_set',
-		'k8s_node_memory_working_set',
-	);
+	const k8sNodeMemoryWorkingSetKey = 'k8s.node.memory.working_set';
 
-	const k8sNodeMemoryRssKey = getKey(
-		'k8s.node.memory.rss',
-		'k8s_node_memory_rss',
-	);
+	const k8sNodeMemoryRssKey = 'k8s.node.memory.rss';
 
-	const k8sPodCpuUtilizationKey = getKey(
-		'k8s.pod.cpu.usage',
-		'k8s_pod_cpu_usage',
-	);
+	const k8sPodCpuUtilizationKey = 'k8s.pod.cpu.usage';
 
-	const k8sPodMemoryUsageKey = getKey(
-		'k8s.pod.memory.usage',
-		'k8s_pod_memory_usage',
-	);
+	const k8sPodMemoryUsageKey = 'k8s.pod.memory.usage';
 
-	const k8sNodeNetworkErrorsKey = getKey(
-		'k8s.node.network.errors',
-		'k8s_node_network_errors',
-	);
+	const k8sNodeNetworkErrorsKey = 'k8s.node.network.errors';
 
-	const k8sNodeNetworkIoKey = getKey(
-		'k8s.node.network.io',
-		'k8s_node_network_io',
-	);
+	const k8sNodeNetworkIoKey = 'k8s.node.network.io';
 
-	const k8sNodeFilesystemUsageKey = getKey(
-		'k8s.node.filesystem.usage',
-		'k8s_node_filesystem_usage',
-	);
+	const k8sNodeFilesystemUsageKey = 'k8s.node.filesystem.usage';
 
-	const k8sNodeFilesystemCapacityKey = getKey(
-		'k8s.node.filesystem.capacity',
-		'k8s_node_filesystem_capacity',
-	);
+	const k8sNodeFilesystemCapacityKey = 'k8s.node.filesystem.capacity';
 
-	const k8sNodeFilesystemAvailableKey = getKey(
-		'k8s.node.filesystem.available',
-		'k8s_node_filesystem_available',
-	);
+	const k8sNodeFilesystemAvailableKey = 'k8s.node.filesystem.available';
 
-	const k8sNodeNameKey = getKey('k8s.node.name', 'k8s_node_name');
+	const k8sNodeNameKey = 'k8s.node.name';
 
-	const k8sPodNameKey = getKey('k8s.pod.name', 'k8s_pod_name');
+	const k8sPodNameKey = 'k8s.pod.name';
 
 	return [
 		{

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

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

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

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

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

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

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

@@ -26,8 +26,6 @@ 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,
@@ -139,11 +137,6 @@ 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'],
@@ -233,8 +226,6 @@ function K8sStatefulSetsList({
 			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
-		undefined,
-		dotMetricsEnabled,
 	);
 
 	const {
@@ -245,7 +236,6 @@ function K8sStatefulSetsList({
 			dataSource: currentQuery.builder.queryData[0].dataSource,
 			aggregateAttribute: GetK8sEntityToAggregateAttribute(
 				K8sCategory.STATEFULSETS,
-				dotMetricsEnabled,
 			),
 			aggregateOperator: 'noop',
 			searchText: '',
@@ -327,8 +317,6 @@ function K8sStatefulSetsList({
 			enabled: !!query,
 			keepPreviousData: true,
 		},
-		undefined,
-		dotMetricsEnabled,
 	);
 
 	const statefulSetsData = useMemo(() => data?.payload?.data?.records || [], [

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

@@ -38,54 +38,25 @@ export const getStatefulSetMetricsQueryPayload = (
 	statefulSet: K8sStatefulSetsData,
 	start: number,
 	end: number,
-	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	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 k8sStatefulSetNameKey = 'k8s.statefulset.name';
+	const k8sNamespaceNameKey = 'k8s.namespace.name';
+	const k8sPodNameKey = 'k8s.pod.name';
 
-	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 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 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 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 k8sPodNetworkIoKey = dotMetricsEnabled
-		? 'k8s.pod.network.io'
-		: 'k8s_pod_network_io';
-	const k8sPodNetworkErrorsKey = dotMetricsEnabled
-		? 'k8s.pod.network.errors'
-		: 'k8s_pod_network_errors';
+	const k8sPodNetworkIoKey = 'k8s.pod.network.io';
+	const k8sPodNetworkErrorsKey = '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 dotToUnder: Record<string, keyof K8sStatefulSetsData['meta']> = {
+const attributeToMetaKey: 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 = (dotToUnder[rawKey] ??
+		const metaKey = (attributeToMetaKey[rawKey] ??
 			rawKey) as keyof typeof statefulSet.meta;
 		const value = statefulSet.meta[metaKey];
 

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

@@ -26,8 +26,6 @@ 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,
@@ -139,11 +137,6 @@ 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'],
@@ -201,15 +194,10 @@ function K8sVolumesList({
 		isLoading: isLoadingGroupedByRowData,
 		isError: isErrorGroupedByRowData,
 		refetch: fetchGroupedByRowData,
-	} = useGetK8sVolumesList(
-		fetchGroupedByRowDataQuery as K8sVolumesListPayload,
-		{
-			queryKey: ['volumeList', fetchGroupedByRowDataQuery],
-			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
-		},
-		undefined,
-		dotMetricsEnabled,
-	);
+	} = useGetK8sVolumesList(fetchGroupedByRowDataQuery as K8sVolumesListPayload, {
+		queryKey: ['volumeList', fetchGroupedByRowDataQuery],
+		enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
+	});
 
 	const {
 		data: groupByFiltersData,
@@ -217,10 +205,7 @@ function K8sVolumesList({
 	} = useGetAggregateKeys(
 		{
 			dataSource: currentQuery.builder.queryData[0].dataSource,
-			aggregateAttribute: GetK8sEntityToAggregateAttribute(
-				K8sCategory.NODES,
-				dotMetricsEnabled,
-			),
+			aggregateAttribute: GetK8sEntityToAggregateAttribute(K8sCategory.NODES),
 			aggregateOperator: 'noop',
 			searchText: '',
 			tagType: '',
@@ -268,8 +253,6 @@ 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,38 +34,17 @@ export const getVolumeQueryPayload = (
 	volume: K8sVolumesData,
 	start: number,
 	end: number,
-	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
-	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}}';
+	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}}';
 
 	return [
 		{

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

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

frontend/src/container/InfraMonitoringK8s/constants.ts

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

frontend/src/container/InfraMonitoringK8s/utils.tsx

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

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -2,7 +2,6 @@
 /* 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';
@@ -27,12 +26,20 @@ import {
 } from 'antd';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import { CollapseProps } from 'antd/lib';
-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 {
+	useCreateIngestionKey,
+	useCreateIngestionKeyLimit,
+	useDeleteIngestionKey,
+	useDeleteIngestionKeyLimit,
+	useGetIngestionKeys,
+	useSearchIngestionKeys,
+	useUpdateIngestionKey,
+	useUpdateIngestionKeyLimit,
+} from 'api/generated/services/gateway';
+import {
+	GatewaytypesIngestionKeyDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import Tags from 'components/Tags/Tags';
@@ -44,7 +51,6 @@ 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';
@@ -66,16 +72,12 @@ 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 {
-	IngestionKeyProps,
-	PaginationProps,
-} from 'types/api/ingestionKeys/types';
+import { PaginationProps } from 'types/api/ingestionKeys/types';
 import { MeterAggregateOperator } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 import { getDaysUntilExpiry } from 'utils/timeUtils';
@@ -86,6 +88,10 @@ 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,
@@ -111,6 +117,8 @@ export const showErrorNotification = (
 ): void => {
 	notifications.error({
 		message: err.message || SOMETHING_WENT_WRONG,
+		description: (err as AxiosError<RenderErrorResponseDTO>).response?.data?.error
+			?.message,
 	});
 };
 
@@ -163,15 +171,20 @@ function MultiIngestionSettings(): JSX.Element {
 	const [updatedTags, setUpdatedTags] = useState<string[]>([]);
 	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 	const [isEditAddLimitOpen, setIsEditAddLimitOpen] = useState(false);
-	const [activeAPIKey, setActiveAPIKey] = useState<IngestionKeyProps | null>();
+	const [
+		activeAPIKey,
+		setActiveAPIKey,
+	] = useState<GatewaytypesIngestionKeyDTO | null>(null);
 	const [activeSignal, setActiveSignal] = useState<LimitProps | null>(null);
 
 	const [searchValue, setSearchValue] = useState<string>('');
 	const [searchText, setSearchText] = useState<string>('');
-	const [dataSource, setDataSource] = useState<IngestionKeyProps[]>([]);
+	const [dataSource, setDataSource] = useState<GatewaytypesIngestionKeyDTO[]>(
+		[],
+	);
 	const [paginationParams, setPaginationParams] = useState<PaginationProps>({
-		page: 1,
-		per_page: 10,
+		page: FIRST_PAGE,
+		per_page: INITIAL_PAGE_SIZE,
 	});
 
 	const [totalIngestionKeys, setTotalIngestionKeys] = useState(0);
@@ -186,7 +199,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const [
 		createLimitForIngestionKeyError,
 		setCreateLimitForIngestionKeyError,
-	] = useState<ErrorResponse | null>(null);
+	] = useState<string | null>(null);
 
 	const [
 		hasUpdateLimitForIngestionKeyError,
@@ -196,7 +209,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const [
 		updateLimitForIngestionKeyError,
 		setUpdateLimitForIngestionKeyError,
-	] = useState<ErrorResponse | null>(null);
+	] = useState<string | null>(null);
 
 	const { t } = useTranslation(['ingestionKeys']);
 
@@ -216,7 +229,11 @@ function MultiIngestionSettings(): JSX.Element {
 		handleFormReset();
 	};
 
-	const showDeleteModal = (apiKey: IngestionKeyProps): void => {
+	const showDeleteModal = (apiKey: GatewaytypesIngestionKeyDTO): void => {
+		setHasCreateLimitForIngestionKeyError(false);
+		setCreateLimitForIngestionKeyError(null);
+		setHasUpdateLimitForIngestionKeyError(false);
+		setUpdateLimitForIngestionKeyError(null);
 		setActiveAPIKey(apiKey);
 		setIsDeleteModalOpen(true);
 	};
@@ -233,7 +250,11 @@ function MultiIngestionSettings(): JSX.Element {
 		setIsAddModalOpen(false);
 	};
 
-	const showEditModal = (apiKey: IngestionKeyProps): void => {
+	const showEditModal = (apiKey: GatewaytypesIngestionKeyDTO): void => {
+		setHasCreateLimitForIngestionKeyError(false);
+		setCreateLimitForIngestionKeyError(null);
+		setHasUpdateLimitForIngestionKeyError(false);
+		setUpdateLimitForIngestionKeyError(null);
 		setActiveAPIKey(apiKey);
 		handleFormReset();
 		setUpdatedTags(apiKey.tags || []);
@@ -248,6 +269,10 @@ function MultiIngestionSettings(): JSX.Element {
 	};
 
 	const showAddModal = (): void => {
+		setHasCreateLimitForIngestionKeyError(false);
+		setCreateLimitForIngestionKeyError(null);
+		setHasUpdateLimitForIngestionKeyError(false);
+		setUpdateLimitForIngestionKeyError(null);
 		setUpdatedTags([]);
 		setActiveAPIKey(null);
 		setIsAddModalOpen(true);
@@ -258,27 +283,62 @@ 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: IngestionKeys,
-		isLoading,
-		isRefetching,
-		refetch: refetchAPIKeys,
-		error,
-		isError,
-	} = useGetAllIngestionsKeys({
-		search: searchText,
-		...paginationParams,
-	});
+		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;
 
 	useEffect(() => {
-		setActiveAPIKey(IngestionKeys?.data.data[0]);
-	}, [IngestionKeys]);
-
-	useEffect(() => {
-		setDataSource(IngestionKeys?.data.data || []);
-		setTotalIngestionKeys(IngestionKeys?.data?._pagination?.total || 0);
+		setDataSource(ingestionKeys?.data.data?.keys || []);
+		setTotalIngestionKeys(ingestionKeys?.data?.data?._pagination?.total || 0);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [IngestionKeys?.data?.data]);
+	}, [ingestionKeys?.data?.data]);
 
 	useEffect(() => {
 		if (isError) {
@@ -297,6 +357,7 @@ function MultiIngestionSettings(): JSX.Element {
 
 	const clearSearch = (): void => {
 		setSearchValue('');
+		setSearchText('');
 	};
 
 	const {
@@ -309,101 +370,54 @@ function MultiIngestionSettings(): JSX.Element {
 	const {
 		mutate: createIngestionKey,
 		isLoading: isLoadingCreateAPIKey,
-	} = useMutation(createIngestionKeyApi, {
-		onSuccess: (data) => {
-			setActiveAPIKey(data.payload);
-			setUpdatedTags([]);
-			hideAddViewModal();
-			refetchAPIKeys();
-		},
-		onError: (error) => {
-			showErrorNotification(notifications, error as AxiosError);
-		},
-	});
+	} = useCreateIngestionKey<AxiosError<RenderErrorResponseDTO>>();
 
-	const { mutate: updateAPIKey, isLoading: isLoadingUpdateAPIKey } = useMutation(
-		updateIngestionKey,
-		{
-			onSuccess: () => {
-				refetchAPIKeys();
-				setIsEditModalOpen(false);
-			},
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-			},
-		},
-	);
+	const {
+		mutate: updateAPIKey,
+		isLoading: isLoadingUpdateAPIKey,
+	} = useUpdateIngestionKey<AxiosError<RenderErrorResponseDTO>>();
 
-	const { mutate: deleteAPIKey, isLoading: isDeleteingAPIKey } = useMutation(
-		deleteIngestionKey,
-		{
-			onSuccess: () => {
-				refetchAPIKeys();
-				setIsDeleteModalOpen(false);
-			},
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-			},
-		},
-	);
+	const {
+		mutate: deleteAPIKey,
+		isLoading: isDeleteingAPIKey,
+	} = useDeleteIngestionKey<AxiosError<RenderErrorResponseDTO>>();
 
 	const {
 		mutate: createLimitForIngestionKey,
 		isLoading: isLoadingLimitForKey,
-	} = useMutation(createLimitForIngestionKeyApi, {
-		onSuccess: () => {
-			setActiveSignal(null);
-			setActiveAPIKey(null);
-			setIsEditAddLimitOpen(false);
-			setUpdatedTags([]);
-			hideAddViewModal();
-			refetchAPIKeys();
-			setHasCreateLimitForIngestionKeyError(false);
-		},
-		onError: (error: ErrorResponse) => {
-			setHasCreateLimitForIngestionKeyError(true);
-			setCreateLimitForIngestionKeyError(error);
-		},
-	});
+	} = useCreateIngestionKeyLimit<AxiosError<RenderErrorResponseDTO>>();
 
 	const {
 		mutate: updateLimitForIngestionKey,
 		isLoading: isLoadingUpdatedLimitForKey,
-	} = useMutation(updateLimitForIngestionKeyApi, {
-		onSuccess: () => {
-			setActiveSignal(null);
-			setActiveAPIKey(null);
-			setIsEditAddLimitOpen(false);
-			setUpdatedTags([]);
-			hideAddViewModal();
-			refetchAPIKeys();
-			setHasUpdateLimitForIngestionKeyError(false);
-		},
-		onError: (error: ErrorResponse) => {
-			setHasUpdateLimitForIngestionKeyError(true);
-			setUpdateLimitForIngestionKeyError(error);
-		},
-	});
+	} = useUpdateIngestionKeyLimit<AxiosError<RenderErrorResponseDTO>>();
 
-	const { mutate: deleteLimitForKey, isLoading: isDeletingLimit } = useMutation(
-		deleteLimitsForIngestionKey,
-		{
-			onSuccess: () => {
-				setIsDeleteModalOpen(false);
-				setIsDeleteLimitModalOpen(false);
-				refetchAPIKeys();
-			},
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-			},
-		},
-	);
+	const {
+		mutate: deleteLimitForKey,
+		isLoading: isDeletingLimit,
+	} = useDeleteIngestionKeyLimit<AxiosError<RenderErrorResponseDTO>>();
 
 	const onDeleteHandler = (): void => {
 		clearSearch();
 
-		if (activeAPIKey) {
-			deleteAPIKey(activeAPIKey.id);
+		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);
+					},
+				},
+			);
 		}
 	};
 
@@ -411,15 +425,31 @@ function MultiIngestionSettings(): JSX.Element {
 		editForm
 			.validateFields()
 			.then((values) => {
-				if (activeAPIKey) {
-					updateAPIKey({
-						id: activeAPIKey.id,
-						data: {
-							name: values.name,
-							tags: updatedTags,
-							expires_at: dayjs(values.expires_at).endOf('day').toISOString(),
+				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(),
+								),
+							},
 						},
-					});
+						{
+							onSuccess: () => {
+								notifications.success({
+									message: 'Ingestion key updated successfully',
+								});
+								refetchAPIKeys();
+								setIsEditModalOpen(false);
+							},
+							onError: (error) => {
+								showErrorNotification(notifications, error as AxiosError);
+							},
+						},
+					);
 				}
 			})
 			.catch((errorInfo) => {
@@ -435,10 +465,30 @@ function MultiIngestionSettings(): JSX.Element {
 					const requestPayload = {
 						name: values.name,
 						tags: updatedTags,
-						expires_at: dayjs(values.expires_at).endOf('day').toISOString(),
+						expires_at: new Date(dayjs(values.expires_at).endOf('day').toISOString()),
 					};
 
-					createIngestionKey(requestPayload);
+					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);
+							},
+						},
+					);
 				}
 			})
 			.catch((errorInfo) => {
@@ -465,7 +515,7 @@ function MultiIngestionSettings(): JSX.Element {
 		formatTimezoneAdjustedTimestamp(date, DATE_TIME_FORMATS.UTC_MONTH_COMPACT);
 
 	const showDeleteLimitModal = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		limit: LimitProps,
 	): void => {
 		setActiveAPIKey(APIKey);
@@ -489,9 +539,17 @@ function MultiIngestionSettings(): JSX.Element {
 
 	/* eslint-disable sonarjs/cognitive-complexity */
 	const handleAddLimit = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		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,
@@ -576,13 +634,49 @@ function MultiIngestionSettings(): JSX.Element {
 			return;
 		}
 
-		createLimitForIngestionKey(payload);
+		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',
+					);
+				},
+			},
+		);
 	};
 
 	const handleUpdateLimit = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signal: LimitProps,
 	): void => {
+		if (!signal.id) {
+			notifications.error({
+				message: 'Invalid limit',
+				description: 'Cannot update limit without a valid ID',
+			});
+			return;
+		}
+
 		const {
 			dailyLimit,
 			secondsLimit,
@@ -644,7 +738,34 @@ function MultiIngestionSettings(): JSX.Element {
 			}
 		}
 
-		updateLimitForIngestionKey(payload);
+		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',
+					);
+				},
+			},
+		);
 	};
 	/* eslint-enable sonarjs/cognitive-complexity */
 
@@ -656,7 +777,7 @@ function MultiIngestionSettings(): JSX.Element {
 	};
 
 	const enableEditLimitMode = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signal: LimitProps,
 	): void => {
 		const dayCount = signal?.config?.day?.count;
@@ -665,6 +786,11 @@ 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,
@@ -703,14 +829,31 @@ function MultiIngestionSettings(): JSX.Element {
 
 	const onDeleteLimitHandler = (): void => {
 		if (activeSignal && activeSignal.id) {
-			deleteLimitForKey(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);
+					},
+				},
+			);
 		}
 	};
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
 	const handleCreateAlert = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signal: LimitProps,
 	): void => {
 		let metricName = '';
@@ -771,31 +914,61 @@ function MultiIngestionSettings(): JSX.Element {
 		history.push(URL);
 	};
 
-	const columns: AntDTableProps<IngestionKeyProps>['columns'] = [
+	const columns: AntDTableProps<GatewaytypesIngestionKeyDTO>['columns'] = [
 		{
 			title: 'Ingestion Key',
 			key: 'ingestion-key',
 			// eslint-disable-next-line sonarjs/cognitive-complexity
-			render: (APIKey: IngestionKeyProps): JSX.Element => {
-				const createdOn = getFormattedTime(
-					APIKey.created_at,
-					formatTimezoneAdjustedTimestamp,
-				);
+			render: (APIKey: GatewaytypesIngestionKeyDTO): JSX.Element => {
+				const createdOn = APIKey?.created_at
+					? getFormattedTime(
+							dayjs(APIKey.created_at).toISOString(),
+							formatTimezoneAdjustedTimestamp,
+					  )
+					: '';
 
 				const expiresOn =
-					!APIKey?.expires_at || APIKey?.expires_at === '0001-01-01T00:00:00Z'
+					!APIKey?.expires_at ||
+					dayjs(APIKey?.expires_at).toISOString() === '0001-01-01T00:00:00.000Z'
 						? 'No Expiry'
-						: getFormattedTime(APIKey?.expires_at, formatTimezoneAdjustedTimestamp);
+						: getFormattedTime(
+								dayjs(APIKey?.expires_at).toISOString(),
+								formatTimezoneAdjustedTimestamp,
+						  );
 
-				const updatedOn = getFormattedTime(
-					APIKey?.updated_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);
+				};
 
 				// Convert array of limits to a dictionary for quick access
 				const limitsDict: Record<string, LimitProps> = {};
-				APIKey.limits?.forEach((limitItem: LimitProps) => {
-					limitsDict[limitItem.signal] = limitItem;
+				APIKey.limits?.forEach((limitItem) => {
+					if (limitItem.signal && limitItem.id) {
+						limitsDict[limitItem.signal] = limitItem as LimitProps;
+					}
 				});
 
 				const hasLimits = (signalName: string): boolean => !!limitsDict[signalName];
@@ -812,39 +985,25 @@ function MultiIngestionSettings(): JSX.Element {
 
 									<div className="ingestion-key-value">
 										<Typography.Text>
-											{APIKey?.value.substring(0, 2)}********
-											{APIKey?.value.substring(APIKey.value.length - 2).trim()}
+											{APIKey?.value?.substring(0, 2)}********
+											{APIKey?.value
+												?.substring(APIKey?.value?.length ? APIKey.value.length - 2 : 0)
+												?.trim()}
 										</Typography.Text>
 
-										<Copy
-											className="copy-key-btn"
-											size={12}
-											onClick={(e): void => {
-												e.stopPropagation();
-												e.preventDefault();
-												handleCopyKey(APIKey.value);
-											}}
-										/>
+										<Copy className="copy-key-btn" size={12} onClick={onCopyKey} />
 									</div>
 								</div>
 								<div className="action-btn">
 									<Button
 										className="periscope-btn ghost"
 										icon={<PenLine size={14} />}
-										onClick={(e): void => {
-											e.stopPropagation();
-											e.preventDefault();
-											showEditModal(APIKey);
-										}}
+										onClick={onEditKey}
 									/>
 									<Button
 										className="periscope-btn ghost"
 										icon={<Trash2 color={Color.BG_CHERRY_500} size={14} />}
-										onClick={(e): void => {
-											e.stopPropagation();
-											e.preventDefault();
-											showDeleteModal(APIKey);
-										}}
+										onClick={onDeleteKey}
 									/>
 								</div>
 							</div>
@@ -854,7 +1013,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>
 
@@ -906,6 +1065,39 @@ 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">
@@ -916,22 +1108,18 @@ function MultiIngestionSettings(): JSX.Element {
 																		<Button
 																			className="periscope-btn ghost"
 																			icon={<PenLine size={14} />}
-																			disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
-																			onClick={(e): void => {
-																				e.stopPropagation();
-																				e.preventDefault();
-																				enableEditLimitMode(APIKey, limit);
-																			}}
+																			disabled={
+																				!!(activeAPIKey?.id === APIKey?.id && activeSignal)
+																			}
+																			onClick={onEditSignalLimit}
 																		/>
 																		<Button
 																			className="periscope-btn ghost"
 																			icon={<Trash2 color={Color.BG_CHERRY_500} size={14} />}
-																			disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
-																			onClick={(e): void => {
-																				e.stopPropagation();
-																				e.preventDefault();
-																				showDeleteLimitModal(APIKey, limit);
-																			}}
+																			disabled={
+																				!!(activeAPIKey?.id === APIKey?.id && activeSignal)
+																			}
+																			onClick={onDeleteSignalLimit}
 																		/>
 																	</>
 																) : (
@@ -940,16 +1128,8 @@ function MultiIngestionSettings(): JSX.Element {
 																		size="small"
 																		shape="round"
 																		icon={<PlusIcon size={14} />}
-																		disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
-																		onClick={(e): void => {
-																			e.stopPropagation();
-																			e.preventDefault();
-																			enableEditLimitMode(APIKey, {
-																				id: signalName,
-																				signal: signalName,
-																				config: {},
-																			});
-																		}}
+																		disabled={!!(activeAPIKey?.id === APIKey?.id && activeSignal)}
+																		onClick={onAddSignalLimit}
 																	>
 																		Limits
 																	</Button>
@@ -958,7 +1138,7 @@ function MultiIngestionSettings(): JSX.Element {
 														</div>
 
 														<div className="signal-limit-values">
-															{activeAPIKey?.id === APIKey.id &&
+															{activeAPIKey?.id === APIKey?.id &&
 															activeSignal?.signal === signalName &&
 															isEditAddLimitOpen ? (
 																<Form
@@ -1154,27 +1334,27 @@ function MultiIngestionSettings(): JSX.Element {
 																		</div>
 																	</div>
 
-																	{activeAPIKey?.id === APIKey.id &&
+																	{activeAPIKey?.id === APIKey?.id &&
 																		activeSignal.signal === signalName &&
 																		!isLoadingLimitForKey &&
 																		hasCreateLimitForIngestionKeyError &&
-																		createLimitForIngestionKeyError?.error && (
+																		createLimitForIngestionKeyError && (
 																			<div className="error">
-																				{createLimitForIngestionKeyError?.error}
+																				{createLimitForIngestionKeyError}
 																			</div>
 																		)}
 
-																	{activeAPIKey?.id === APIKey.id &&
+																	{activeAPIKey?.id === APIKey?.id &&
 																		activeSignal.signal === signalName &&
 																		!isLoadingLimitForKey &&
 																		hasUpdateLimitForIngestionKeyError &&
-																		updateLimitForIngestionKeyError?.error && (
+																		updateLimitForIngestionKeyError && (
 																			<div className="error">
-																				{updateLimitForIngestionKeyError?.error}
+																				{updateLimitForIngestionKeyError}
 																			</div>
 																		)}
 
-																	{activeAPIKey?.id === APIKey.id &&
+																	{activeAPIKey?.id === APIKey?.id &&
 																		activeSignal.signal === signalName &&
 																		isEditAddLimitOpen && (
 																			<div className="signal-limit-save-discard">
@@ -1188,13 +1368,7 @@ function MultiIngestionSettings(): JSX.Element {
 																					loading={
 																						isLoadingLimitForKey || isLoadingUpdatedLimitForKey
 																					}
-																					onClick={(): void => {
-																						if (!hasLimits(signalName)) {
-																							handleAddLimit(APIKey, signalName);
-																						} else {
-																							handleUpdateLimit(APIKey, limitsDict[signalName]);
-																						}
-																					}}
+																					onClick={onSaveSignalLimit}
 																				>
 																					Save
 																				</Button>
@@ -1275,9 +1449,7 @@ function MultiIngestionSettings(): JSX.Element {
 																					className="set-alert-btn periscope-btn ghost"
 																					type="text"
 																					data-testid={`set-alert-btn-${signalName}`}
-																					onClick={(): void =>
-																						handleCreateAlert(APIKey, limitsDict[signalName])
-																					}
+																					onClick={onCreateSignalAlert}
 																				/>
 																			</Tooltip>
 																		)}
@@ -1392,7 +1564,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const handleTableChange = (pagination: TablePaginationConfig): void => {
 		setPaginationParams({
 			page: pagination?.current || 1,
-			per_page: 10,
+			per_page: INITIAL_PAGE_SIZE,
 		});
 	};
 
@@ -1490,7 +1662,7 @@ function MultiIngestionSettings(): JSX.Element {
 					showHeader={false}
 					onChange={handleTableChange}
 					pagination={{
-						pageSize: paginationParams?.per_page,
+						pageSize: isSearching ? SEARCH_PAGE_SIZE : 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,3 +1,4 @@
+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';
@@ -18,6 +19,12 @@ 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', () => {
@@ -86,32 +93,34 @@ 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: TestAllIngestionKeyProps = {
+		const response: TestGatewayIngestionKeysResponse = {
 			status: 'success',
-			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 },
+			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 },
+			},
 		};
 
 		server.use(
-			rest.get('*/workspaces/me/keys*', (_req, res, ctx) =>
+			rest.get('*/api/v2/gateway/ingestion_keys*', (_req, res, ctx) =>
 				res(ctx.status(200), ctx.json(response)),
 			),
 		);
@@ -257,4 +266,95 @@ 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,8 +16,6 @@ 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,
@@ -52,23 +50,12 @@ 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,
-				dotMetricsEnabled,
-			);
+			return getNodeQueryPayload(clusterName, nodeName, start, end);
 		}
-		return getHostQueryPayload(hostName, start, end, dotMetricsEnabled);
-	}, [nodeName, hostName, clusterName, start, end, dotMetricsEnabled]);
+		return getHostQueryPayload(hostName, start, end);
+	}, [nodeName, hostName, clusterName, start, end]);
 
 	const widgetInfo = nodeName ? nodeWidgetInfo : hostWidgetInfo;
 	const queries = useQueries(

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

@@ -11,13 +11,11 @@ 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({
@@ -53,14 +51,9 @@ 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, dotMetricsEnabled),
-		[clusterName, end, podName, start, dotMetricsEnabled],
+		() => getPodQueryPayload(clusterName, podName, start, end),
+		[clusterName, end, podName, start],
 	);
 	const queries = useQueries(
 		queryPayloads.map((payload) => ({