fix: added fix for legend test

* feat: adding tests for cloudintegration api

* refactor: updating method

* ci: updated logs

* ci: fmt fixes

* refactor: removing unused vars

* refactor: updating test assertion

* refactor: worked on review comments

* fix: fixing tests

* refactor: using yield

* refactor: fixing lint issues

* refactor: cleaning tests

* refactor: review comments

* refactor: removing unused imports

* refactor: updating fixture name

---------

Co-authored-by: Vikrant Gupta <vikrant@signoz.io>

.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:

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/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/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/NewSelect/__test__/VariableItem.integration.test.tsx

@@ -78,10 +78,12 @@ function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
 describe('VariableItem Integration Tests', () => {
 	let user: ReturnType<typeof userEvent.setup>;
 	let mockOnValueUpdate: jest.Mock;
+	let mockSetVariablesToGetUpdated: jest.Mock;
 
 	beforeEach(() => {
 		user = userEvent.setup();
 		mockOnValueUpdate = jest.fn();
+		mockSetVariablesToGetUpdated = jest.fn();
 		jest.clearAllMocks();
 	});
 
@@ -100,6 +102,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -145,6 +150,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -187,6 +195,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -236,6 +247,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -258,6 +272,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -291,6 +308,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -324,6 +344,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -346,6 +369,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -379,6 +405,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -432,6 +461,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -476,6 +508,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -513,6 +548,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -544,6 +582,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);

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

@@ -9,15 +9,11 @@ import {
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
-import { getVariableFetchContext } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import {
-	enqueueDescendants,
-	enqueueFetchAll,
-} from 'providers/Dashboard/store/variableFetchStore';
 import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { onUpdateVariableNode } from './util';
 import VariableItem from './VariableItem';
 
 import './DashboardVariableSelection.styles.scss';
@@ -26,6 +22,8 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const {
 		setSelectedDashboard,
 		updateLocalStorageDashboardVariables,
+		variablesToGetUpdated,
+		setVariablesToGetUpdated,
 	} = useDashboard();
 
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
@@ -59,7 +57,9 @@ function DashboardVariableSelection(): JSX.Element | null {
 
 	// Trigger refetch when dependency order changes or global time changes
 	useEffect(() => {
-		enqueueFetchAll(getVariableFetchContext());
+		if (dependencyData?.order && dependencyData.order.length > 0) {
+			setVariablesToGetUpdated(dependencyData?.order || []);
+		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dependencyOrderKey, minTime, maxTime]);
 
@@ -121,14 +121,29 @@ function DashboardVariableSelection(): JSX.Element | null {
 				return prev;
 			});
 
-			// Cascade: enqueue query-type descendants for refetching
-			enqueueDescendants(name, getVariableFetchContext());
+			if (dependencyData) {
+				const updatedVariables: string[] = [];
+				onUpdateVariableNode(
+					name,
+					dependencyData.graph,
+					dependencyData.order,
+					(node) => updatedVariables.push(node),
+				);
+				setVariablesToGetUpdated((prev) => [
+					...new Set([...prev, ...updatedVariables.filter((v) => v !== name)]),
+				]);
+			} else {
+				setVariablesToGetUpdated((prev) => prev.filter((v) => v !== name));
+			}
 		},
 		[
+			// This can be removed
 			dashboardVariables,
 			updateLocalStorageDashboardVariables,
+			dependencyData,
 			updateUrlVariable,
 			setSelectedDashboard,
+			setVariablesToGetUpdated,
 		],
 	);
 
@@ -143,6 +158,9 @@ function DashboardVariableSelection(): JSX.Element | null {
 						existingVariables={dashboardVariables}
 						variableData={variable}
 						onValueUpdate={onValueUpdate}
+						variablesToGetUpdated={variablesToGetUpdated}
+						setVariablesToGetUpdated={setVariablesToGetUpdated}
+						dependencyData={dependencyData}
 					/>
 				);
 			})}

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

@@ -5,15 +5,8 @@ import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import useDebounce from 'hooks/useDebounce';
 import { isEmpty } from 'lodash-es';
-import { getVariableFetchContext } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import {
-	completeFetch,
-	failFetch,
-	variableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
@@ -111,12 +104,6 @@ function DynamicVariableInput({
 		(state) => state.globalTime,
 	);
 
-	const {
-		isFetching: isVariableFetching,
-		hasLoaded,
-		state: fetchState,
-	} = useVariableFetchState(variableData.name || '');
-
 	// existing query is the query made from the other dynamic variables around this one with there current values
 	// for e.g. k8s.namespace.name IN ["zeus", "gene"] AND doc_op_type IN ["test"]
 	// eslint-disable-next-line sonarjs/cognitive-complexity
@@ -208,9 +195,9 @@ function DynamicVariableInput({
 		],
 		{
 			enabled:
+				variableData.type === 'DYNAMIC' &&
 				!!variableData.dynamicVariablesSource &&
-				!!variableData.dynamicVariablesAttribute &&
-				(isVariableFetching || (fetchState === 'idle' && hasLoaded)),
+				!!variableData.dynamicVariablesAttribute,
 			queryFn: () =>
 				getFieldValues(
 					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
@@ -225,7 +212,6 @@ function DynamicVariableInput({
 					maxTime,
 					existingQuery,
 				),
-			// eslint-disable-next-line sonarjs/cognitive-complexity
 			onSuccess: (data) => {
 				const newNormalizedValues = data.data?.normalizedValues || [];
 				const newRelatedValues = data.data?.relatedValues || [];
@@ -272,16 +258,6 @@ function DynamicVariableInput({
 					];
 					applyDefaultIfNeeded(allNewOptions);
 				}
-
-				// Complete state machine fetch (skip for search/sibling-triggered refetches)
-				if (variableData.name) {
-					const currentState = variableFetchStore.getSnapshot().states[
-						variableData.name
-					];
-					if (currentState === 'loading' || currentState === 'revalidating') {
-						completeFetch(variableData.name, getVariableFetchContext());
-					}
-				}
 			},
 			onError: (error: any) => {
 				if (error) {
@@ -298,16 +274,6 @@ function DynamicVariableInput({
 					const isRetryable = checkIfRetryableError(error);
 					setIsRetryableError(isRetryable);
 				}
-
-				// Fail state machine fetch (skip for search/sibling-triggered refetches)
-				if (variableData.name) {
-					const currentState = variableFetchStore.getSnapshot().states[
-						variableData.name
-					];
-					if (currentState === 'loading' || currentState === 'revalidating') {
-						failFetch(variableData.name, getVariableFetchContext());
-					}
-				}
 			},
 		},
 	);
@@ -370,7 +336,6 @@ function DynamicVariableInput({
 			showRetryButton={isRetryableError}
 			showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
 			onSearch={handleSearch}
-			waiting={fetchState === 'waiting'}
 		/>
 	);
 }

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

@@ -3,14 +3,8 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import sortValues from 'lib/dashboardVariables/sortVariableValues';
 import { isArray, isString } from 'lodash-es';
-import { getVariableFetchContext } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import {
-	completeFetch,
-	failFetch,
-} from 'providers/Dashboard/store/variableFetchStore';
 import { AppState } from 'store/reducers';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -18,18 +12,26 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { variablePropsToPayloadVariables } from '../utils';
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { areArraysEqual } from './util';
+import { areArraysEqual, checkAPIInvocation } from './util';
 import { VariableItemProps } from './VariableItem';
 import { queryVariableSelectStrategy } from './variableSelectStrategy/queryVariableSelectStrategy';
 
 type QueryVariableInputProps = Pick<
 	VariableItemProps,
-	'variableData' | 'existingVariables' | 'onValueUpdate'
+	| 'variableData'
+	| 'existingVariables'
+	| 'onValueUpdate'
+	| 'variablesToGetUpdated'
+	| 'setVariablesToGetUpdated'
+	| 'dependencyData'
 >;
 
 function QueryVariableInput({
 	variableData,
 	existingVariables,
+	variablesToGetUpdated,
+	setVariablesToGetUpdated,
+	dependencyData,
 	onValueUpdate,
 }: QueryVariableInputProps): JSX.Element {
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
@@ -41,10 +43,6 @@ function QueryVariableInput({
 		(state) => state.globalTime,
 	);
 
-	const { isFetching, state: fetchState } = useVariableFetchState(
-		variableData.name || '',
-	);
-
 	const {
 		tempSelection,
 		setTempSelection,
@@ -62,6 +60,16 @@ function QueryVariableInput({
 		strategy: queryVariableSelectStrategy,
 	});
 
+	const validVariableUpdate = useCallback((): boolean => {
+		if (!variableData.name) {
+			return false;
+		}
+		return Boolean(
+			variablesToGetUpdated.length &&
+				variablesToGetUpdated[0] === variableData.name,
+		);
+	}, [variableData.name, variablesToGetUpdated]);
+
 	const getOptions = useCallback(
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(variablesRes: VariableResponseProps | null): void => {
@@ -95,7 +103,12 @@ function QueryVariableInput({
 							valueNotInList = true;
 						}
 
-						if (variableData.name && (valueNotInList || variableData.allSelected)) {
+						// variablesData.allSelected is added for the case where on change of options we need to update the
+						// local storage
+						if (
+							variableData.name &&
+							(validVariableUpdate() || valueNotInList || variableData.allSelected)
+						) {
 							if (
 								variableData.allSelected &&
 								variableData.multiSelect &&
@@ -128,6 +141,10 @@ function QueryVariableInput({
 						setOptionsData(newOptionsData);
 						// Apply default if no value is selected (e.g., new variable, first load)
 						applyDefaultIfNeeded(newOptionsData);
+					} else {
+						setVariablesToGetUpdated((prev) =>
+							prev.filter((name) => name !== variableData.name),
+						);
 					}
 				}
 			} catch (e) {
@@ -140,6 +157,8 @@ function QueryVariableInput({
 			onValueUpdate,
 			tempSelection,
 			setTempSelection,
+			validVariableUpdate,
+			setVariablesToGetUpdated,
 			applyDefaultIfNeeded,
 		],
 	);
@@ -150,9 +169,16 @@ function QueryVariableInput({
 			variableData.name || '',
 			`${minTime}`,
 			`${maxTime}`,
+			JSON.stringify(dependencyData?.order),
 		],
 		{
-			enabled: variableData && isFetching,
+			enabled:
+				variableData &&
+				checkAPIInvocation(
+					variablesToGetUpdated,
+					variableData,
+					dependencyData?.parentDependencyGraph,
+				),
 			queryFn: () =>
 				dashboardVariablesQuery({
 					query: variableData.queryValue || '',
@@ -161,9 +187,9 @@ function QueryVariableInput({
 			refetchOnWindowFocus: false,
 			onSuccess: (response) => {
 				getOptions(response.payload);
-				if (variableData.name) {
-					completeFetch(variableData.name, getVariableFetchContext());
-				}
+				setVariablesToGetUpdated((prev) =>
+					prev.filter((v) => v !== variableData.name),
+				);
 			},
 			onError: (error: {
 				details: {
@@ -180,9 +206,9 @@ function QueryVariableInput({
 					}
 					setErrorMessage(message);
 				}
-				if (variableData.name) {
-					failFetch(variableData.name, getVariableFetchContext());
-				}
+				setVariablesToGetUpdated((prev) =>
+					prev.filter((v) => v !== variableData.name),
+				);
 			},
 		},
 	);
@@ -216,7 +242,6 @@ function QueryVariableInput({
 			loading={isLoading}
 			errorMessage={errorMessage}
 			onRetry={handleRetry}
-			waiting={fetchState === 'waiting'}
 		/>
 	);
 }

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

@@ -28,7 +28,6 @@ interface SelectVariableInputProps {
 	showRetryButton?: boolean;
 	showIncompleteDataMessage?: boolean;
 	onSearch?: (searchTerm: string) => void;
-	waiting?: boolean;
 }
 
 const MAX_TAG_DISPLAY_VALUES = 10;
@@ -66,7 +65,6 @@ function SelectVariableInput({
 	showRetryButton,
 	showIncompleteDataMessage,
 	onSearch,
-	waiting,
 }: SelectVariableInputProps): JSX.Element {
 	const commonProps = useMemo(
 		() => ({
@@ -80,17 +78,14 @@ function SelectVariableInput({
 			className: 'variable-select',
 			popupClassName: 'dropdown-styles',
 			getPopupContainer: popupContainer,
+			style: SelectItemStyle,
 			showSearch: true,
 			bordered: false,
 
 			// changing props
 			'data-testid': 'variable-select',
 			onChange,
-			loading: loading || waiting,
-			style: {
-				...SelectItemStyle,
-				...(waiting && { opacity: 0.5, pointerEvents: 'none' as const }),
-			},
+			loading,
 			options,
 			errorMessage,
 			onRetry,
@@ -106,7 +101,6 @@ function SelectVariableInput({
 			defaultValue,
 			onChange,
 			loading,
-			waiting,
 			options,
 			value,
 			errorMessage,

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

@@ -47,6 +47,14 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -61,6 +69,14 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -76,6 +92,14 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -109,6 +133,14 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -131,6 +163,14 @@ describe('VariableItem', () => {
 					variableData={customVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -145,6 +185,14 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);

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

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
+import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import CustomVariableInput from './CustomVariableInput';
@@ -20,12 +21,18 @@ export interface VariableItemProps {
 		allSelected: boolean,
 		haveCustomValuesSelected?: boolean,
 	) => void;
+	variablesToGetUpdated: string[];
+	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
+	dependencyData: IDependencyData | null;
 }
 
 function VariableItem({
 	variableData,
 	onValueUpdate,
 	existingVariables,
+	variablesToGetUpdated,
+	setVariablesToGetUpdated,
+	dependencyData,
 }: VariableItemProps): JSX.Element {
 	const { name, description, type: variableType } = variableData;
 
@@ -58,6 +65,9 @@ function VariableItem({
 						variableData={variableData}
 						onValueUpdate={onValueUpdate}
 						existingVariables={existingVariables}
+						variablesToGetUpdated={variablesToGetUpdated}
+						setVariablesToGetUpdated={setVariablesToGetUpdated}
+						dependencyData={dependencyData}
 					/>
 				)}
 				{variableType === 'DYNAMIC' && (

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

@@ -8,6 +8,14 @@ import '@testing-library/jest-dom/extend-expect';
 import VariableItem from '../VariableItem';
 
 const mockOnValueUpdate = jest.fn();
+const mockSetVariablesToGetUpdated = jest.fn();
+
+const baseDependencyData = {
+	order: [],
+	graph: {},
+	parentDependencyGraph: {},
+	hasCycle: false,
+};
 
 const TEST_VARIABLE_ID = 'test_variable';
 const VARIABLE_SELECT_TESTID = 'variable-select';
@@ -23,6 +31,9 @@ const renderVariableItem = (
 				variableData={variableData}
 				existingVariables={{}}
 				onValueUpdate={mockOnValueUpdate}
+				variablesToGetUpdated={[]}
+				setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+				dependencyData={baseDependencyData}
 			/>
 		</MockQueryClientProvider>,
 	);

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

@@ -1,5 +1,5 @@
 import { OptionData } from 'components/NewSelect/types';
-import { isNull } from 'lodash-es';
+import { isEmpty, isNull } from 'lodash-es';
 import {
 	IDashboardVariables,
 	IDependencyData,
@@ -284,6 +284,33 @@ export const onUpdateVariableNode = (
 	});
 };
 
+export const checkAPIInvocation = (
+	variablesToGetUpdated: string[],
+	variableData: IDashboardVariable,
+	parentDependencyGraph?: VariableGraph,
+): boolean => {
+	if (isEmpty(variableData.name)) {
+		return false;
+	}
+
+	if (isEmpty(parentDependencyGraph)) {
+		return false;
+	}
+
+	// if no dependency then true
+	const haveDependency =
+		parentDependencyGraph?.[variableData.name || '']?.length > 0;
+	if (!haveDependency) {
+		return true;
+	}
+
+	// if variable is in the list and has dependency then check if its the top element in the queue then true else false
+	return (
+		variablesToGetUpdated.length > 0 &&
+		variablesToGetUpdated[0] === variableData.name
+	);
+};
+
 export const getOptionsForDynamicVariable = (
 	normalizedValues: (string | number | boolean)[],
 	relatedValues: string[],

frontend/src/container/DashboardContainer/__test__/IntegrationTests.test.tsx

@@ -49,11 +49,15 @@ const mockDashboard = {
 // Mock the dashboard provider with stable functions to prevent infinite loops
 const mockSetSelectedDashboard = jest.fn();
 const mockUpdateLocalStorageDashboardVariables = jest.fn();
+const mockSetVariablesToGetUpdated = jest.fn();
+
 jest.mock('providers/Dashboard/Dashboard', () => ({
 	useDashboard: (): any => ({
 		selectedDashboard: mockDashboard,
 		setSelectedDashboard: mockSetSelectedDashboard,
 		updateLocalStorageDashboardVariables: mockUpdateLocalStorageDashboardVariables,
+		variablesToGetUpdated: ['env'], // Stable initial value
+		setVariablesToGetUpdated: mockSetVariablesToGetUpdated,
 	}),
 }));
 

frontend/src/container/DashboardContainer/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/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: false,
 			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/utils/__tests__/legendVisibilityUtils.test.ts

@@ -0,0 +1,168 @@
+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();
+		localStorage.clear();
+	});
+
+	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 a Map of label to visibility 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 instanceof Map).toBe(true);
+			expect(result?.get('CPU')).toBe(true);
+			expect(result?.get('Memory')).toBe(false);
+			expect(result?.get('Errors')).toBeUndefined();
+		});
+
+		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!.get('CPU')).toBe(true);
+			expect(stored!.get('Memory')).toBe(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!.get('CPU')).toBe(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!.get('CPU')).toBe(false);
+			expect(stored!.get('Memory')).toBe(true);
+		});
+
+		it('silently handles malformed existing JSON without throwing', () => {
+			localStorage.setItem(storageKey, '{invalid-json');
+
+			expect(() =>
+				updateSeriesVisibilityToLocalStorage('widget-1', [
+					{ label: 'CPU', show: true },
+				]),
+			).not.toThrow();
+		});
+	});
+});

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,
+		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/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/GridCardLayout/GridCard/index.tsx

@@ -6,7 +6,6 @@ import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
-import { useDependentVariablesFetching } from 'hooks/dashboard/useVariableFetchState';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
@@ -65,12 +64,8 @@ function GridCardGraph({
 		toScrollWidgetId,
 		setToScrollWidgetId,
 		setDashboardQueryRangeCalled,
+		variablesToGetUpdated,
 	} = useDashboard();
-
-	const anyDependentVarFetching = useDependentVariablesFetching(
-		widget.query,
-		variables,
-	);
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -182,6 +177,27 @@ function GridCardGraph({
 		[requestData.query],
 	);
 
+	// Bring back dependency on variable chaining for panels to refetch,
+	// but only for non-dynamic variables. We derive a stable token from
+	// the head of the variablesToGetUpdated queue when it's non-dynamic.
+	const nonDynamicVariableChainToken = useMemo(() => {
+		if (!variablesToGetUpdated || variablesToGetUpdated.length === 0) {
+			return undefined;
+		}
+		if (!variables) {
+			return undefined;
+		}
+		const headName = variablesToGetUpdated[0];
+		const variableObj = Object.values(variables).find(
+			(variable) => variable?.name === headName,
+		);
+		if (variableObj && variableObj.type !== 'DYNAMIC') {
+			return headName;
+		}
+		return undefined;
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [variablesToGetUpdated, variables]);
+
 	const queryResponse = useGetQueryRange(
 		{
 			...requestData,
@@ -221,6 +237,9 @@ function GridCardGraph({
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),
+				// Include non-dynamic variable chaining token to drive refetches
+				// only when a non-dynamic variable is at the head of the queue
+				...(nonDynamicVariableChainToken ? [nonDynamicVariableChainToken] : []),
 			],
 			retry(failureCount, error): boolean {
 				if (
@@ -233,7 +252,7 @@ function GridCardGraph({
 				return failureCount < 2;
 			},
 			keepPreviousData: true,
-			enabled: queryEnabledCondition && !anyDependentVarFetching,
+			enabled: queryEnabledCondition && !nonDynamicVariableChainToken,
 			refetchOnMount: false,
 			onError: (error) => {
 				const errorMessage =
@@ -299,7 +318,9 @@ function GridCardGraph({
 					version={version}
 					threshold={threshold}
 					headerMenuList={menuList}
-					isFetchingResponse={queryResponse.isFetching || anyDependentVarFetching}
+					isFetchingResponse={
+						queryResponse.isFetching || variablesToGetUpdated.length > 0
+					}
 					setRequestData={setRequestData}
 					onClickHandler={onClickHandler}
 					onDragSelect={onDragSelect}

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

@@ -35,10 +35,10 @@
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 		padding: 0px;
-		.group-by-clause {
+		.more-filter-actions {
 			display: flex;
 			align-items: center;
-			gap: 4px;
+			gap: 8px;
 			color: var(--bg-vanilla-400);
 			font-family: Inter;
 			font-size: 14px;
@@ -53,7 +53,7 @@
 			}
 		}
 
-		.group-by-clause:hover {
+		.more-filter-actions:hover {
 			background-color: unset !important;
 		}
 	}
@@ -65,7 +65,7 @@
 			border: 1px solid var(--bg-vanilla-400);
 			background: var(--bg-vanilla-100) !important;
 
-			.group-by-clause {
+			.more-filter-actions {
 				color: var(--bg-ink-400);
 			}
 		}

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable sonarjs/cognitive-complexity */
 import React, { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
@@ -16,7 +17,12 @@ import { MetricsType } from 'container/MetricsApplication/constant';
 import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
-import { ArrowDownToDot, ArrowUpFromDot, Ellipsis } from 'lucide-react';
+import {
+	ArrowDownToDot,
+	ArrowUpFromDot,
+	Ellipsis,
+	RefreshCw,
+} from 'lucide-react';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
 import { useTimezone } from 'providers/Timezone';
 import {
@@ -205,6 +211,70 @@ export default function TableViewActions(
 		viewName,
 	]);
 
+	const handleReplaceFilter = useCallback((): void => {
+		if (!stagedQuery) {
+			return;
+		}
+		const normalizedDataType: DataTypes | undefined =
+			dataType && Object.values(DataTypes).includes(dataType as DataTypes)
+				? (dataType as DataTypes)
+				: undefined;
+
+		const updatedQuery = updateQueriesData(
+			stagedQuery,
+			'queryData',
+			(item, index) => {
+				// Only replace filters for index 0
+				if (index === 0) {
+					const newFilterItem: BaseAutocompleteData = {
+						key: fieldFilterKey,
+						type: fieldType || '',
+						dataType: normalizedDataType,
+					};
+
+					// Create new filter items array with single IN filter
+					const newFilters = {
+						items: [
+							{
+								id: '',
+								key: newFilterItem,
+								op: OPERATORS.IN,
+								value: [parseFieldValue(fieldData.value)],
+							},
+						],
+						op: 'AND',
+					};
+
+					// Clear the expression and update filters
+					return {
+						...item,
+						filters: newFilters,
+						filter: { expression: '' },
+					};
+				}
+
+				return item;
+			},
+		);
+
+		const queryData: ICurrentQueryData = {
+			name: viewName,
+			id: updatedQuery.id,
+			query: updatedQuery,
+		};
+
+		handleChangeSelectedView?.(ExplorerViews.LIST, queryData);
+	}, [
+		stagedQuery,
+		updateQueriesData,
+		fieldFilterKey,
+		fieldType,
+		dataType,
+		fieldData,
+		handleChangeSelectedView,
+		viewName,
+	]);
+
 	// Memoize textToCopy computation
 	const textToCopy = useMemo(() => {
 		let text = fieldData.value;
@@ -327,13 +397,21 @@ export default function TableViewActions(
 								content={
 									<div>
 										<Button
-											className="group-by-clause"
+											className="more-filter-actions"
 											type="text"
 											icon={<GroupByIcon />}
 											onClick={handleGroupByAttribute}
 										>
 											Group By Attribute
 										</Button>
+										<Button
+											className="more-filter-actions"
+											type="text"
+											icon={<RefreshCw size={14} />}
+											onClick={handleReplaceFilter}
+										>
+											Replace filters with this value
+										</Button>
 									</div>
 								}
 								rootClassName="table-view-actions-content"
@@ -405,13 +483,21 @@ export default function TableViewActions(
 							content={
 								<div>
 									<Button
-										className="group-by-clause"
+										className="more-filter-actions"
 										type="text"
 										icon={<GroupByIcon />}
 										onClick={handleGroupByAttribute}
 									>
 										Group By Attribute
 									</Button>
+									<Button
+										className="more-filter-actions"
+										type="text"
+										icon={<RefreshCw size={14} />}
+										onClick={handleReplaceFilter}
+									>
+										Replace filters with this value
+									</Button>
 								</div>
 							}
 							rootClassName="table-view-actions-content"

frontend/src/container/Login/Login.styles.scss

@@ -407,6 +407,10 @@
 				color: var(--text-neutral-light-200) !important;
 			}
 
+			.ant-select-selection-item {
+				color: var(--text-ink-500) !important;
+			}
+
 			&:hover .ant-select-selector {
 				border-color: var(--bg-vanilla-300) !important;
 			}

frontend/src/container/Login/index.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { Button } from '@signozhq/button';
-import { Form, Input, Select, Tooltip, Typography } from 'antd';
+import { Form, Input, Select, Typography } from 'antd';
 import getVersion from 'api/v1/version/get';
 import get from 'api/v2/sessions/context/get';
 import post from 'api/v2/sessions/email_password/post';
@@ -220,6 +220,20 @@ function Login(): JSX.Element {
 		}
 	};
 
+	const handleForgotPasswordClick = useCallback((): void => {
+		const email = form.getFieldValue('email');
+
+		if (!email || !sessionsContext || !sessionsContext?.orgs?.length) {
+			return;
+		}
+
+		history.push(ROUTES.FORGOT_PASSWORD, {
+			email,
+			orgId: sessionsOrgId,
+			orgs: sessionsContext.orgs,
+		});
+	}, [form, sessionsContext, sessionsOrgId]);
+
 	useEffect(() => {
 		if (callbackAuthError) {
 			setErrorMessage(
@@ -345,11 +359,16 @@ function Login(): JSX.Element {
 						<ParentContainer>
 							<div className="password-label-container">
 								<Label htmlFor="Password">Password</Label>
-								<Tooltip title="Ask your admin to reset your password and send you a new invite link">
-									<Typography.Link className="forgot-password-link">
-										Forgot password?
-									</Typography.Link>
-								</Tooltip>
+								<Typography.Link
+									className="forgot-password-link"
+									href="#"
+									onClick={(event): void => {
+										event.preventDefault();
+										handleForgotPasswordClick();
+									}}
+								>
+									Forgot password?
+								</Typography.Link>
 							</div>
 							<FormContainer.Item name="password">
 								<Input.Password

frontend/src/container/MeterExplorer/Breakdown/graphs.ts

@@ -103,7 +103,7 @@ export const getTotalLogSizeWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.SUM,
 					spaceAggregation: 'sum',
-					stepInterval: 60,
+					stepInterval: null,
 					timeAggregation: 'increase',
 				},
 			],
@@ -140,7 +140,7 @@ export const getTotalTraceSizeWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.SUM,
 					spaceAggregation: 'sum',
-					stepInterval: 60,
+					stepInterval: null,
 					timeAggregation: 'increase',
 				},
 			],
@@ -177,7 +177,7 @@ export const getTotalMetricDatapointCountWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.SUM,
 					spaceAggregation: 'sum',
-					stepInterval: 60,
+					stepInterval: null,
 					timeAggregation: 'increase',
 				},
 			],
@@ -214,7 +214,7 @@ export const getLogCountWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: 60,
+					stepInterval: null,
 					timeAggregation: 'increase',
 				},
 			],
@@ -251,7 +251,7 @@ export const getLogSizeWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: 60,
+					stepInterval: null,
 					timeAggregation: 'increase',
 				},
 			],
@@ -288,7 +288,7 @@ export const getSpanCountWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: 60,
+					stepInterval: null,
 					timeAggregation: 'increase',
 				},
 			],
@@ -325,7 +325,7 @@ export const getSpanSizeWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: 60,
+					stepInterval: null,
 					timeAggregation: 'increase',
 				},
 			],
@@ -362,7 +362,7 @@ export const getMetricCountWidgetData = (): Widgets =>
 					queryName: 'A',
 					reduceTo: ReduceOperators.AVG,
 					spaceAggregation: 'sum',
-					stepInterval: 60,
+					stepInterval: null,
 					timeAggregation: 'increase',
 				},
 			],

frontend/src/container/OnboardingV2Container/IngestionDetails/IngestionDetails.tsx

@@ -2,13 +2,16 @@ import { useEffect, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button, Skeleton, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { useGetIngestionKeys } from 'api/generated/services/gateway';
+import {
+	GatewaytypesIngestionKeyDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import { DOCS_BASE_URL } from 'constants/app';
 import { useGetGlobalConfig } from 'hooks/globalConfig/useGetGlobalConfig';
-import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionKeys';
 import { useNotifications } from 'hooks/useNotifications';
 import { ArrowUpRight, Copy, Info, Key, TriangleAlert } from 'lucide-react';
-import { IngestionKeyProps } from 'types/api/ingestionKeys/types';
 
 import './IngestionDetails.styles.scss';
 
@@ -39,17 +42,17 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 	const { notifications } = useNotifications();
 	const [, handleCopyToClipboard] = useCopyToClipboard();
 
-	const [firstIngestionKey, setFirstIngestionKey] = useState<IngestionKeyProps>(
-		{} as IngestionKeyProps,
-	);
+	const [
+		firstIngestionKey,
+		setFirstIngestionKey,
+	] = useState<GatewaytypesIngestionKeyDTO>({} as GatewaytypesIngestionKeyDTO);
 
 	const {
 		data: ingestionKeys,
 		isLoading: isIngestionKeysLoading,
 		error,
 		isError,
-	} = useGetAllIngestionsKeys({
-		search: '',
+	} = useGetIngestionKeys({
 		page: 1,
 		per_page: 10,
 	});
@@ -69,8 +72,11 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 	};
 
 	useEffect(() => {
-		if (ingestionKeys?.data.data && ingestionKeys?.data.data.length > 0) {
-			setFirstIngestionKey(ingestionKeys?.data.data[0]);
+		if (
+			ingestionKeys?.data?.data?.keys &&
+			ingestionKeys?.data.data.keys.length > 0
+		) {
+			setFirstIngestionKey(ingestionKeys?.data.data.keys[0]);
 		}
 	}, [ingestionKeys]);
 
@@ -80,7 +86,10 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 				<div className="ingestion-endpoint-section-error-container">
 					<Typography.Text className="ingestion-endpoint-section-error-text error">
 						<TriangleAlert size={14} />{' '}
-						{(error as AxiosError)?.message || 'Something went wrong'}
+						{(error as AxiosError<RenderErrorResponseDTO>)?.response?.data?.error
+							?.message ||
+							(error as AxiosError)?.message ||
+							'Something went wrong'}
 					</Typography.Text>
 
 					<div className="ingestion-setup-details-links">
@@ -176,7 +185,7 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 										</Typography.Text>
 
 										<Typography.Text className="ingestion-key-value-copy">
-											{maskKey(firstIngestionKey?.value)}
+											{maskKey(firstIngestionKey?.value || '')}
 
 											<Copy
 												size={14}
@@ -186,7 +195,9 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 														`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INGESTION_KEY_COPIED}`,
 														{},
 													);
-													handleCopyKey(firstIngestionKey?.value);
+													if (firstIngestionKey?.value) {
+														handleCopyKey(firstIngestionKey.value);
+													}
 												}}
 											/>
 										</Typography.Text>

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json

@@ -323,7 +323,6 @@
 			"java instrumentation",
 			"java k8s",
 			"java logs",
-			"java metrics",
 			"java microservices",
 			"java monitoring",
 			"java observability",
@@ -332,10 +331,12 @@
 			"java vm",
 			"java windows",
 			"jboss",
+			"wildfly",
 			"jdk 11",
 			"jdk 17",
 			"jdk 21",
 			"jdk 8",
+			"jdbc",
 			"opentelemetry java",
 			"quarkus",
 			"spring boot",
@@ -372,6 +373,12 @@
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-springboot/"
 							},
+							{
+								"key": "docker",
+								"label": "Docker",
+								"imgUrl": "/Logos/docker.svg",
+								"link": "/docs/instrumentation/opentelemetry-springboot/"
+							},
 							{
 								"key": "windows",
 								"label": "Windows",
@@ -403,6 +410,12 @@
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-tomcat/"
 							},
+							{
+								"key": "docker",
+								"label": "Docker",
+								"imgUrl": "/Logos/docker.svg",
+								"link": "/docs/instrumentation/opentelemetry-tomcat/"
+							},
 							{
 								"key": "windows",
 								"label": "Windows",
@@ -414,7 +427,7 @@
 				},
 				{
 					"key": "jboss",
-					"label": "JBoss",
+					"label": "JBoss/WildFly",
 					"imgUrl": "/Logos/jboss.svg",
 					"link": "/docs/instrumentation/opentelemetry-jboss/",
 					"question": {
@@ -434,6 +447,12 @@
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-jboss/"
 							},
+							{
+								"key": "docker",
+								"label": "Docker",
+								"imgUrl": "/Logos/docker.svg",
+								"link": "/docs/instrumentation/opentelemetry-jboss/"
+							},
 							{
 								"key": "windows",
 								"label": "Windows",
@@ -465,6 +484,12 @@
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-quarkus/"
 							},
+							{
+								"key": "docker",
+								"label": "Docker",
+								"imgUrl": "/Logos/docker.svg",
+								"link": "/docs/instrumentation/opentelemetry-quarkus/"
+							},
 							{
 								"key": "windows",
 								"label": "Windows",
@@ -495,6 +520,18 @@
 								"label": "Kubernetes",
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-java/"
+							},
+							{
+								"key": "docker",
+								"label": "Docker",
+								"imgUrl": "/Logos/docker.svg",
+								"link": "/docs/instrumentation/opentelemetry-java/"
+							},
+							{
+								"key": "windows",
+								"label": "Windows",
+								"imgUrl": "/Logos/windows.svg",
+								"link": "/docs/instrumentation/opentelemetry-java/"
 							}
 						]
 					}
@@ -530,7 +567,6 @@
 			"python in containers",
 			"python instrumentation",
 			"python k8s",
-			"python metrics",
 			"python microservices",
 			"python observability",
 			"python on kubernetes",
@@ -583,7 +619,6 @@
 		],
 		"module": "apm",
 		"relatedSearchKeywords": [
-			"angular",
 			"apm",
 			"apm/traces",
 			"application performance monitoring",
@@ -595,7 +630,6 @@
 			"next.js",
 			"nodejs",
 			"nuxtjs",
-			"reactjs",
 			"traces",
 			"tracing",
 			"ts",
@@ -610,8 +644,8 @@
 			"entityID": "framework",
 			"options": [
 				{
-					"key": "nodejs",
-					"label": "NodeJs",
+					"key": "nodejs-nestjs",
+					"label": "NodeJs/NestJS",
 					"imgUrl": "/Logos/nodejs.svg",
 					"link": "/docs/instrumentation/opentelemetry-javascript/",
 					"question": {
@@ -631,6 +665,12 @@
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-javascript/"
 							},
+							{
+								"key": "docker",
+								"label": "Docker",
+								"imgUrl": "/Logos/docker.svg",
+								"link": "/docs/instrumentation/opentelemetry-javascript/"
+							},
 							{
 								"key": "windows",
 								"label": "Windows",
@@ -640,99 +680,6 @@
 						]
 					}
 				},
-				{
-					"key": "express",
-					"label": "Express",
-					"imgUrl": "/Logos/express.svg",
-					"link": "/docs/instrumentation/opentelemetry-express/",
-					"question": {
-						"desc": "What is your Environment?",
-						"type": "select",
-						"entityID": "environment",
-						"options": [
-							{
-								"key": "vm",
-								"label": "VM",
-								"imgUrl": "/Logos/vm.svg",
-								"link": "/docs/instrumentation/opentelemetry-express/"
-							},
-							{
-								"key": "k8s",
-								"label": "Kubernetes",
-								"imgUrl": "/Logos/kubernetes.svg",
-								"link": "/docs/instrumentation/opentelemetry-express/"
-							},
-							{
-								"key": "windows",
-								"label": "Windows",
-								"imgUrl": "/Logos/windows.svg",
-								"link": "/docs/instrumentation/opentelemetry-express/"
-							}
-						]
-					}
-				},
-				{
-					"key": "nestjs",
-					"label": "NestJS",
-					"imgUrl": "/Logos/nestjs.svg",
-					"link": "/docs/instrumentation/opentelemetry-nestjs/",
-					"question": {
-						"desc": "What is your Environment?",
-						"type": "select",
-						"entityID": "environment",
-						"options": [
-							{
-								"key": "vm",
-								"label": "VM",
-								"imgUrl": "/Logos/vm.svg",
-								"link": "/docs/instrumentation/opentelemetry-nestjs/"
-							},
-							{
-								"key": "k8s",
-								"label": "Kubernetes",
-								"imgUrl": "/Logos/kubernetes.svg",
-								"link": "/docs/instrumentation/opentelemetry-nestjs/"
-							},
-							{
-								"key": "windows",
-								"label": "Windows",
-								"imgUrl": "/Logos/windows.svg",
-								"link": "/docs/instrumentation/opentelemetry-nestjs/"
-							}
-						]
-					}
-				},
-				{
-					"key": "angular",
-					"label": "Angular",
-					"imgUrl": "/Logos/angular.svg",
-					"link": "/docs/instrumentation/opentelemetry-angular/",
-					"question": {
-						"desc": "What is your Environment?",
-						"type": "select",
-						"entityID": "environment",
-						"options": [
-							{
-								"key": "vm",
-								"label": "VM",
-								"imgUrl": "/Logos/vm.svg",
-								"link": "/docs/instrumentation/opentelemetry-angular/"
-							},
-							{
-								"key": "k8s",
-								"label": "Kubernetes",
-								"imgUrl": "/Logos/kubernetes.svg",
-								"link": "/docs/instrumentation/opentelemetry-angular/"
-							},
-							{
-								"key": "windows",
-								"label": "Windows",
-								"imgUrl": "/Logos/windows.svg",
-								"link": "/docs/instrumentation/opentelemetry-angular/"
-							}
-						]
-					}
-				},
 				{
 					"key": "nextjs",
 					"label": "NextJS",
@@ -755,6 +702,12 @@
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-nextjs/"
 							},
+							{
+								"key": "docker",
+								"label": "Docker",
+								"imgUrl": "/Logos/docker.svg",
+								"link": "/docs/instrumentation/opentelemetry-nextjs/"
+							},
 							{
 								"key": "windows",
 								"label": "Windows",
@@ -764,37 +717,6 @@
 						]
 					}
 				},
-				{
-					"key": "reactjs",
-					"label": "ReactJS",
-					"imgUrl": "/Logos/reactjs.svg",
-					"link": "/docs/instrumentation/opentelemetry-reactjs/",
-					"question": {
-						"desc": "What is your Environment?",
-						"type": "select",
-						"entityID": "environment",
-						"options": [
-							{
-								"key": "vm",
-								"label": "VM",
-								"imgUrl": "/Logos/vm.svg",
-								"link": "/docs/instrumentation/opentelemetry-reactjs/"
-							},
-							{
-								"key": "k8s",
-								"label": "Kubernetes",
-								"imgUrl": "/Logos/kubernetes.svg",
-								"link": "/docs/instrumentation/opentelemetry-reactjs/"
-							},
-							{
-								"key": "windows",
-								"label": "Windows",
-								"imgUrl": "/Logos/windows.svg",
-								"link": "/docs/instrumentation/opentelemetry-reactjs/"
-							}
-						]
-					}
-				},
 				{
 					"key": "nuxtjs",
 					"label": "NuxtJS",
@@ -817,6 +739,12 @@
 								"imgUrl": "/Logos/kubernetes.svg",
 								"link": "/docs/instrumentation/opentelemetry-nuxtjs/"
 							},
+							{
+								"key": "docker",
+								"label": "Docker",
+								"imgUrl": "/Logos/docker.svg",
+								"link": "/docs/instrumentation/opentelemetry-nuxtjs/"
+							},
 							{
 								"key": "windows",
 								"label": "Windows",
@@ -830,32 +758,7 @@
 					"key": "react-native",
 					"label": "React Native",
 					"imgUrl": "/Logos/reactjs.svg",
-					"link": "/docs/instrumentation/opentelemetry-react-native/",
-					"question": {
-						"desc": "What is your Environment?",
-						"type": "select",
-						"entityID": "environment",
-						"options": [
-							{
-								"key": "vm",
-								"label": "VM",
-								"imgUrl": "/Logos/vm.svg",
-								"link": "/docs/instrumentation/opentelemetry-react-native/"
-							},
-							{
-								"key": "k8s",
-								"label": "Kubernetes",
-								"imgUrl": "/Logos/kubernetes.svg",
-								"link": "/docs/instrumentation/opentelemetry-react-native/"
-							},
-							{
-								"key": "windows",
-								"label": "Windows",
-								"imgUrl": "/Logos/windows.svg",
-								"link": "/docs/instrumentation/opentelemetry-react-native/"
-							}
-						]
-					}
+					"link": "/docs/instrumentation/opentelemetry-react-native/"
 				}
 			]
 		}
@@ -889,7 +792,6 @@
 			"golang",
 			"golang apm",
 			"golang instrumentation",
-			"golang metrics",
 			"golang observability",
 			"golang performance monitoring",
 			"golang tracing",
@@ -980,69 +882,39 @@
 			"php-fpm monitoring",
 			"slim php",
 			"traces",
-			"tracing"
+			"tracing",
+			"wordpress"
 		],
 		"id": "php",
+		"link": "/docs/instrumentation/opentelemetry-php/",
 		"question": {
-			"desc": "Which PHP framework do you use?",
+			"desc": "What is your Environment?",
 			"type": "select",
-			"entityID": "framework",
+			"entityID": "environment",
 			"options": [
 				{
-					"key": "laravel",
-					"label": "Laravel",
-					"imgUrl": "/Logos/laravel.svg",
-					"link": "/docs/instrumentation/laravel/",
-					"question": {
-						"desc": "What is your Environment?",
-						"type": "select",
-						"entityID": "environment",
-						"options": [
-							{
-								"key": "vm",
-								"label": "VM",
-								"imgUrl": "/Logos/vm.svg",
-								"link": "/docs/instrumentation/laravel/"
-							},
-							{
-								"key": "k8s",
-								"label": "Kubernetes",
-								"imgUrl": "/Logos/kubernetes.svg",
-								"link": "/docs/instrumentation/laravel/"
-							}
-						]
-					}
+					"key": "vm",
+					"label": "VM",
+					"imgUrl": "/Logos/vm.svg",
+					"link": "/docs/instrumentation/opentelemetry-php/"
 				},
 				{
-					"key": "Others",
-					"label": "Others",
-					"imgUrl": "/Logos/php-others.svg",
-					"link": "/docs/instrumentation/opentelemetry-php/",
-					"question": {
-						"desc": "What is your Environment?",
-						"type": "select",
-						"entityID": "environment",
-						"options": [
-							{
-								"key": "vm",
-								"label": "VM",
-								"imgUrl": "/Logos/vm.svg",
-								"link": "/docs/instrumentation/opentelemetry-php/"
-							},
-							{
-								"key": "k8s",
-								"label": "Kubernetes",
-								"imgUrl": "/Logos/kubernetes.svg",
-								"link": "/docs/instrumentation/opentelemetry-php/"
-							},
-							{
-								"key": "windows",
-								"label": "Windows",
-								"imgUrl": "/Logos/windows.svg",
-								"link": "/docs/instrumentation/opentelemetry-php/"
-							}
-						]
-					}
+					"key": "k8s",
+					"label": "Kubernetes",
+					"imgUrl": "/Logos/kubernetes.svg",
+					"link": "/docs/instrumentation/opentelemetry-php/"
+				},
+				{
+					"key": "docker",
+					"label": "Docker",
+					"imgUrl": "/Logos/docker.svg",
+					"link": "/docs/instrumentation/opentelemetry-php/"
+				},
+				{
+					"key": "windows",
+					"label": "Windows",
+					"imgUrl": "/Logos/windows.svg",
+					"link": "/docs/instrumentation/opentelemetry-php/"
 				}
 			]
 		}
@@ -1117,6 +989,12 @@
 					"imgUrl": "/Logos/kubernetes.svg",
 					"link": "/docs/instrumentation/opentelemetry-dotnet/"
 				},
+				{
+					"key": "docker",
+					"label": "Docker",
+					"imgUrl": "/Logos/docker.svg",
+					"link": "/docs/instrumentation/opentelemetry-dotnet/"
+				},
 				{
 					"key": "windows",
 					"label": "Windows",
@@ -1128,7 +1006,7 @@
 	},
 	{
 		"dataSource": "ruby-on-rails",
-		"label": "Ruby on Rails",
+		"label": "Ruby",
 		"imgUrl": "/Logos/ruby-on-rails.svg",
 		"tags": [
 			"apm/traces"
@@ -1168,9 +1046,12 @@
 			"ruby tracing",
 			"ruby-on-rails",
 			"traces",
-			"tracing"
+			"tracing",
+			"sinatra",
+			"sidekiq",
+			"resque"
 		],
-		"id": "ruby-on-rails",
+		"id": "ruby",
 		"link": "/docs/instrumentation/opentelemetry-ruby-on-rails/",
 		"question": {
 			"desc": "What is your Environment?",
@@ -1189,6 +1070,12 @@
 					"imgUrl": "/Logos/kubernetes.svg",
 					"link": "/docs/instrumentation/opentelemetry-ruby-on-rails/"
 				},
+				{
+					"key": "docker",
+					"label": "Docker",
+					"imgUrl": "/Logos/docker.svg",
+					"link": "/docs/instrumentation/opentelemetry-ruby-on-rails/"
+				},
 				{
 					"key": "windows",
 					"label": "Windows",
@@ -1468,41 +1355,6 @@
 		"id": "nginx-tracing",
 		"link": "/docs/instrumentation/opentelemetry-nginx/"
 	},
-	{
-		"dataSource": "opentelemetry-wordpress",
-		"label": "WordPress",
-		"imgUrl": "/Logos/wordpress.svg",
-		"tags": [
-			"apm/traces"
-		],
-		"module": "apm",
-		"relatedSearchKeywords": [
-			"apm",
-			"apm/traces",
-			"application performance monitoring",
-			"monitor wordpress site",
-			"opentelemetry",
-			"opentelemetry wordpress",
-			"opentelemetry-wordpress",
-			"otel",
-			"otel wordpress",
-			"traces",
-			"tracing",
-			"wordpress",
-			"wordpress apm",
-			"wordpress instrumentation",
-			"wordpress metrics",
-			"wordpress monitoring",
-			"wordpress observability",
-			"wordpress performance",
-			"wordpress php monitoring",
-			"wordpress plugin monitoring",
-			"wordpress to signoz",
-			"wordpress tracing"
-		],
-		"id": "opentelemetry-wordpress",
-		"link": "/docs/instrumentation/opentelemetry-wordpress/"
-	},
 	{
 		"dataSource": "opentelemetry-cloudflare",
 		"label": "Cloudflare Tracing",
@@ -1567,6 +1419,25 @@
 		"id": "opentelemetry-cloudflare-logs",
 		"link": "/docs/logs-management/send-logs/cloudflare-logs/"
 	},
+	{
+		"dataSource": "convex-logs",
+		"label": "Convex Logs",
+		"imgUrl": "/Logos/convex-logo.svg",
+		"tags": [
+			"logs"
+		],
+		"module": "logs",
+		"relatedSearchKeywords": [
+			"convex",
+			"convex log streaming",
+			"convex logs",
+			"convex webhook",
+			"logging",
+			"logs"
+		],
+		"id": "convex-logs",
+		"link": "/docs/logs-management/send-logs/convex-log-streams-signoz/"
+	},
 	{
 		"dataSource": "kubernetes-pod-logs",
 		"label": "Kubernetes Pod Logs",
@@ -4568,6 +4439,7 @@
 		],
 		"module": "metrics",
 		"relatedSearchKeywords": [
+			"browser metrics",
 			"core web vitals metrics",
 			"frontend metrics",
 			"frontend monitoring",
@@ -4587,7 +4459,7 @@
 			"svelte",
 			"sveltekit",
 			"nextjs",
-"next.js"
+			"next.js"
 		],
 		"link": "/docs/frontend-monitoring/web-vitals-with-metrics/"
 	},
@@ -4622,7 +4494,7 @@
 			"svelte",
 			"sveltekit",
 			"nextjs",
-"next.js"
+			"next.js"
 		],
 		"link": "/docs/frontend-monitoring/web-vitals-with-traces/"
 	},
@@ -4664,7 +4536,7 @@
 			"svelte",
 			"sveltekit",
 			"nextjs",
-"next.js"
+			"next.js"
 		],
 		"link": "/docs/frontend-monitoring/document-load/"
 	},
@@ -5316,23 +5188,6 @@
 		],
 		"link": "/docs/metrics-management/mysql-metrics/"
 	},
-	{
-		"dataSource": "jvm",
-		"label": "JVM",
-		"imgUrl": "/Logos/java.svg",
-		"tags": [
-			"metrics"
-		],
-		"module": "metrics",
-		"relatedSearchKeywords": [
-			"java virtual machine",
-			"jvm",
-			"jvm metrics",
-			"jvm monitoring",
-			"runtime"
-		],
-		"link": "/docs/tutorial/jvm-metrics/"
-	},
 	{
 		"dataSource": "jmx",
 		"label": "JMX",
@@ -5348,7 +5203,7 @@
 			"jmx monitoring",
 			"runtime"
 		],
-		"link": "/docs/tutorial/jmx-metrics/"
+		"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-java/jmx-metrics/"
 	},
 	{
 		"dataSource": "prometheus-metrics",
@@ -5574,16 +5429,17 @@
 			"svelte",
 			"sveltekit",
 			"nextjs",
-"next.js"
+			"next.js"
 		],
 		"link": "/docs/frontend-monitoring/sending-logs-with-opentelemetry/"
 	},
 	{
 		"dataSource": "frontend-traces",
-		"label": "Frontend Traces",
+		"label": "Frontend Tracing",
 		"imgUrl": "/Logos/traces.svg",
 		"tags": [
-			"Frontend Monitoring"
+			"Frontend Monitoring",
+			"apm/traces"
 		],
 		"module": "apm",
 		"relatedSearchKeywords": [
@@ -5605,7 +5461,7 @@
 			"svelte",
 			"sveltekit",
 			"nextjs",
-"next.js"
+			"next.js"
 		],
 		"link": "/docs/frontend-monitoring/sending-traces-with-opentelemetry/"
 	},
@@ -5636,7 +5492,7 @@
 			"svelte",
 			"sveltekit",
 			"nextjs",
-"next.js"
+			"next.js"
 		],
 		"link": "/docs/frontend-monitoring/sending-metrics-with-opentelemetry/"
 	},
@@ -5683,7 +5539,6 @@
 		"label": "Golang Metrics",
 		"imgUrl": "/Logos/go.svg",
 		"tags": [
-			"apm/traces",
 			"metrics"
 		],
 		"module": "metrics",
@@ -5737,12 +5592,64 @@
 			]
 		}
 	},
+	{
+		"dataSource": "java-metrics",
+		"label": "Java Metrics",
+		"imgUrl": "/Logos/java.svg",
+		"tags": [
+			"metrics"
+		],
+		"module": "metrics",
+		"relatedSearchKeywords": [
+			"java",
+			"java metrics",
+			"java monitoring",
+			"java observability",
+			"jvm metrics",
+			"metrics",
+			"opentelemetry java",
+			"otel java",
+			"runtime metrics"
+		],
+		"id": "java-metrics",
+		"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-java/",
+		"question": {
+			"desc": "What is your Environment?",
+			"type": "select",
+			"entityID": "environment",
+			"options": [
+				{
+					"key": "vm",
+					"label": "VM",
+					"imgUrl": "/Logos/vm.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-java/"
+				},
+				{
+					"key": "k8s",
+					"label": "Kubernetes",
+					"imgUrl": "/Logos/kubernetes.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-java/"
+				},
+				{
+					"key": "windows",
+					"label": "Windows",
+					"imgUrl": "/Logos/windows.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-java/"
+				},
+				{
+					"key": "docker",
+					"label": "Docker",
+					"imgUrl": "/Logos/docker.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-java/"
+				}
+			]
+		}
+	},
 	{
 		"dataSource": "python-metrics",
 		"label": "Python Metrics",
 		"imgUrl": "/Logos/python.svg",
 		"tags": [
-			"apm/traces",
 			"metrics"
 		],
 		"module": "metrics",
@@ -5796,7 +5703,6 @@
 		"label": ".NET Metrics",
 		"imgUrl": "/Logos/dotnet.svg",
 		"tags": [
-			"apm/traces",
 			"metrics"
 		],
 		"module": "metrics",
@@ -5853,7 +5759,6 @@
 		"label": "Node.js Metrics",
 		"imgUrl": "/Logos/nodejs.svg",
 		"tags": [
-			"apm/traces",
 			"metrics"
 		],
 		"module": "metrics",

frontend/src/container/QueryBuilder/components/ToolbarActions/LeftToolbarActions.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import { FilterOutlined } from '@ant-design/icons';
+import { FilterOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
 import cx from 'classnames';
 import { Atom, Binoculars, SquareMousePointer, Terminal } from 'lucide-react';
@@ -32,6 +32,7 @@ export default function LeftToolbarActions({
 				<Tooltip title="Show Filters">
 					<Button onClick={handleFilterVisibilityChange} className="filter-btn">
 						<FilterOutlined />
+						<VerticalAlignTopOutlined rotate={90} />
 					</Button>
 				</Tooltip>
 			)}

frontend/src/container/QueryBuilder/components/ToolbarActions/ToolbarActions.styles.scss

@@ -7,7 +7,7 @@
 		align-items: center;
 		justify-content: center;
 		box-shadow: none;
-		width: 32px;
+		width: 40px;
 		height: 32px;
 		margin-right: 12px;
 		border: 1px solid var(--bg-slate-400);

frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx

@@ -95,7 +95,6 @@ function ResourceAttributesFilter({
 					data-testid="resource-environment-filter"
 					style={{ minWidth: 200, height: 34 }}
 					onChange={handleEnvironmentChange}
-					onBlur={handleBlur}
 				>
 					{environments.map((opt) => (
 						<Select.Option key={opt.value} value={opt.value}>

frontend/src/container/SideNav/config.ts

@@ -32,6 +32,7 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.LIST_ALL_ALERT]: [QueryParams.resourceAttributes],
 	[ROUTES.LIST_LICENSES]: [QueryParams.resourceAttributes],
 	[ROUTES.LOGIN]: [QueryParams.resourceAttributes],
+	[ROUTES.FORGOT_PASSWORD]: [QueryParams.resourceAttributes],
 	[ROUTES.LOGS]: [QueryParams.resourceAttributes],
 	[ROUTES.LOGS_BASE]: [QueryParams.resourceAttributes],
 	[ROUTES.MY_SETTINGS]: [QueryParams.resourceAttributes],

frontend/src/hooks/dashboard/useVariableFetchState.ts

@@ -1,280 +0,0 @@
-import {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useSyncExternalStore,
-} from 'react';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import {
-	IVariableFetchStoreState,
-	VariableFetchState,
-	variableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { useDashboardVariablesSelector } from './useDashboardVariables';
-
-/**
- * Generic selector hook for the variable fetch store.
- * Same pattern as useDashboardVariablesSelector.
- */
-const useVariableFetchSelector = <T>(
-	selector: (state: IVariableFetchStoreState) => T,
-): T => {
-	const selectorRef = useRef(selector);
-	selectorRef.current = selector;
-
-	const getSnapshot = useCallback(
-		() => selectorRef.current(variableFetchStore.getSnapshot()),
-		[],
-	);
-
-	return useSyncExternalStore(variableFetchStore.subscribe, getSnapshot);
-};
-
-interface UseVariableFetchStateReturn {
-	/** The current fetch state for this variable */
-	state: VariableFetchState;
-	/** True if any ancestor variable is not idle (still loading/waiting) */
-	isBlocked: boolean;
-	/** True if this variable is actively fetching (loading or revalidating) */
-	isFetching: boolean;
-	/** True if this variable has completed at least one fetch cycle */
-	hasLoaded: boolean;
-}
-
-/**
- * Per-variable hook that exposes the fetch state of a single variable.
- * Reusable by both variable input components and panel components.
- *
- * Subscribes to both variableFetchStore (for states) and
- * dashboardVariablesStore (for parent graph) to compute derived values.
- */
-export function useVariableFetchState(
-	variableName: string,
-): UseVariableFetchStateReturn {
-	const state = useVariableFetchSelector(
-		(s) => s.states[variableName] || 'idle',
-	) as VariableFetchState;
-
-	const allStates = useVariableFetchSelector((s) => s.states);
-
-	const parentGraph = useDashboardVariablesSelector(
-		(s) => s.dependencyData?.parentDependencyGraph,
-	);
-
-	const lastUpdated = useVariableFetchSelector(
-		(s) => s.lastUpdated[variableName] || 0,
-	);
-
-	const isFetching = state === 'loading' || state === 'revalidating';
-	const hasLoaded = lastUpdated > 0;
-
-	const isBlocked = useMemo(() => {
-		const parents = parentGraph?.[variableName] || [];
-		return parents.some((p) => (allStates[p] || 'idle') !== 'idle');
-	}, [parentGraph, variableName, allStates]);
-
-	return { state, isBlocked, isFetching, hasLoaded };
-}
-
-// ---------------------------------------------------------------------------
-// Query-text extraction utilities for finding variable references in widgets
-// ---------------------------------------------------------------------------
-
-function escapeRegExp(str: string): string {
-	return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
-/**
- * Collects every text fragment from a Query that may contain variable
- * references (filter values, filter expressions, raw SQL, PromQL).
- */
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function collectQueryTexts(query: Query): string[] {
-	const texts: string[] = [];
-
-	if (query.builder?.queryData) {
-		for (const qd of query.builder.queryData) {
-			if (qd.filters?.items) {
-				for (const item of qd.filters.items) {
-					if (typeof item.value === 'string') {
-						texts.push(item.value);
-					} else if (Array.isArray(item.value)) {
-						for (const v of item.value) {
-							if (typeof v === 'string') {
-								texts.push(v);
-							}
-						}
-					}
-				}
-			}
-			if (qd.filter?.expression) {
-				texts.push(qd.filter.expression);
-			}
-		}
-	}
-
-	if (query.clickhouse_sql) {
-		for (const cs of query.clickhouse_sql) {
-			if (cs.query) {
-				texts.push(cs.query);
-			}
-		}
-	}
-
-	if (query.promql) {
-		for (const pq of query.promql) {
-			if (pq.query) {
-				texts.push(pq.query);
-			}
-		}
-	}
-
-	return texts;
-}
-
-/**
- * Returns the names of all dashboard variables referenced in a widget query.
- * Supports {{.var}}, {{var}}, $var, and [[var]] syntaxes.
- */
-export function getReferencedVariableNames(
-	query: Query,
-	variables: IDashboardVariables,
-): string[] {
-	const texts = collectQueryTexts(query);
-	const allText = texts.join(' ');
-	if (!allText) {
-		return [];
-	}
-
-	const names: string[] = [];
-	Object.values(variables).forEach((v) => {
-		if (!v.name) {
-			return;
-		}
-		const escaped = escapeRegExp(v.name);
-		const pattern = new RegExp(
-			`\\{\\{\\s*\\.?\\s*${escaped}\\s*\\}\\}` +
-				`|\\$${escaped}(?![a-zA-Z0-9_.\\-])` +
-				`|\\[\\[\\s*${escaped}\\s*\\]\\]`,
-		);
-		if (pattern.test(allText)) {
-			names.push(v.name);
-		}
-	});
-
-	return names;
-}
-
-// ---------------------------------------------------------------------------
-// Panel-targeted hook
-// ---------------------------------------------------------------------------
-
-/**
- * Returns true when a widget's query should be blocked / show a loader
- * because a dependent variable is not ready.
- *
- * Phase 1 – Initial load:
- *   Checks the fetch-state of every variable referenced by `query`.
- *   If any dependent variable is non-idle → returns true (show loading).
- *   Once they all settle the hook transitions to Phase 2.
- *
- * Phase 2 – Post initial load:
- *   Keeps a map of dependent variable name → serialised selectedValue.
- *   When a dependent variable's selectedValue changes:
- *     • allSelected = true  → returns true until that variable is idle.
- *     • allSelected = false → returns false (react-query picks up the
- *       query-key change automatically).
- */
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function useDependentVariablesFetching(
-	query: Query | undefined,
-	variables: IDashboardVariables | undefined,
-): boolean {
-	const allStates = useVariableFetchSelector((s) => s.states);
-
-	// ---- 1. Derive dependent variable names from the widget query ----------
-	const dependentVarNames = useMemo(() => {
-		if (!query || !variables) {
-			return [] as string[];
-		}
-		return getReferencedVariableNames(query, variables);
-	}, [query, variables]);
-
-	// ---- 2. Are any dependent variables currently non-idle? ----------------
-	const anyDependentNonIdle = useMemo(
-		() =>
-			dependentVarNames.some(
-				(n) => allStates[n] !== undefined && allStates[n] !== 'idle',
-			),
-		[dependentVarNames, allStates],
-	);
-
-	// ---- 3. Track initial fetch cycle (non-idle → idle) --------------------
-	const didStartFetching = useRef(false);
-	const hasCompletedInitialFetch = useRef(false);
-
-	useEffect(() => {
-		if (anyDependentNonIdle) {
-			didStartFetching.current = true;
-		} else if (didStartFetching.current && !hasCompletedInitialFetch.current) {
-			hasCompletedInitialFetch.current = true;
-		}
-	}, [anyDependentNonIdle]);
-
-	// ---- 4. Track selectedValues snapshot ----------------------------------
-	const lastSettledValues = useRef<Record<string, string>>({});
-
-	const currentValues = useMemo(() => {
-		if (!variables) {
-			return {} as Record<string, string>;
-		}
-		const values: Record<string, string> = {};
-		Object.values(variables).forEach((v) => {
-			if (v.name && dependentVarNames.includes(v.name)) {
-				values[v.name] = JSON.stringify(v.selectedValue);
-			}
-		});
-		return values;
-	}, [variables, dependentVarNames]);
-
-	// Update snapshot whenever all dependent vars are idle
-	useEffect(() => {
-		if (!anyDependentNonIdle) {
-			lastSettledValues.current = currentValues;
-		}
-	}, [anyDependentNonIdle, currentValues]);
-
-	// ---- 5. Compute result ------------------------------------------------
-
-	// Phase 1 – initial load: block while any dependent variable is loading
-	if (!hasCompletedInitialFetch.current) {
-		return anyDependentNonIdle;
-	}
-
-	// Phase 2 – post initial load: block only for allSelected vars that
-	// have a changed value and are still fetching
-	if (!variables) {
-		return false;
-	}
-
-	return dependentVarNames.some((name) => {
-		const variable = Object.values(variables).find((v) => v.name === name);
-		if (!variable?.allSelected) {
-			return false;
-		}
-
-		// For allSelected variables: block if their fetch state is non-idle,
-		// meaning the value (= full option set) is stale or about to change.
-		const state = allStates[name];
-		if (!state || state === 'idle') {
-			return false;
-		}
-
-		// Only block if the value has actually drifted from the last settled
-		// snapshot — avoids blocking when an unrelated refetch is in progress.
-		return currentValues[name] !== lastSettledValues.current[name];
-	});
-}

frontend/src/hooks/useResourceAttribute/__tests__/whitelistedKeys.test.ts

@@ -0,0 +1,77 @@
+import ROUTES from 'constants/routes';
+
+import { whilelistedKeys } from '../config';
+import { mappingWithRoutesAndKeys } from '../utils';
+
+describe('useResourceAttribute config', () => {
+	describe('whilelistedKeys', () => {
+		it('should include underscore-notation keys (DOT_METRICS_ENABLED=false)', () => {
+			expect(whilelistedKeys).toContain('resource_deployment_environment');
+			expect(whilelistedKeys).toContain('resource_k8s_cluster_name');
+			expect(whilelistedKeys).toContain('resource_k8s_cluster_namespace');
+		});
+
+		it('should include dot-notation keys (DOT_METRICS_ENABLED=true)', () => {
+			expect(whilelistedKeys).toContain('resource_deployment.environment');
+			expect(whilelistedKeys).toContain('resource_k8s.cluster.name');
+			expect(whilelistedKeys).toContain('resource_k8s.cluster.namespace');
+		});
+	});
+
+	describe('mappingWithRoutesAndKeys', () => {
+		const dotNotationFilters = [
+			{
+				label: 'deployment.environment',
+				value: 'resource_deployment.environment',
+			},
+			{ label: 'k8s.cluster.name', value: 'resource_k8s.cluster.name' },
+			{ label: 'k8s.cluster.namespace', value: 'resource_k8s.cluster.namespace' },
+		];
+
+		const underscoreNotationFilters = [
+			{
+				label: 'deployment.environment',
+				value: 'resource_deployment_environment',
+			},
+			{ label: 'k8s.cluster.name', value: 'resource_k8s_cluster_name' },
+			{ label: 'k8s.cluster.namespace', value: 'resource_k8s_cluster_namespace' },
+		];
+
+		const nonWhitelistedFilters = [
+			{ label: 'host.name', value: 'resource_host_name' },
+			{ label: 'service.name', value: 'resource_service_name' },
+		];
+
+		it('should keep dot-notation filters on the Service Map route', () => {
+			const result = mappingWithRoutesAndKeys(
+				ROUTES.SERVICE_MAP,
+				dotNotationFilters,
+			);
+			expect(result).toHaveLength(3);
+			expect(result).toEqual(dotNotationFilters);
+		});
+
+		it('should keep underscore-notation filters on the Service Map route', () => {
+			const result = mappingWithRoutesAndKeys(
+				ROUTES.SERVICE_MAP,
+				underscoreNotationFilters,
+			);
+			expect(result).toHaveLength(3);
+			expect(result).toEqual(underscoreNotationFilters);
+		});
+
+		it('should filter out non-whitelisted keys on the Service Map route', () => {
+			const allFilters = [...dotNotationFilters, ...nonWhitelistedFilters];
+			const result = mappingWithRoutesAndKeys(ROUTES.SERVICE_MAP, allFilters);
+			expect(result).toHaveLength(3);
+			expect(result).toEqual(dotNotationFilters);
+		});
+
+		it('should return all filters on non-Service Map routes', () => {
+			const allFilters = [...dotNotationFilters, ...nonWhitelistedFilters];
+			const result = mappingWithRoutesAndKeys('/services', allFilters);
+			expect(result).toHaveLength(5);
+			expect(result).toEqual(allFilters);
+		});
+	});
+});

frontend/src/hooks/useResourceAttribute/config.ts

@@ -1,5 +1,8 @@
 export const whilelistedKeys = [
 	'resource_deployment_environment',
+	'resource_deployment.environment',
 	'resource_k8s_cluster_name',
+	'resource_k8s.cluster.name',
 	'resource_k8s_cluster_namespace',
+	'resource_k8s.cluster.namespace',
 ];

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -5,8 +5,8 @@ import cx from 'classnames';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
 
+import { useLegendActions } from '../../hooks/useLegendActions';
 import { LegendPosition, LegendProps } from '../types';
-import { useLegendActions } from './useLegendActions';
 
 import './Legend.styles.scss';
 
@@ -106,6 +106,7 @@ export default function Legend({
 						placeholder="Search..."
 						value={legendSearchQuery}
 						onChange={(e): void => setLegendSearchQuery(e.target.value)}
+						data-testid="legend-search-input"
 						className="legend-search-input"
 					/>
 				</div>

frontend/src/lib/uPlotV2/components/Tooltip/TimeSeriesTooltip.tsx

@@ -0,0 +1,8 @@
+import { TimeSeriesTooltipProps } from '../types';
+import Tooltip from './Tooltip';
+
+export default function TimeSeriesTooltip(
+	props: TimeSeriesTooltipProps,
+): JSX.Element {
+	return <Tooltip {...props} />;
+}

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx

@@ -5,8 +5,7 @@ import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 
-import { TooltipContentItem, TooltipProps } from '../types';
-import { buildTooltipContent } from './utils';
+import { TooltipProps } from '../types';
 
 import './Tooltip.styles.scss';
 
@@ -14,14 +13,14 @@ const TOOLTIP_LIST_MAX_HEIGHT = 330;
 const TOOLTIP_ITEM_HEIGHT = 38;
 
 export default function Tooltip({
-	seriesIndex,
-	dataIndexes,
 	uPlotInstance,
 	timezone,
-	yAxisUnit = '',
-	decimalPrecision,
+	content,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
+
+	const tooltipContent = content ?? [];
+
 	const headerTitle = useMemo(() => {
 		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
@@ -33,20 +32,6 @@ export default function Tooltip({
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [timezone, uPlotInstance.data, uPlotInstance.cursor.idx]);
 
-	const content = useMemo(
-		(): TooltipContentItem[] =>
-			buildTooltipContent({
-				data: uPlotInstance.data,
-				series: uPlotInstance.series,
-				dataIndexes,
-				activeSeriesIndex: seriesIndex,
-				uPlotInstance,
-				yAxisUnit,
-				decimalPrecision,
-			}),
-		[uPlotInstance, seriesIndex, dataIndexes, yAxisUnit, decimalPrecision],
-	);
-
 	return (
 		<div
 			className={cx(
@@ -60,16 +45,16 @@ export default function Tooltip({
 			<div
 				style={{
 					height: Math.min(
-						content.length * TOOLTIP_ITEM_HEIGHT,
+						tooltipContent.length * TOOLTIP_ITEM_HEIGHT,
 						TOOLTIP_LIST_MAX_HEIGHT,
 					),
 					minHeight: 0,
 				}}
 			>
-				{content.length > 0 ? (
+				{tooltipContent.length > 0 ? (
 					<Virtuoso
 						className="uplot-tooltip-list"
-						data={content}
+						data={tooltipContent}
 						defaultItemHeight={TOOLTIP_ITEM_HEIGHT}
 						itemContent={(_, item): JSX.Element => (
 							<div className="uplot-tooltip-item">

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -20,6 +20,27 @@ export function resolveSeriesColor(
 	return FALLBACK_SERIES_COLOR;
 }
 
+export function getTooltipBaseValue({
+	data,
+	index,
+	dataIndex,
+	isStackedBarChart,
+}: {
+	data: AlignedData;
+	index: number;
+	dataIndex: number;
+	isStackedBarChart?: boolean;
+}): number | null {
+	let baseValue = data[index][dataIndex] ?? null;
+	if (isStackedBarChart && index + 1 < data.length && baseValue !== null) {
+		const nextValue = data[index + 1][dataIndex] ?? null;
+		if (nextValue !== null) {
+			baseValue = baseValue - nextValue;
+		}
+	}
+	return baseValue;
+}
+
 export function buildTooltipContent({
 	data,
 	series,
@@ -28,6 +49,7 @@ export function buildTooltipContent({
 	uPlotInstance,
 	yAxisUnit,
 	decimalPrecision,
+	isStackedBarChart,
 }: {
 	data: AlignedData;
 	series: Series[];
@@ -36,6 +58,7 @@ export function buildTooltipContent({
 	uPlotInstance: uPlot;
 	yAxisUnit: string;
 	decimalPrecision?: PrecisionOption;
+	isStackedBarChart?: boolean;
 }): TooltipContentItem[] {
 	const active: TooltipContentItem[] = [];
 	const rest: TooltipContentItem[] = [];
@@ -52,23 +75,29 @@ export function buildTooltipContent({
 			continue;
 		}
 
-		const raw = data[index]?.[dataIndex];
-		const value = Number(raw);
-		const displayValue = Number.isNaN(value) ? 0 : value;
+		const baseValue = getTooltipBaseValue({
+			data,
+			index,
+			dataIndex,
+			isStackedBarChart,
+		});
+
 		const isActive = index === activeSeriesIndex;
 
-		const item: TooltipContentItem = {
-			label: String(s.label ?? ''),
-			value: displayValue,
-			tooltipValue: getToolTipValue(displayValue, yAxisUnit, decimalPrecision),
-			color: resolveSeriesColor(s.stroke, uPlotInstance, index),
-			isActive,
-		};
+		if (Number.isFinite(baseValue) && baseValue !== null) {
+			const item: TooltipContentItem = {
+				label: String(s.label ?? ''),
+				value: baseValue,
+				tooltipValue: getToolTipValue(baseValue, yAxisUnit, decimalPrecision),
+				color: resolveSeriesColor(s.stroke, uPlotInstance, index),
+				isActive,
+			};
 
-		if (isActive) {
-			active.push(item);
-		} else {
-			rest.push(item);
+			if (isActive) {
+				active.push(item);
+			} else {
+				rest.push(item);
+			}
 		}
 	}
 

frontend/src/lib/uPlotV2/components/__tests__/Legend.test.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { render, RenderResult, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LegendItem } from 'lib/uPlotV2/config/types';
+import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
+
+import { useLegendActions } from '../../hooks/useLegendActions';
+import Legend from '../Legend/Legend';
+import { LegendPosition } from '../types';
+
+jest.mock('react-virtuoso', () => ({
+	VirtuosoGrid: ({
+		data,
+		itemContent,
+		className,
+	}: {
+		data: LegendItem[];
+		itemContent: (index: number, item: LegendItem) => React.ReactNode;
+		className?: string;
+	}): JSX.Element => (
+		<div data-testid="virtuoso-grid" className={className}>
+			{data.map((item, index) => (
+				<div key={item.seriesIndex ?? index} data-testid="legend-item-wrapper">
+					{itemContent(index, item)}
+				</div>
+			))}
+		</div>
+	),
+}));
+
+jest.mock('lib/uPlotV2/hooks/useLegendsSync');
+jest.mock('lib/uPlotV2/hooks/useLegendActions');
+
+const mockUseLegendsSync = useLegendsSync as jest.MockedFunction<
+	typeof useLegendsSync
+>;
+const mockUseLegendActions = useLegendActions as jest.MockedFunction<
+	typeof useLegendActions
+>;
+
+describe('Legend', () => {
+	const baseLegendItemsMap = {
+		0: {
+			seriesIndex: 0,
+			label: 'A',
+			show: true,
+			color: '#ff0000',
+		},
+		1: {
+			seriesIndex: 1,
+			label: 'B',
+			show: false,
+			color: '#00ff00',
+		},
+		2: {
+			seriesIndex: 2,
+			label: 'C',
+			show: true,
+			color: '#0000ff',
+		},
+	};
+
+	let onLegendClick: jest.Mock;
+	let onLegendMouseMove: jest.Mock;
+	let onLegendMouseLeave: jest.Mock;
+	let onFocusSeries: jest.Mock;
+
+	beforeEach(() => {
+		onLegendClick = jest.fn();
+		onLegendMouseMove = jest.fn();
+		onLegendMouseLeave = jest.fn();
+		onFocusSeries = jest.fn();
+
+		mockUseLegendsSync.mockReturnValue({
+			legendItemsMap: baseLegendItemsMap,
+			focusedSeriesIndex: 1,
+			setFocusedSeriesIndex: jest.fn(),
+		});
+
+		mockUseLegendActions.mockReturnValue({
+			onLegendClick,
+			onLegendMouseMove,
+			onLegendMouseLeave,
+			onFocusSeries,
+		});
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const renderLegend = (position?: LegendPosition): RenderResult =>
+		render(
+			<Legend
+				position={position}
+				// config is not used directly in the component, it's consumed by the mocked hook
+				config={{} as any}
+			/>,
+		);
+
+	describe('layout and position', () => {
+		it('renders search input when position is RIGHT', () => {
+			renderLegend(LegendPosition.RIGHT);
+
+			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
+		});
+
+		it('renders the marker with the correct color', () => {
+			renderLegend(LegendPosition.RIGHT);
+
+			const legendMarker = document.querySelector(
+				'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
+			) as HTMLElement;
+
+			expect(legendMarker).toHaveStyle({
+				'border-color': '#ff0000',
+			});
+		});
+
+		it('does not render search input when position is BOTTOM (default)', () => {
+			renderLegend();
+
+			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
+		});
+
+		it('renders all legend items in the grid by default', () => {
+			renderLegend(LegendPosition.RIGHT);
+
+			expect(screen.getByTestId('virtuoso-grid')).toBeInTheDocument();
+			expect(screen.getByText('A')).toBeInTheDocument();
+			expect(screen.getByText('B')).toBeInTheDocument();
+			expect(screen.getByText('C')).toBeInTheDocument();
+		});
+	});
+
+	describe('search behavior (RIGHT position)', () => {
+		it('filters legend items based on search query (case-insensitive)', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, 'A');
+
+			expect(screen.getByText('A')).toBeInTheDocument();
+			expect(screen.queryByText('B')).not.toBeInTheDocument();
+			expect(screen.queryByText('C')).not.toBeInTheDocument();
+		});
+
+		it('shows empty state when no legend items match the search query', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, 'network');
+
+			expect(
+				screen.getByText(/No series found matching "network"/i),
+			).toBeInTheDocument();
+			expect(screen.queryByTestId('virtuoso-grid')).not.toBeInTheDocument();
+		});
+
+		it('does not filter or show empty state when search query is empty or only whitespace', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, '   ');
+
+			expect(
+				screen.queryByText(/No series found matching/i),
+			).not.toBeInTheDocument();
+			expect(screen.getByText('A')).toBeInTheDocument();
+			expect(screen.getByText('B')).toBeInTheDocument();
+			expect(screen.getByText('C')).toBeInTheDocument();
+		});
+	});
+
+	describe('legend actions', () => {
+		it('calls onLegendClick when a legend item is clicked', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			await user.click(screen.getByText('A'));
+
+			expect(onLegendClick).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls mouseMove when the mouse moves over a legend item', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const legendItem = document.querySelector(
+				'[data-legend-item-id="0"]',
+			) as HTMLElement;
+
+			await user.hover(legendItem);
+
+			expect(onLegendMouseMove).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls onLegendMouseLeave when the mouse leaves the legend container', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const container = document.querySelector('.legend-container') as HTMLElement;
+
+			await user.hover(container);
+			await user.unhover(container);
+
+			expect(onLegendMouseLeave).toHaveBeenCalledTimes(1);
+		});
+	});
+});

frontend/src/lib/uPlotV2/components/types.ts

@@ -59,11 +59,22 @@ export interface TooltipRenderArgs {
 	viaSync: boolean;
 }
 
-export type TooltipProps = TooltipRenderArgs & {
+export interface BaseTooltipProps {
 	timezone: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-};
+	content?: TooltipContentItem[];
+}
+
+export interface TimeSeriesTooltipProps
+	extends BaseTooltipProps,
+		TooltipRenderArgs {}
+
+export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
+	isStackedBarChart?: boolean;
+}
+
+export type TooltipProps = TimeSeriesTooltipProps | BarTooltipProps;
 
 export enum LegendPosition {
 	BOTTOM = 'bottom',

frontend/src/lib/uPlotV2/config/types.ts

@@ -110,6 +110,7 @@ export enum LineStyle {
 export enum DrawStyle {
 	Line = 'line',
 	Points = 'points',
+	Bar = 'bar',
 }
 
 export enum LineInterpolation {
@@ -128,7 +129,7 @@ export enum VisibilityMode {
 export interface SeriesProps {
 	scaleKey: string;
 	label?: string;
-
+	panelType: PANEL_TYPES;
 	colorMapping: Record<string, string>;
 	drawStyle: DrawStyle;
 	pathBuilder?: Series.PathBuilder;

frontend/src/lib/uPlotV2/context/__tests__/PlotContext.test.tsx

@@ -0,0 +1,318 @@
+import { act, render } from '@testing-library/react';
+import { updateSeriesVisibilityToLocalStorage } from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
+import {
+	PlotContextProvider,
+	usePlotContext,
+} from 'lib/uPlotV2/context/PlotContext';
+import type uPlot from 'uplot';
+
+jest.mock(
+	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
+	() => ({
+		updateSeriesVisibilityToLocalStorage: jest.fn(),
+	}),
+);
+
+const mockUpdateSeriesVisibilityToLocalStorage = updateSeriesVisibilityToLocalStorage as jest.MockedFunction<
+	typeof updateSeriesVisibilityToLocalStorage
+>;
+
+interface MockSeries extends Partial<uPlot.Series> {
+	label?: string;
+	show?: boolean;
+}
+
+const createMockPlot = (series: MockSeries[] = []): uPlot =>
+	(({
+		series,
+		batch: jest.fn((fn: () => void) => fn()),
+		setSeries: jest.fn(),
+	} as unknown) as uPlot);
+
+const getPlotContext = (): ReturnType<typeof usePlotContext> => {
+	let ctx: ReturnType<typeof usePlotContext> | null = null;
+
+	const Consumer = (): JSX.Element => {
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		ctx = usePlotContext();
+		return <div data-testid="consumer" />;
+	};
+
+	render(
+		<PlotContextProvider>
+			<Consumer />
+		</PlotContextProvider>,
+	);
+
+	if (!ctx) {
+		throw new Error('Context was not captured');
+	}
+
+	return ctx;
+};
+
+describe('PlotContext', () => {
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('throws when usePlotContext is used outside provider', () => {
+		const Consumer = (): JSX.Element => {
+			// eslint-disable-next-line react-hooks/rules-of-hooks
+			usePlotContext();
+			return <div />;
+		};
+
+		expect(() => render(<Consumer />)).toThrow(
+			'Should be used inside the context',
+		);
+	});
+
+	it('syncSeriesVisibilityToLocalStorage does nothing without plot or widgetId', () => {
+		const ctx = getPlotContext();
+
+		act(() => {
+			ctx.syncSeriesVisibilityToLocalStorage();
+		});
+
+		expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
+	});
+
+	it('syncSeriesVisibilityToLocalStorage serializes series visibility to localStorage helper', () => {
+		const plot = createMockPlot([
+			{ label: 'x-axis', show: true },
+			{ label: 'CPU', show: true },
+			{ label: 'Memory', show: false },
+		]);
+
+		const ctx = getPlotContext();
+
+		act(() => {
+			ctx.setPlotContextInitialState({
+				uPlotInstance: plot,
+				widgetId: 'widget-123',
+				shouldSaveSelectionPreference: true,
+			});
+		});
+
+		act(() => {
+			ctx.syncSeriesVisibilityToLocalStorage();
+		});
+
+		expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
+		expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledWith(
+			'widget-123',
+			[
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			],
+		);
+	});
+
+	describe('onToggleSeriesVisibility', () => {
+		it('does nothing when plot instance is not set', () => {
+			const ctx = getPlotContext();
+
+			act(() => {
+				ctx.onToggleSeriesVisibility(1);
+			});
+
+			// No errors and no calls to localStorage helper
+			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
+		});
+
+		it('highlights a single series and saves visibility when preferences are enabled', () => {
+			const series: MockSeries[] = [
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: true },
+			];
+			const plot = createMockPlot(series);
+			const ctx = getPlotContext();
+
+			act(() => {
+				ctx.setPlotContextInitialState({
+					uPlotInstance: plot,
+					widgetId: 'widget-visibility',
+					shouldSaveSelectionPreference: true,
+				});
+			});
+
+			act(() => {
+				ctx.onToggleSeriesVisibility(1);
+			});
+
+			const setSeries = (plot.setSeries as jest.Mock).mock.calls;
+
+			// index 0 is skipped, so we expect calls for 1 and 2
+			expect(setSeries).toEqual([
+				[1, { show: true }],
+				[2, { show: false }],
+			]);
+
+			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
+			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledWith(
+				'widget-visibility',
+				[
+					{ label: 'x-axis', show: true },
+					{ label: 'CPU', show: true },
+					{ label: 'Memory', show: true },
+				],
+			);
+		});
+
+		it('resets visibility for all series when toggling the same index again', () => {
+			const series: MockSeries[] = [
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: true },
+			];
+			const plot = createMockPlot(series);
+			const ctx = getPlotContext();
+
+			act(() => {
+				ctx.setPlotContextInitialState({
+					uPlotInstance: plot,
+					widgetId: 'widget-reset',
+					shouldSaveSelectionPreference: true,
+				});
+			});
+
+			act(() => {
+				ctx.onToggleSeriesVisibility(1);
+			});
+
+			(plot.setSeries as jest.Mock).mockClear();
+
+			act(() => {
+				ctx.onToggleSeriesVisibility(1);
+			});
+
+			const setSeries = (plot.setSeries as jest.Mock).mock.calls;
+
+			// After reset, all non-zero series should be shown
+			expect(setSeries).toEqual([
+				[1, { show: true }],
+				[2, { show: true }],
+			]);
+		});
+	});
+
+	describe('onToggleSeriesOnOff', () => {
+		it('does nothing when plot instance is not set', () => {
+			const ctx = getPlotContext();
+
+			act(() => {
+				ctx.onToggleSeriesOnOff(1);
+			});
+
+			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
+		});
+
+		it('toggles series show flag and saves visibility when preferences are enabled', () => {
+			const series: MockSeries[] = [
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: true },
+			];
+			const plot = createMockPlot(series);
+			const ctx = getPlotContext();
+
+			act(() => {
+				ctx.setPlotContextInitialState({
+					uPlotInstance: plot,
+					widgetId: 'widget-toggle',
+					shouldSaveSelectionPreference: true,
+				});
+			});
+
+			act(() => {
+				ctx.onToggleSeriesOnOff(1);
+			});
+
+			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: false });
+			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
+			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledWith(
+				'widget-toggle',
+				expect.any(Array),
+			);
+		});
+
+		it('does not toggle when target series does not exist', () => {
+			const series: MockSeries[] = [{ label: 'x-axis', show: true }];
+			const plot = createMockPlot(series);
+			const ctx = getPlotContext();
+
+			act(() => {
+				ctx.setPlotContextInitialState({
+					uPlotInstance: plot,
+					widgetId: 'widget-missing-series',
+					shouldSaveSelectionPreference: true,
+				});
+			});
+
+			act(() => {
+				ctx.onToggleSeriesOnOff(5);
+			});
+
+			expect(plot.setSeries).not.toHaveBeenCalled();
+			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
+		});
+
+		it('does not persist visibility when preferences flag is disabled', () => {
+			const series: MockSeries[] = [
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: true },
+			];
+			const plot = createMockPlot(series);
+			const ctx = getPlotContext();
+
+			act(() => {
+				ctx.setPlotContextInitialState({
+					uPlotInstance: plot,
+					widgetId: 'widget-no-persist',
+					shouldSaveSelectionPreference: false,
+				});
+			});
+
+			act(() => {
+				ctx.onToggleSeriesOnOff(1);
+			});
+
+			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: false });
+			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('onFocusSeries', () => {
+		it('does nothing when plot instance is not set', () => {
+			const ctx = getPlotContext();
+
+			act(() => {
+				ctx.onFocusSeries(1);
+			});
+		});
+
+		it('sets focus on the given series index', () => {
+			const plot = createMockPlot([
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: true },
+			]);
+			const ctx = getPlotContext();
+
+			act(() => {
+				ctx.setPlotContextInitialState({
+					uPlotInstance: plot,
+					widgetId: 'widget-focus',
+					shouldSaveSelectionPreference: false,
+				});
+			});
+
+			act(() => {
+				ctx.onFocusSeries(1);
+			});
+
+			expect(plot.setSeries).toHaveBeenCalledWith(1, { focus: true }, false);
+		});
+	});
+});

frontend/src/lib/uPlotV2/hooks/__tests__/useLegendActions.test.ts

@@ -0,0 +1,218 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
+import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
+import { useLegendActions } from 'lib/uPlotV2/hooks/useLegendActions';
+
+jest.mock('lib/uPlotV2/context/PlotContext');
+
+const mockUsePlotContext = usePlotContext as jest.MockedFunction<
+	typeof usePlotContext
+>;
+
+describe('useLegendActions', () => {
+	let onToggleSeriesVisibility: jest.Mock;
+	let onToggleSeriesOnOff: jest.Mock;
+	let onFocusSeriesPlot: jest.Mock;
+	let setPlotContextInitialState: jest.Mock;
+	let syncSeriesVisibilityToLocalStorage: jest.Mock;
+	let setFocusedSeriesIndexMock: jest.Mock;
+	let cancelAnimationFrameMock: jest.Mock;
+	let user: UserEvent;
+
+	beforeAll(() => {
+		user = userEvent.setup();
+		cancelAnimationFrameMock = jest.fn();
+		(global as any).cancelAnimationFrame = cancelAnimationFrameMock;
+		(global as any).requestAnimationFrame = (
+			cb: FrameRequestCallback,
+		): number => {
+			cb(0);
+			return 1;
+		};
+	});
+
+	beforeEach(() => {
+		onToggleSeriesVisibility = jest.fn();
+		onToggleSeriesOnOff = jest.fn();
+		onFocusSeriesPlot = jest.fn();
+		setPlotContextInitialState = jest.fn();
+		syncSeriesVisibilityToLocalStorage = jest.fn();
+		setFocusedSeriesIndexMock = jest.fn();
+
+		mockUsePlotContext.mockReturnValue({
+			onToggleSeriesVisibility,
+			onToggleSeriesOnOff,
+			onFocusSeries: onFocusSeriesPlot,
+			setPlotContextInitialState,
+			syncSeriesVisibilityToLocalStorage,
+		});
+
+		cancelAnimationFrameMock.mockClear();
+	});
+
+	const TestLegendActionsComponent = ({
+		focusedSeriesIndex,
+	}: {
+		focusedSeriesIndex: number | null;
+	}): JSX.Element => {
+		const {
+			onLegendClick,
+			onLegendMouseMove,
+			onLegendMouseLeave,
+		} = useLegendActions({
+			setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+			focusedSeriesIndex,
+		});
+
+		return React.createElement(
+			'div',
+			{
+				'data-testid': 'legend-container',
+				onClick: onLegendClick,
+				onMouseMove: onLegendMouseMove,
+				onMouseLeave: onLegendMouseLeave,
+			},
+			React.createElement(
+				'div',
+				{ 'data-testid': 'no-legend-target' },
+				'No legend',
+			),
+			React.createElement(
+				'div',
+				{ 'data-legend-item-id': '0' },
+				React.createElement('div', {
+					'data-testid': 'marker-0',
+					'data-is-legend-marker': 'true',
+				} as any),
+				React.createElement('div', { 'data-testid': 'label-0' }, 'Series 0'),
+			),
+			React.createElement(
+				'div',
+				{ 'data-legend-item-id': '1' },
+				React.createElement('div', {
+					'data-testid': 'marker-1',
+					'data-is-legend-marker': 'true',
+				} as any),
+				React.createElement('div', { 'data-testid': 'label-1' }, 'Series 1'),
+			),
+		);
+	};
+
+	describe('onLegendClick', () => {
+		it('toggles series visibility when clicking on legend label', async () => {
+			render(
+				React.createElement(TestLegendActionsComponent, {
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			await user.click(screen.getByTestId('label-0'));
+
+			expect(onToggleSeriesVisibility).toHaveBeenCalledTimes(1);
+			expect(onToggleSeriesVisibility).toHaveBeenCalledWith(0);
+			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
+		});
+
+		it('toggles series on/off when clicking on marker', async () => {
+			render(
+				React.createElement(TestLegendActionsComponent, {
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			await user.click(screen.getByTestId('marker-0'));
+
+			expect(onToggleSeriesOnOff).toHaveBeenCalledTimes(1);
+			expect(onToggleSeriesOnOff).toHaveBeenCalledWith(0);
+			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
+		});
+
+		it('does nothing when click target is not inside a legend item', async () => {
+			render(
+				React.createElement(TestLegendActionsComponent, {
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			await user.click(screen.getByTestId('no-legend-target'));
+
+			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
+			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('onFocusSeries', () => {
+		it('schedules focus update and calls plot focus handler via mouse move', async () => {
+			render(
+				React.createElement(TestLegendActionsComponent, {
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			await user.hover(screen.getByTestId('label-0'));
+
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(0);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(0);
+		});
+
+		it('cancels previous animation frame before scheduling new one on subsequent mouse moves', async () => {
+			render(
+				React.createElement(TestLegendActionsComponent, {
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			await user.hover(screen.getByTestId('label-0'));
+			await user.hover(screen.getByTestId('label-1'));
+
+			expect(cancelAnimationFrameMock).toHaveBeenCalled();
+		});
+	});
+
+	describe('onLegendMouseMove', () => {
+		it('focuses new series when hovering over different legend item', async () => {
+			render(
+				React.createElement(TestLegendActionsComponent, {
+					focusedSeriesIndex: 0,
+				}),
+			);
+
+			await user.hover(screen.getByTestId('label-1'));
+
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(1);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(1);
+		});
+
+		it('does nothing when hovering over already focused series', async () => {
+			render(
+				React.createElement(TestLegendActionsComponent, {
+					focusedSeriesIndex: 1,
+				}),
+			);
+
+			await user.hover(screen.getByTestId('label-1'));
+
+			expect(setFocusedSeriesIndexMock).not.toHaveBeenCalled();
+			expect(onFocusSeriesPlot).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('onLegendMouseLeave', () => {
+		it('cancels pending animation frame and clears focus state', async () => {
+			render(
+				React.createElement(TestLegendActionsComponent, {
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			await user.hover(screen.getByTestId('label-0'));
+			await user.unhover(screen.getByTestId('legend-container'));
+
+			expect(cancelAnimationFrameMock).toHaveBeenCalled();
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(null);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(null);
+		});
+	});
+});

frontend/src/lib/uPlotV2/hooks/__tests__/useLegendsSync.test.ts

@@ -0,0 +1,235 @@
+import React, { useEffect } from 'react';
+import { act, cleanup, render } from '@testing-library/react';
+import type { LegendItem } from 'lib/uPlotV2/config/types';
+import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
+
+describe('useLegendsSync', () => {
+	let requestAnimationFrameSpy: jest.Mock<
+		number,
+		[callback: FrameRequestCallback]
+	>;
+	let cancelAnimationFrameSpy: jest.Mock<void, [handle: number]>;
+
+	beforeAll(() => {
+		requestAnimationFrameSpy = jest.fn((cb: FrameRequestCallback): number => {
+			cb(0);
+			return 1;
+		});
+
+		cancelAnimationFrameSpy = jest.fn();
+
+		(global as any).requestAnimationFrame = requestAnimationFrameSpy;
+		(global as any).cancelAnimationFrame = cancelAnimationFrameSpy;
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+		cleanup();
+	});
+
+	afterAll(() => {
+		jest.resetAllMocks();
+	});
+
+	type HookResult = ReturnType<typeof useLegendsSync>;
+	let latestHookValue: HookResult;
+
+	const createMockConfig = (
+		legendItems: Record<number, LegendItem>,
+	): {
+		config: UPlotConfigBuilder;
+		invokeSetSeries: (
+			seriesIndex: number | null,
+			opts: { show?: boolean; focus?: boolean },
+			fireHook?: boolean,
+		) => void;
+	} => {
+		let setSeriesHandler:
+			| ((u: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
+			| null = null;
+
+		const config = ({
+			getLegendItems: jest.fn(() => legendItems),
+			addHook: jest.fn(
+				(
+					hookName: string,
+					handler: (
+						u: uPlot,
+						seriesIndex: number | null,
+						opts: uPlot.Series,
+					) => void,
+				) => {
+					if (hookName === 'setSeries') {
+						setSeriesHandler = handler;
+					}
+
+					return (): void => {
+						setSeriesHandler = null;
+					};
+				},
+			),
+		} as unknown) as UPlotConfigBuilder;
+
+		const invokeSetSeries = (
+			seriesIndex: number | null,
+			opts: { show?: boolean; focus?: boolean },
+		): void => {
+			if (setSeriesHandler) {
+				setSeriesHandler({} as uPlot, seriesIndex, { ...opts });
+			}
+		};
+
+		return { config, invokeSetSeries };
+	};
+
+	const TestComponent = ({
+		config,
+		subscribeToFocusChange,
+	}: {
+		config: UPlotConfigBuilder;
+		subscribeToFocusChange?: boolean;
+	}): JSX.Element => {
+		const value = useLegendsSync({ config, subscribeToFocusChange });
+		latestHookValue = value;
+
+		useEffect(() => {
+			latestHookValue = value;
+		}, [value]);
+
+		return React.createElement('div', { 'data-testid': 'hook-container' });
+	};
+
+	it('initializes legend items from config', () => {
+		const initialItems: Record<number, LegendItem> = {
+			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
+			2: { seriesIndex: 2, label: 'Memory', show: false, color: '#0f0' },
+		};
+
+		const { config } = createMockConfig(initialItems);
+
+		render(
+			React.createElement(TestComponent, {
+				config,
+			}),
+		);
+
+		expect(config.getLegendItems).toHaveBeenCalledTimes(1);
+		expect(config.addHook).toHaveBeenCalledWith(
+			'setSeries',
+			expect.any(Function),
+		);
+
+		expect(latestHookValue.legendItemsMap).toEqual(initialItems);
+	});
+
+	it('updates focusedSeriesIndex when a series gains focus via setSeries by default', async () => {
+		const initialItems: Record<number, LegendItem> = {
+			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
+		};
+
+		const { config, invokeSetSeries } = createMockConfig(initialItems);
+
+		render(
+			React.createElement(TestComponent, {
+				config,
+			}),
+		);
+
+		expect(latestHookValue.focusedSeriesIndex).toBeNull();
+
+		await act(async () => {
+			invokeSetSeries(1, { focus: true });
+		});
+
+		expect(latestHookValue.focusedSeriesIndex).toBe(1);
+	});
+
+	it('does not update focusedSeriesIndex when subscribeToFocusChange is false', () => {
+		const initialItems: Record<number, LegendItem> = {
+			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
+		};
+
+		const { config, invokeSetSeries } = createMockConfig(initialItems);
+
+		render(
+			React.createElement(TestComponent, {
+				config,
+				subscribeToFocusChange: false,
+			}),
+		);
+
+		invokeSetSeries(1, { focus: true });
+
+		expect(latestHookValue.focusedSeriesIndex).toBeNull();
+	});
+
+	it('updates legendItemsMap visibility when show changes for a series', async () => {
+		const initialItems: Record<number, LegendItem> = {
+			0: { seriesIndex: 0, label: 'x-axis', show: true, color: '#000' },
+			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
+		};
+
+		const { config, invokeSetSeries } = createMockConfig(initialItems);
+
+		render(
+			React.createElement(TestComponent, {
+				config,
+			}),
+		);
+
+		// Toggle visibility of series 1
+		await act(async () => {
+			invokeSetSeries(1, { show: false });
+		});
+
+		expect(latestHookValue.legendItemsMap[1].show).toBe(false);
+	});
+
+	it('ignores visibility updates for unknown legend items or unchanged show values', () => {
+		const initialItems: Record<number, LegendItem> = {
+			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
+		};
+
+		const { config, invokeSetSeries } = createMockConfig(initialItems);
+
+		render(
+			React.createElement(TestComponent, {
+				config,
+			}),
+		);
+
+		const before = latestHookValue;
+
+		// Unknown series index
+		invokeSetSeries(5, { show: false });
+		// Unchanged visibility for existing item
+		invokeSetSeries(1, { show: true });
+
+		const after = latestHookValue;
+		expect(after.legendItemsMap).toEqual(before.legendItemsMap);
+	});
+
+	it('cancels pending visibility RAF on unmount', () => {
+		const initialItems: Record<number, LegendItem> = {
+			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
+		};
+
+		const { config, invokeSetSeries } = createMockConfig(initialItems);
+
+		// Override RAF to not immediately invoke callback so we can assert cancellation
+		requestAnimationFrameSpy.mockImplementationOnce(() => 42);
+
+		const { unmount } = render(
+			React.createElement(TestComponent, {
+				config,
+			}),
+		);
+
+		invokeSetSeries(1, { show: false });
+
+		unmount();
+
+		expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(42);
+	});
+});

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -1,7 +1,13 @@
-import { CSSProperties } from 'react';
+import type {
+	CSSProperties,
+	MutableRefObject,
+	ReactNode,
+	RefObject,
+} from 'react';
+import type uPlot from 'uplot';
 
-import { TooltipRenderArgs } from '../../components/types';
-import { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
+import type { TooltipRenderArgs } from '../../components/types';
+import type { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
 
 export const TOOLTIP_OFFSET = 10;
 
@@ -17,7 +23,7 @@ export interface TooltipViewState {
 	isHovering: boolean;
 	isPinned: boolean;
 	dismiss: () => void;
-	contents?: React.ReactNode;
+	contents?: ReactNode;
 }
 
 export interface TooltipLayoutInfo {
@@ -31,7 +37,7 @@ export interface TooltipPluginProps {
 	canPinTooltip?: boolean;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
-	render: (args: TooltipRenderArgs) => React.ReactNode;
+	render: (args: TooltipRenderArgs) => ReactNode;
 	maxWidth?: number;
 	maxHeight?: number;
 }
@@ -75,13 +81,11 @@ export interface TooltipControllerState {
  */
 export interface TooltipControllerContext {
 	controller: TooltipControllerState;
-	layoutRef: React.MutableRefObject<TooltipLayoutInfo | undefined>;
-	containerRef: React.RefObject<HTMLDivElement | null>;
-	rafId: React.MutableRefObject<number | null>;
+	layoutRef: MutableRefObject<TooltipLayoutInfo | undefined>;
+	containerRef: RefObject<HTMLDivElement | null>;
+	rafId: MutableRefObject<number | null>;
 	updateState: (updates: Partial<TooltipViewState>) => void;
-	renderRef: React.MutableRefObject<
-		(args: TooltipRenderArgs) => React.ReactNode
-	>;
+	renderRef: MutableRefObject<(args: TooltipRenderArgs) => ReactNode>;
 	syncMode: DashboardCursorSync;
 	syncKey: string;
 	canPinTooltip: boolean;

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -0,0 +1,484 @@
+import React from 'react';
+import { act, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render } from 'tests/test-utils';
+import type uPlot from 'uplot';
+
+import { TooltipRenderArgs } from '../../components/types';
+import { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
+import TooltipPlugin from '../TooltipPlugin/TooltipPlugin';
+import { DashboardCursorSync } from '../TooltipPlugin/types';
+
+// ---------------------------------------------------------------------------
+// Mock helpers
+// ---------------------------------------------------------------------------
+
+type HookHandler = (...args: unknown[]) => void;
+
+class TestConfigBuilder extends UPlotConfigBuilder {
+	public registeredHooks: { type: string; handler: HookHandler }[] = [];
+
+	public removeCallbacks: jest.Mock[] = [];
+
+	// Override addHook so we can:
+	// - capture handlers by hook name for tests
+	// - return removable jest mocks to assert cleanup
+	public addHook<T extends keyof uPlot.Hooks.Defs>(
+		type: T,
+		hook: uPlot.Hooks.Defs[T],
+	): () => void {
+		this.registeredHooks.push({
+			type: String(type),
+			handler: hook as HookHandler,
+		});
+		const remove = jest.fn();
+		this.removeCallbacks.push(remove);
+		return remove;
+	}
+}
+
+type ConfigMock = TestConfigBuilder;
+
+function createConfigMock(): ConfigMock {
+	return new TestConfigBuilder();
+}
+
+function getHandler(config: ConfigMock, hookName: string): HookHandler {
+	const entry = config.registeredHooks.find((h) => h.type === hookName);
+	if (!entry) {
+		throw new Error(`Hook "${hookName}" was not registered on config`);
+	}
+	return entry.handler;
+}
+
+function createFakePlot(): {
+	over: HTMLDivElement;
+	setCursor: jest.Mock<void, [uPlot.Cursor]>;
+	cursor: { event: Record<string, unknown> };
+} {
+	return {
+		over: document.createElement('div'),
+		setCursor: jest.fn(),
+		cursor: { event: {} },
+	};
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('TooltipPlugin', () => {
+	beforeEach(() => {
+		jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+			(callback as FrameRequestCallback)(0);
+			return 0;
+		});
+		jest
+			.spyOn(window, 'cancelAnimationFrame')
+			// eslint-disable-next-line @typescript-eslint/no-empty-function
+			.mockImplementation(() => {});
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	/**
+	 * Shorthand: render the plugin, initialise a fake plot, and trigger a
+	 * series focus so the tooltip becomes visible. Returns the fake plot
+	 * instance for further interaction (e.g. clicking the overlay).
+	 */
+	function renderAndActivateHover(
+		config: ConfigMock,
+		renderFn: (
+			args: TooltipRenderArgs,
+		) => React.ReactNode = (): React.ReactNode =>
+			React.createElement('div', null, 'tooltip-body'),
+		extraProps: Partial<React.ComponentProps<typeof TooltipPlugin>> = {},
+	): ReturnType<typeof createFakePlot> {
+		render(
+			React.createElement(TooltipPlugin, {
+				config,
+				render: renderFn,
+				syncMode: DashboardCursorSync.None,
+				...extraProps,
+			}),
+		);
+
+		const fakePlot = createFakePlot();
+		const initHandler = getHandler(config, 'init');
+		const setSeriesHandler = getHandler(config, 'setSeries');
+
+		act(() => {
+			initHandler(fakePlot);
+			setSeriesHandler(fakePlot, 1, { focus: true });
+		});
+
+		return fakePlot;
+	}
+
+	// ---- Initial state --------------------------------------------------------
+
+	describe('before any interaction', () => {
+		it('does not render anything when there is no active hover', () => {
+			const config = createConfigMock();
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => React.createElement('div', null, 'tooltip-body'),
+					syncMode: DashboardCursorSync.None,
+				}),
+			);
+
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
+		});
+
+		it('registers all required uPlot hooks on mount', () => {
+			const config = createConfigMock();
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => null,
+					syncMode: DashboardCursorSync.None,
+				}),
+			);
+
+			const registered = config.registeredHooks.map((h) => h.type);
+			expect(registered).toContain('ready');
+			expect(registered).toContain('init');
+			expect(registered).toContain('setData');
+			expect(registered).toContain('setSeries');
+			expect(registered).toContain('setLegend');
+			expect(registered).toContain('setCursor');
+		});
+	});
+
+	// ---- Tooltip rendering ------------------------------------------------------
+
+	describe('tooltip rendering', () => {
+		it('renders contents into a portal on document.body when hover is active', () => {
+			const config = createConfigMock();
+			const renderTooltip = jest.fn(() =>
+				React.createElement('div', null, 'tooltip-body'),
+			);
+
+			renderAndActivateHover(config, renderTooltip);
+
+			expect(renderTooltip).toHaveBeenCalled();
+			expect(screen.getByText('tooltip-body')).toBeInTheDocument();
+
+			const container = document.querySelector(
+				'.tooltip-plugin-container',
+			) as HTMLElement;
+			expect(container).not.toBeNull();
+			expect(container.parentElement).toBe(document.body);
+		});
+	});
+
+	// ---- Pin behaviour ----------------------------------------------------------
+
+	describe('pin behaviour', () => {
+		it('pins the tooltip when canPinTooltip is true and overlay is clicked', () => {
+			const config = createConfigMock();
+
+			const fakePlot = renderAndActivateHover(config, undefined, {
+				canPinTooltip: true,
+			});
+
+			const container = document.querySelector(
+				'.tooltip-plugin-container',
+			) as HTMLElement;
+			expect(container.classList.contains('pinned')).toBe(false);
+
+			act(() => {
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+			});
+
+			return waitFor(() => {
+				const updated = document.querySelector(
+					'.tooltip-plugin-container',
+				) as HTMLElement | null;
+				expect(updated).not.toBeNull();
+				expect(updated?.classList.contains('pinned')).toBe(true);
+			});
+		});
+
+		it('dismisses a pinned tooltip via the dismiss callback', async () => {
+			const config = createConfigMock();
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: (args: TooltipRenderArgs) =>
+						React.createElement(
+							'button',
+							{ type: 'button', onClick: args.dismiss },
+							'Dismiss',
+						),
+					syncMode: DashboardCursorSync.None,
+					canPinTooltip: true,
+				}),
+			);
+
+			const fakePlot = createFakePlot();
+
+			act(() => {
+				getHandler(config, 'init')(fakePlot);
+				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
+			});
+
+			// Pin the tooltip.
+			act(() => {
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+			});
+
+			// Wait until the tooltip is actually pinned (pointer events enabled)
+			await waitFor(() => {
+				const container = document.querySelector(
+					'.tooltip-plugin-container',
+				) as HTMLElement | null;
+				expect(container).not.toBeNull();
+				expect(container?.classList.contains('pinned')).toBe(true);
+			});
+
+			const button = await screen.findByRole('button', { name: 'Dismiss' });
+
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			await user.click(button);
+
+			await waitFor(() => {
+				expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
+			});
+		});
+
+		it('drops a pinned tooltip when the underlying data changes', () => {
+			jest.useFakeTimers();
+			const config = createConfigMock();
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config: config,
+					render: () => React.createElement('div', null, 'tooltip-body'),
+					syncMode: DashboardCursorSync.None,
+					canPinTooltip: true,
+				}),
+			);
+
+			const fakePlot = createFakePlot();
+
+			act(() => {
+				getHandler(config, 'init')(fakePlot);
+				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
+				jest.runAllTimers();
+			});
+
+			// Pin.
+			act(() => {
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+				jest.runAllTimers();
+			});
+
+			expect(
+				(document.querySelector(
+					'.tooltip-plugin-container',
+				) as HTMLElement)?.classList.contains('pinned'),
+			).toBe(true);
+
+			// Simulate data update – should dismiss the pinned tooltip.
+			act(() => {
+				getHandler(config, 'setData')(fakePlot);
+				jest.runAllTimers();
+			});
+
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
+
+			jest.useRealTimers();
+		});
+
+		it('unpins the tooltip on outside mousedown', () => {
+			jest.useFakeTimers();
+			const config = createConfigMock();
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => React.createElement('div', null, 'pinned content'),
+					syncMode: DashboardCursorSync.None,
+					canPinTooltip: true,
+				}),
+			);
+
+			const fakePlot = createFakePlot();
+
+			act(() => {
+				getHandler(config, 'init')(fakePlot);
+				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
+				jest.runAllTimers();
+			});
+
+			act(() => {
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+				jest.runAllTimers();
+			});
+
+			expect(
+				document
+					.querySelector('.tooltip-plugin-container')
+					?.classList.contains('pinned'),
+			).toBe(true);
+
+			// Click outside the tooltip container.
+			act(() => {
+				document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+				jest.runAllTimers();
+			});
+
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
+
+			jest.useRealTimers();
+		});
+
+		it('unpins the tooltip on outside keydown', () => {
+			jest.useFakeTimers();
+			const config = createConfigMock();
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => React.createElement('div', null, 'pinned content'),
+					syncMode: DashboardCursorSync.None,
+					canPinTooltip: true,
+				}),
+			);
+
+			const fakePlot = createFakePlot();
+
+			act(() => {
+				getHandler(config, 'init')(fakePlot);
+				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
+				jest.runAllTimers();
+			});
+
+			act(() => {
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+				jest.runAllTimers();
+			});
+
+			expect(
+				document
+					.querySelector('.tooltip-plugin-container')
+					?.classList.contains('pinned'),
+			).toBe(true);
+
+			// Press a key outside the tooltip.
+			act(() => {
+				document.body.dispatchEvent(
+					new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+				);
+				jest.runAllTimers();
+			});
+
+			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
+
+			jest.useRealTimers();
+		});
+	});
+
+	// ---- Cursor sync ------------------------------------------------------------
+
+	describe('cursor sync', () => {
+		it('enables uPlot cursor sync for time-based scales when mode is Tooltip', () => {
+			const config = createConfigMock();
+			const setCursorSpy = jest.spyOn(config, 'setCursor');
+			config.addScale({ scaleKey: 'x', time: true });
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => null,
+					syncMode: DashboardCursorSync.Tooltip,
+					syncKey: 'dashboard-sync',
+				}),
+			);
+
+			expect(setCursorSpy).toHaveBeenCalledWith({
+				sync: { key: 'dashboard-sync', scales: ['x', null] },
+			});
+		});
+
+		it('does not enable cursor sync when mode is None', () => {
+			const config = createConfigMock();
+			const setCursorSpy = jest.spyOn(config, 'setCursor');
+			config.addScale({ scaleKey: 'x', time: true });
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => null,
+					syncMode: DashboardCursorSync.None,
+				}),
+			);
+
+			expect(setCursorSpy).not.toHaveBeenCalled();
+		});
+
+		it('does not enable cursor sync when scale is not time-based', () => {
+			const config = createConfigMock();
+			const setCursorSpy = jest.spyOn(config, 'setCursor');
+			config.addScale({ scaleKey: 'x', time: false });
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => null,
+					syncMode: DashboardCursorSync.Tooltip,
+				}),
+			);
+
+			expect(setCursorSpy).not.toHaveBeenCalled();
+		});
+	});
+
+	// ---- Cleanup ----------------------------------------------------------------
+
+	describe('cleanup on unmount', () => {
+		it('removes window event listeners and all uPlot hooks', () => {
+			const config = createConfigMock();
+			const addSpy = jest.spyOn(window, 'addEventListener');
+			const removeSpy = jest.spyOn(window, 'removeEventListener');
+
+			const { unmount } = render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => null,
+					syncMode: DashboardCursorSync.None,
+				}),
+			);
+
+			const resizeCall = addSpy.mock.calls.find(([type]) => type === 'resize');
+			const scrollCall = addSpy.mock.calls.find(([type]) => type === 'scroll');
+
+			expect(resizeCall).toBeDefined();
+			expect(scrollCall).toBeDefined();
+
+			const resizeListener = resizeCall?.[1] as EventListener;
+			const scrollListener = scrollCall?.[1] as EventListener;
+			const scrollOptions = scrollCall?.[2];
+
+			unmount();
+
+			config.removeCallbacks.forEach((removeFn) => {
+				expect(removeFn).toHaveBeenCalledTimes(1);
+			});
+
+			expect(removeSpy).toHaveBeenCalledWith('resize', resizeListener);
+			expect(removeSpy).toHaveBeenCalledWith(
+				'scroll',
+				scrollListener,
+				scrollOptions,
+			);
+		});
+	});
+});

frontend/src/lib/uPlotV2/utils/__tests__/dataUtils.test.ts

@@ -0,0 +1,62 @@
+import { isInvalidPlotValue, normalizePlotValue } from '../dataUtils';
+
+describe('dataUtils', () => {
+	describe('isInvalidPlotValue', () => {
+		it('treats null and undefined as invalid', () => {
+			expect(isInvalidPlotValue(null)).toBe(true);
+			expect(isInvalidPlotValue(undefined)).toBe(true);
+		});
+
+		it('treats finite numbers as valid and non-finite as invalid', () => {
+			expect(isInvalidPlotValue(0)).toBe(false);
+			expect(isInvalidPlotValue(123.45)).toBe(false);
+			expect(isInvalidPlotValue(Number.NaN)).toBe(true);
+			expect(isInvalidPlotValue(Infinity)).toBe(true);
+			expect(isInvalidPlotValue(-Infinity)).toBe(true);
+		});
+
+		it('treats well-formed numeric strings as valid', () => {
+			expect(isInvalidPlotValue('0')).toBe(false);
+			expect(isInvalidPlotValue('123.45')).toBe(false);
+			expect(isInvalidPlotValue('-1')).toBe(false);
+		});
+
+		it('treats Infinity/NaN string variants and non-numeric strings as invalid', () => {
+			expect(isInvalidPlotValue('+Inf')).toBe(true);
+			expect(isInvalidPlotValue('-Inf')).toBe(true);
+			expect(isInvalidPlotValue('Infinity')).toBe(true);
+			expect(isInvalidPlotValue('-Infinity')).toBe(true);
+			expect(isInvalidPlotValue('NaN')).toBe(true);
+			expect(isInvalidPlotValue('not-a-number')).toBe(true);
+		});
+
+		it('treats non-number, non-string values as valid (left to caller)', () => {
+			expect(isInvalidPlotValue({})).toBe(false);
+			expect(isInvalidPlotValue([])).toBe(false);
+			expect(isInvalidPlotValue(true)).toBe(false);
+		});
+	});
+
+	describe('normalizePlotValue', () => {
+		it('returns null for invalid values detected by isInvalidPlotValue', () => {
+			expect(normalizePlotValue(null)).toBeNull();
+			expect(normalizePlotValue(undefined)).toBeNull();
+			expect(normalizePlotValue(NaN)).toBeNull();
+			expect(normalizePlotValue(Infinity)).toBeNull();
+			expect(normalizePlotValue('-Infinity')).toBeNull();
+			expect(normalizePlotValue('not-a-number')).toBeNull();
+		});
+
+		it('parses valid numeric strings into numbers', () => {
+			expect(normalizePlotValue('0')).toBe(0);
+			expect(normalizePlotValue('123.45')).toBe(123.45);
+			expect(normalizePlotValue('-1')).toBe(-1);
+		});
+
+		it('passes through valid numbers unchanged', () => {
+			expect(normalizePlotValue(0)).toBe(0);
+			expect(normalizePlotValue(123)).toBe(123);
+			expect(normalizePlotValue(42.5)).toBe(42.5);
+		});
+	});
+});

frontend/src/lib/uPlotV2/utils/__tests__/scale.test.ts

@@ -0,0 +1,201 @@
+import uPlot from 'uplot';
+
+import { DistributionType } from '../../config/types';
+import * as scaleUtils from '../scale';
+
+describe('scale utils', () => {
+	describe('normalizeLogScaleLimits', () => {
+		it('returns limits unchanged when distribution is not logarithmic', () => {
+			const limits = {
+				min: 1,
+				max: 100,
+				softMin: 5,
+				softMax: 50,
+			};
+
+			const result = scaleUtils.normalizeLogScaleLimits({
+				distr: DistributionType.Linear,
+				logBase: 10,
+				limits,
+			});
+
+			expect(result).toEqual(limits);
+		});
+
+		it('snaps positive limits to powers of the log base when distribution is logarithmic', () => {
+			const result = scaleUtils.normalizeLogScaleLimits({
+				distr: DistributionType.Logarithmic,
+				logBase: 10,
+				limits: {
+					min: 3,
+					max: 900,
+					softMin: 12,
+					softMax: 85,
+				},
+			});
+
+			expect(result.min).toBe(1); // 10^0
+			expect(result.max).toBe(1000); // 10^3
+			expect(result.softMin).toBe(10); // 10^1
+			expect(result.softMax).toBe(100); // 10^2
+		});
+	});
+
+	describe('getDistributionConfig', () => {
+		it('returns empty config for time scales', () => {
+			const config = scaleUtils.getDistributionConfig({
+				time: true,
+				distr: DistributionType.Linear,
+				logBase: 2,
+			});
+
+			expect(config).toEqual({});
+		});
+
+		it('returns linear distribution settings for non-time scales', () => {
+			const config = scaleUtils.getDistributionConfig({
+				time: false,
+				distr: DistributionType.Linear,
+				logBase: 2,
+			});
+
+			expect(config.distr).toBe(1);
+			expect(config.log).toBe(2);
+		});
+
+		it('returns log distribution settings for non-time scales', () => {
+			const config = scaleUtils.getDistributionConfig({
+				time: false,
+				distr: DistributionType.Logarithmic,
+				logBase: 10,
+			});
+
+			expect(config.distr).toBe(3);
+			expect(config.log).toBe(10);
+		});
+	});
+
+	describe('getRangeConfig', () => {
+		it('computes range config and fixed range flags correctly', () => {
+			const {
+				rangeConfig,
+				hardMinOnly,
+				hardMaxOnly,
+				hasFixedRange,
+			} = scaleUtils.getRangeConfig(0, 100, null, null, 0.1, 0.2);
+
+			expect(rangeConfig.min).toEqual({
+				pad: 0.1,
+				hard: 0,
+				soft: undefined,
+				mode: 3,
+			});
+			expect(rangeConfig.max).toEqual({
+				pad: 0.2,
+				hard: 100,
+				soft: undefined,
+				mode: 3,
+			});
+			expect(hardMinOnly).toBe(true);
+			expect(hardMaxOnly).toBe(true);
+			expect(hasFixedRange).toBe(true);
+		});
+	});
+
+	describe('createRangeFunction', () => {
+		it('returns [dataMin, dataMax] when no fixed range and no data', () => {
+			const params = {
+				rangeConfig: {} as uPlot.Range.Config,
+				hardMinOnly: false,
+				hardMaxOnly: false,
+				hasFixedRange: false,
+				min: null,
+				max: null,
+			};
+
+			const rangeFn = scaleUtils.createRangeFunction(params);
+
+			const u = ({
+				scales: {
+					y: {
+						distr: 1,
+						log: 10,
+					},
+				},
+			} as unknown) as uPlot;
+
+			const result = rangeFn(
+				u,
+				(null as unknown) as number,
+				(null as unknown) as number,
+				'y',
+			);
+
+			expect(result).toEqual([null, null]);
+		});
+
+		it('applies hard min/max for linear scale when only hard limits are set', () => {
+			const params = {
+				rangeConfig: {} as uPlot.Range.Config,
+				hardMinOnly: true,
+				hardMaxOnly: true,
+				hasFixedRange: true,
+				min: 0,
+				max: 100,
+			};
+
+			const rangeFn = scaleUtils.createRangeFunction(params);
+
+			// Use an undefined distr so the range function skips calling uPlot.rangeNum
+			// and we can focus on the behavior of applyHardLimits.
+			const u = ({
+				scales: {
+					y: {
+						distr: undefined,
+						log: 10,
+					},
+				},
+			} as unknown) as uPlot;
+
+			const result = rangeFn(u, 10, 20, 'y');
+
+			// After applyHardLimits, the returned range should respect configured min/max
+			expect(result).toEqual([0, 100]);
+		});
+	});
+
+	describe('adjustSoftLimitsWithThresholds', () => {
+		it('returns original soft limits when there are no thresholds', () => {
+			const result = scaleUtils.adjustSoftLimitsWithThresholds(1, 5, [], 'ms');
+
+			expect(result).toEqual({ softMin: 1, softMax: 5 });
+		});
+
+		it('expands soft limits to include threshold min/max values', () => {
+			const result = scaleUtils.adjustSoftLimitsWithThresholds(
+				3,
+				6,
+				[{ thresholdValue: 2 }, { thresholdValue: 8 }],
+				'ms',
+			);
+
+			// min should be pulled down to the smallest threshold value
+			expect(result.softMin).toBe(2);
+			// max should be pushed up to the largest threshold value
+			expect(result.softMax).toBe(8);
+		});
+	});
+
+	describe('getFallbackMinMaxTimeStamp', () => {
+		it('returns a 24-hour window ending at approximately now', () => {
+			const { fallbackMin, fallbackMax } = scaleUtils.getFallbackMinMaxTimeStamp();
+
+			// Difference should be exactly one day in seconds
+			expect(fallbackMax - fallbackMin).toBe(86400);
+
+			// Both should be reasonable timestamps (not NaN or negative)
+			expect(fallbackMin).toBeGreaterThan(0);
+			expect(fallbackMax).toBeGreaterThan(fallbackMin);
+		});
+	});
+});

frontend/src/lib/uPlotV2/utils/__tests__/threshold.test.ts

@@ -0,0 +1,34 @@
+import { findMinMaxThresholdValues } from '../threshold';
+
+describe('findMinMaxThresholdValues', () => {
+	it('returns [null, null] when thresholds array is empty or missing', () => {
+		expect(findMinMaxThresholdValues([], 'ms')).toEqual([null, null]);
+	});
+
+	it('returns min and max from thresholdValue when units are not provided', () => {
+		const thresholds = [
+			{ thresholdValue: 5 },
+			{ thresholdValue: 1 },
+			{ thresholdValue: 10 },
+		];
+
+		const [min, max] = findMinMaxThresholdValues(thresholds);
+
+		expect(min).toBe(1);
+		expect(max).toBe(10);
+	});
+
+	it('ignores thresholds without a value or with unconvertible units', () => {
+		const thresholds = [
+			// Should be ignored: convertValue returns null for unknown unit
+			{ thresholdValue: 100, thresholdUnit: 'unknown-unit' },
+			// Should be used
+			{ thresholdValue: 4 },
+		];
+
+		const [min, max] = findMinMaxThresholdValues(thresholds, 'ms');
+
+		expect(min).toBe(4);
+		expect(max).toBe(4);
+	});
+});

frontend/src/mocks-server/server.ts

@@ -7,4 +7,6 @@ import { handlers } from './handlers';
 // This configures a request mocking server with the given request handlers.
 export const server = setupServer(...handlers);
 
+export * from './utils';
+
 export { rest };

frontend/src/mocks-server/utils.ts

@@ -0,0 +1,26 @@
+import { ResponseResolver, restContext, RestRequest } from 'msw';
+
+export const createErrorResponse = (
+	status: number,
+	code: string,
+	message: string,
+): ResponseResolver<RestRequest, typeof restContext> => (
+	_req,
+	res,
+	ctx,
+): ReturnType<ResponseResolver<RestRequest, typeof restContext>> =>
+	res(
+		ctx.status(status),
+		ctx.json({
+			error: {
+				code,
+				message,
+			},
+		}),
+	);
+
+export const handleInternalServerError = createErrorResponse(
+	500,
+	'INTERNAL_SERVER_ERROR',
+	'Internal server error occurred',
+);

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

@@ -0,0 +1,46 @@
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { render, waitFor } from 'tests/test-utils';
+
+import ForgotPassword 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
+>;
+
+describe('ForgotPassword Page', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('Route State Handling', () => {
+		it('redirects to login when route state is missing', async () => {
+			render(<ForgotPassword />, undefined, {
+				initialRoute: '/forgot-password',
+			});
+
+			await waitFor(() => {
+				expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
+			});
+		});
+
+		it('returns null when route state is missing', () => {
+			const { container } = render(<ForgotPassword />, undefined, {
+				initialRoute: '/forgot-password',
+			});
+
+			expect(container.firstChild).toBeNull();
+		});
+	});
+});

frontend/src/pages/ForgotPassword/index.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import AuthPageContainer from 'components/AuthPageContainer';
+import ROUTES from 'constants/routes';
+import ForgotPasswordContainer, {
+	ForgotPasswordRouteState,
+} from 'container/ForgotPassword';
+import history from 'lib/history';
+
+import '../Login/Login.styles.scss';
+
+function ForgotPassword(): JSX.Element | null {
+	const location = useLocation<ForgotPasswordRouteState | undefined>();
+	const routeState = location.state;
+
+	useEffect(() => {
+		if (!routeState?.email) {
+			history.push(ROUTES.LOGIN);
+		}
+	}, [routeState]);
+
+	if (!routeState?.email) {
+		return null;
+	}
+
+	return (
+		<AuthPageContainer>
+			<div className="auth-form-card">
+				<ForgotPasswordContainer
+					email={routeState.email}
+					orgId={routeState.orgId}
+					orgs={routeState.orgs}
+				/>
+			</div>
+		</AuthPageContainer>
+	);
+}
+
+export default ForgotPassword;

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -84,6 +84,8 @@ const DashboardContext = createContext<IDashboardContext>({
 	toScrollWidgetId: '',
 	setToScrollWidgetId: () => {},
 	updateLocalStorageDashboardVariables: () => {},
+	variablesToGetUpdated: [],
+	setVariablesToGetUpdated: () => {},
 	dashboardQueryRangeCalled: false,
 	setDashboardQueryRangeCalled: () => {},
 	selectedRowWidgetId: '',
@@ -181,6 +183,10 @@ export function DashboardProvider({
 		exact: true,
 	});
 
+	const [variablesToGetUpdated, setVariablesToGetUpdated] = useState<string[]>(
+		[],
+	);
+
 	const [layouts, setLayouts] = useState<Layout[]>([]);
 
 	const [panelMap, setPanelMap] = useState<
@@ -511,6 +517,8 @@ export function DashboardProvider({
 			updatedTimeRef,
 			setToScrollWidgetId,
 			updateLocalStorageDashboardVariables,
+			variablesToGetUpdated,
+			setVariablesToGetUpdated,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
 			selectedRowWidgetId,
@@ -533,6 +541,8 @@ export function DashboardProvider({
 			toScrollWidgetId,
 			updateLocalStorageDashboardVariables,
 			currentDashboard,
+			variablesToGetUpdated,
+			setVariablesToGetUpdated,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
 			selectedRowWidgetId,

frontend/src/providers/Dashboard/__tests__/Dashboard.test.tsx

@@ -412,14 +412,16 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 			});
 
 			// Verify dashboard state contains the variables with default values
-			const dashboardVariables = await screen.findByTestId('dashboard-variables');
-			const parsedVariables = JSON.parse(dashboardVariables.textContent || '{}');
+			await waitFor(() => {
+				const dashboardVariables = screen.getByTestId('dashboard-variables');
+				const parsedVariables = JSON.parse(dashboardVariables.textContent || '{}');
 
-			expect(parsedVariables).toHaveProperty('environment');
-			expect(parsedVariables).toHaveProperty('services');
-			// Default allSelected values should be preserved
-			expect(parsedVariables.environment.allSelected).toBe(false);
-			expect(parsedVariables.services.allSelected).toBe(false);
+				expect(parsedVariables).toHaveProperty('environment');
+				expect(parsedVariables).toHaveProperty('services');
+				// Default allSelected values should be preserved
+				expect(parsedVariables.environment.allSelected).toBe(false);
+				expect(parsedVariables.services.allSelected).toBe(false);
+			});
 		});
 
 		it('should merge URL variables with dashboard data and normalize values correctly', async () => {
@@ -466,16 +468,26 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 			});
 
 			// Verify the dashboard state reflects the normalized URL values
-			const dashboardVariables = await screen.findByTestId('dashboard-variables');
-			const parsedVariables = JSON.parse(dashboardVariables.textContent || '{}');
+			await waitFor(() => {
+				const dashboardVariables = screen.getByTestId('dashboard-variables');
+				const parsedVariables = JSON.parse(dashboardVariables.textContent || '{}');
 
-			// The selectedValue should be updated with normalized URL values
-			expect(parsedVariables.environment.selectedValue).toBe('development');
-			expect(parsedVariables.services.selectedValue).toEqual(['db', 'cache']);
+				// First ensure the variables exist
+				expect(parsedVariables).toHaveProperty('environment');
+				expect(parsedVariables).toHaveProperty('services');
 
-			// allSelected should be set to false when URL values override
-			expect(parsedVariables.environment.allSelected).toBe(false);
-			expect(parsedVariables.services.allSelected).toBe(false);
+				// Then check their properties
+				expect(parsedVariables.environment).toHaveProperty('selectedValue');
+				expect(parsedVariables.services).toHaveProperty('selectedValue');
+
+				// The selectedValue should be updated with normalized URL values
+				expect(parsedVariables.environment.selectedValue).toBe('development');
+				expect(parsedVariables.services.selectedValue).toEqual(['db', 'cache']);
+
+				// allSelected should be set to false when URL values override
+				expect(parsedVariables.environment.allSelected).toBe(false);
+				expect(parsedVariables.services.allSelected).toBe(false);
+			});
 		});
 
 		it('should handle ALL_SELECTED_VALUE from URL and set allSelected correctly', async () => {
@@ -500,8 +512,8 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 			);
 
 			// Verify that allSelected is set to true for the services variable
-			await waitFor(async () => {
-				const dashboardVariables = await screen.findByTestId('dashboard-variables');
+			await waitFor(() => {
+				const dashboardVariables = screen.getByTestId('dashboard-variables');
 				const parsedVariables = JSON.parse(dashboardVariables.textContent || '{}');
 
 				expect(parsedVariables.services.allSelected).toBe(true);
@@ -603,8 +615,8 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			});
 
 			// Verify that defaultValue is set from textboxValue
-			await waitFor(async () => {
-				const dashboardVariables = await screen.findByTestId('dashboard-variables');
+			await waitFor(() => {
+				const dashboardVariables = screen.getByTestId('dashboard-variables');
 				const parsedVariables = JSON.parse(dashboardVariables.textContent || '{}');
 
 				expect(parsedVariables.myTextbox.type).toBe('TEXTBOX');
@@ -648,8 +660,8 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			});
 
 			// Verify that existing defaultValue is preserved
-			await waitFor(async () => {
-				const dashboardVariables = await screen.findByTestId('dashboard-variables');
+			await waitFor(() => {
+				const dashboardVariables = screen.getByTestId('dashboard-variables');
 				const parsedVariables = JSON.parse(dashboardVariables.textContent || '{}');
 
 				expect(parsedVariables.myTextbox.type).toBe('TEXTBOX');
@@ -694,8 +706,8 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			});
 
 			// Verify that defaultValue is set to empty string
-			await waitFor(async () => {
-				const dashboardVariables = await screen.findByTestId('dashboard-variables');
+			await waitFor(() => {
+				const dashboardVariables = screen.getByTestId('dashboard-variables');
 				const parsedVariables = JSON.parse(dashboardVariables.textContent || '{}');
 
 				expect(parsedVariables.myTextbox.type).toBe('TEXTBOX');
@@ -739,8 +751,8 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			});
 
 			// Verify that defaultValue is NOT set from textboxValue for QUERY type
-			await waitFor(async () => {
-				const dashboardVariables = await screen.findByTestId('dashboard-variables');
+			await waitFor(() => {
+				const dashboardVariables = screen.getByTestId('dashboard-variables');
 				const parsedVariables = JSON.parse(dashboardVariables.textContent || '{}');
 
 				expect(parsedVariables.myQuery.type).toBe('QUERY');

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStore.ts

@@ -1,5 +1,4 @@
 import createStore from '../store';
-import { VariableFetchContext } from '../variableFetchStore';
 import { IDashboardVariablesStoreState } from './dashboardVariablesStoreTypes';
 import {
 	computeDerivedValues,
@@ -11,8 +10,6 @@ const initialState: IDashboardVariablesStoreState = {
 	variables: {},
 	sortedVariablesArray: [],
 	dependencyData: null,
-	variableTypes: {},
-	dynamicVariableOrder: [],
 };
 
 export const dashboardVariablesStore = createStore<IDashboardVariablesStoreState>(
@@ -58,17 +55,3 @@ export function updateDashboardVariablesStore({
 		updateDerivedValues(draft);
 	});
 }
-
-/**
- * Read current store snapshot as VariableFetchContext.
- * Used by components to pass context to variableFetchStore actions
- * without creating a circular import.
- */
-export function getVariableFetchContext(): VariableFetchContext {
-	const state = dashboardVariablesStore.getSnapshot();
-	return {
-		variableTypes: state.variableTypes,
-		dynamicVariableOrder: state.dynamicVariableOrder,
-		dependencyData: state.dependencyData,
-	};
-}

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes.ts

@@ -1,7 +1,4 @@
-import {
-	IDashboardVariable,
-	TVariableQueryType,
-} from 'types/api/dashboard/getAll';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 export type VariableGraph = Record<string, string[]>;
 
@@ -27,12 +24,6 @@ export interface IDashboardVariablesStoreState {
 
 	// Derived: dependency data for QUERY variables
 	dependencyData: IDependencyData | null;
-
-	// Derived: variable name → type mapping
-	variableTypes: Record<string, TVariableQueryType>;
-
-	// Derived: display-ordered list of dynamic variable names
-	dynamicVariableOrder: string[];
 }
 
 export interface IUseDashboardVariablesReturn {

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreUtils.ts

@@ -2,10 +2,7 @@ import {
 	buildDependencies,
 	buildDependencyGraph,
 } from 'container/DashboardContainer/DashboardVariablesSelection/util';
-import {
-	IDashboardVariable,
-	TVariableQueryType,
-} from 'types/api/dashboard/getAll';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import { initializeVariableFetchStore } from '../variableFetchStore';
 import {
@@ -67,42 +64,23 @@ export function buildDependencyData(
 }
 
 /**
- * Build a variable name → type mapping from sorted variables array
- */
-export function buildVariableTypesMap(
-	sortedVariablesArray: IDashboardVariable[],
-): Record<string, TVariableQueryType> {
-	const types: Record<string, TVariableQueryType> = {};
-	sortedVariablesArray.forEach((v) => {
-		if (v.name) {
-			types[v.name] = v.type;
-		}
-	});
-	return types;
-}
-
-/**
- * Build display-ordered list of dynamic variable names
- */
-export function buildDynamicVariableOrder(
-	sortedVariablesArray: IDashboardVariable[],
-): string[] {
-	return sortedVariablesArray
-		.filter((v) => v.type === 'DYNAMIC' && v.name)
-		.map((v) => v.name as string);
-}
-
-/**
- * Initialize the variable fetch store with variable names
+ * Initialize the variable fetch store with the computed dependency data
  */
 function initializeFetchStore(
 	sortedVariablesArray: IDashboardVariable[],
+	dependencyData: IDependencyData | null,
 ): void {
-	const allVariableNames = sortedVariablesArray
-		.map((v) => v.name)
-		.filter((name): name is string => !!name);
+	if (dependencyData) {
+		const allVariableNames = sortedVariablesArray
+			.map((v) => v.name)
+			.filter((name): name is string => !!name);
 
-	initializeVariableFetchStore(allVariableNames);
+		initializeVariableFetchStore(
+			allVariableNames,
+			dependencyData.graph,
+			dependencyData.parentDependencyGraph,
+		);
+	}
 }
 
 /**
@@ -114,25 +92,15 @@ export function computeDerivedValues(
 	variables: IDashboardVariablesStoreState['variables'],
 ): Pick<
 	IDashboardVariablesStoreState,
-	| 'sortedVariablesArray'
-	| 'dependencyData'
-	| 'variableTypes'
-	| 'dynamicVariableOrder'
+	'sortedVariablesArray' | 'dependencyData'
 > {
 	const sortedVariablesArray = buildSortedVariablesArray(variables);
 	const dependencyData = buildDependencyData(sortedVariablesArray);
-	const variableTypes = buildVariableTypesMap(sortedVariablesArray);
-	const dynamicVariableOrder = buildDynamicVariableOrder(sortedVariablesArray);
 
 	// Initialize the variable fetch store when dependency data is computed
-	initializeFetchStore(sortedVariablesArray);
+	initializeFetchStore(sortedVariablesArray, dependencyData);
 
-	return {
-		sortedVariablesArray,
-		dependencyData,
-		variableTypes,
-		dynamicVariableOrder,
-	};
+	return { sortedVariablesArray, dependencyData };
 }
 
 /**
@@ -144,11 +112,7 @@ export function updateDerivedValues(
 ): void {
 	draft.sortedVariablesArray = buildSortedVariablesArray(draft.variables);
 	draft.dependencyData = buildDependencyData(draft.sortedVariablesArray);
-	draft.variableTypes = buildVariableTypesMap(draft.sortedVariablesArray);
-	draft.dynamicVariableOrder = buildDynamicVariableOrder(
-		draft.sortedVariablesArray,
-	);
 
 	// Initialize the variable fetch store when dependency data is updated
-	initializeFetchStore(draft.sortedVariablesArray);
+	initializeFetchStore(draft.sortedVariablesArray, draft.dependencyData);
 }

frontend/src/providers/Dashboard/store/variableFetchStore.ts

@@ -1,7 +1,5 @@
 import { VariableGraph } from 'container/DashboardContainer/DashboardVariablesSelection/util';
-import { TVariableQueryType } from 'types/api/dashboard/getAll';
 
-import { IDashboardVariablesStoreState } from './dashboardVariables/dashboardVariablesStoreTypes';
 import createStore from './store';
 
 // Fetch state for each variable
@@ -16,266 +14,44 @@ export interface IVariableFetchStoreState {
 	// Per-variable fetch state
 	states: Record<string, VariableFetchState>;
 
-	// Track last update timestamp per variable
+	// Dependency graphs (set once when variables change)
+	dependencyGraph: VariableGraph; // variable -> children that depend on it
+	parentGraph: VariableGraph; // variable -> parents it depends on
+
+	// Track last update timestamp per variable to trigger re-fetches
 	lastUpdated: Record<string, number>;
-
-	// JSON-serialized selectedValue per variable — used to detect value changes
-	lastValues: Record<string, string>;
 }
 
-/**
- * Context from dashboardVariablesStore needed by fetch actions.
- * Passed as parameter to avoid circular imports.
- */
-export type VariableFetchContext = Pick<
-	IDashboardVariablesStoreState,
-	'variableTypes' | 'dynamicVariableOrder' | 'dependencyData'
->;
-
 const initialState: IVariableFetchStoreState = {
 	states: {},
+	dependencyGraph: {},
+	parentGraph: {},
 	lastUpdated: {},
-	lastValues: {},
 };
 
 export const variableFetchStore = createStore<IVariableFetchStoreState>(
 	initialState,
 );
 
-// ============== Helpers ==============
-
-/**
- * BFS to collect all transitive descendants of a node in the dependency graph.
- */
-function collectAllDescendants(node: string, graph: VariableGraph): string[] {
-	const descendants: string[] = [];
-	const visited = new Set<string>();
-	const queue = [...(graph[node] || [])];
-
-	while (queue.length > 0) {
-		const current = queue.shift();
-		if (!current || visited.has(current)) {
-			continue;
-		}
-		visited.add(current);
-		descendants.push(current);
-		(graph[current] || []).forEach((child) => {
-			if (!visited.has(child)) {
-				queue.push(child);
-			}
-		});
-	}
-
-	return descendants;
-}
-
-/**
- * Check if all query variables are settled (idle or error).
- */
-function areAllQueryVarsSettled(
-	states: Record<string, VariableFetchState>,
-	variableTypes: Record<string, TVariableQueryType>,
-): boolean {
-	return Object.entries(variableTypes)
-		.filter(([, type]) => type === 'QUERY')
-		.every(([name]) => states[name] === 'idle' || states[name] === 'error');
-}
-
-/**
- * Transition waiting dynamic variables to loading/revalidating.
- */
-function unlockDynamicVariables(
-	draft: IVariableFetchStoreState,
-	dynamicVariableOrder: string[],
-): void {
-	dynamicVariableOrder.forEach((dynName) => {
-		if (draft.states[dynName] === 'waiting') {
-			const hasData = (draft.lastUpdated[dynName] || 0) > 0;
-			draft.states[dynName] = hasData ? 'revalidating' : 'loading';
-		}
-	});
-}
-
 // ============== Actions ==============
 
 /**
- * Initialize the store with variable names.
- * Called when dashboard variables change — sets up state entries.
+ * Initialize the store with dependency graphs and set initial states
  */
-export function initializeVariableFetchStore(variableNames: string[]): void {
+export function initializeVariableFetchStore(
+	variableNames: string[],
+	dependencyGraph: VariableGraph,
+	parentGraph: VariableGraph,
+): void {
 	variableFetchStore.update((draft) => {
-		// Initialize all variables to idle, preserving existing states
+		draft.dependencyGraph = dependencyGraph;
+		draft.parentGraph = parentGraph;
+
+		// Initialize all variables to idle, preserving existing ready states
 		variableNames.forEach((name) => {
 			if (!draft.states[name]) {
 				draft.states[name] = 'idle';
 			}
-			if (!draft.lastValues[name]) {
-				draft.lastValues[name] = '';
-			}
-		});
-
-		// Clean up stale entries for variables that no longer exist
-		const nameSet = new Set(variableNames);
-		Object.keys(draft.states).forEach((name) => {
-			if (!nameSet.has(name)) {
-				delete draft.states[name];
-				delete draft.lastValues[name];
-				delete draft.lastUpdated[name];
-			}
 		});
 	});
 }
-
-/**
- * Mark a variable as completed. Unblocks waiting query-type children.
- * If all query variables are now settled, unlocks dynamic variables.
- */
-export function completeFetch(name: string, ctx: VariableFetchContext): void {
-	const { dependencyData, variableTypes, dynamicVariableOrder } = ctx;
-
-	variableFetchStore.update((draft) => {
-		draft.states[name] = 'idle';
-		draft.lastUpdated[name] = Date.now();
-
-		if (!dependencyData) {
-			return;
-		}
-
-		const { graph } = dependencyData;
-
-		// Unblock waiting query-type children
-		const children = graph[name] || [];
-		children.forEach((child) => {
-			if (variableTypes[child] === 'QUERY' && draft.states[child] === 'waiting') {
-				const hasData = (draft.lastUpdated[child] || 0) > 0;
-				draft.states[child] = hasData ? 'revalidating' : 'loading';
-			}
-		});
-
-		// If all query vars are settled, unlock dynamic variables
-		if (
-			variableTypes[name] === 'QUERY' &&
-			areAllQueryVarsSettled(draft.states, variableTypes)
-		) {
-			unlockDynamicVariables(draft, dynamicVariableOrder);
-		}
-	});
-}
-
-/**
- * Mark a variable as errored. Sets query-type descendants to idle
- * (they can't proceed without this parent).
- * If all query variables are now settled, unlocks dynamic variables.
- */
-export function failFetch(name: string, ctx: VariableFetchContext): void {
-	const { dependencyData, variableTypes, dynamicVariableOrder } = ctx;
-
-	variableFetchStore.update((draft) => {
-		draft.states[name] = 'error';
-
-		if (!dependencyData) {
-			return;
-		}
-
-		const { graph } = dependencyData;
-
-		// Set query-type descendants to idle (can't fetch without parent)
-		const descendants = collectAllDescendants(name, graph);
-		descendants.forEach((desc) => {
-			if (variableTypes[desc] === 'QUERY') {
-				draft.states[desc] = 'idle';
-			}
-		});
-
-		// If all query vars are settled (error counts), unlock dynamic vars
-		if (
-			variableTypes[name] === 'QUERY' &&
-			areAllQueryVarsSettled(draft.states, variableTypes)
-		) {
-			unlockDynamicVariables(draft, dynamicVariableOrder);
-		}
-	});
-}
-
-/**
- * Cascade a value change to query-type descendants.
- * Called when a user changes a variable's value (not from a fetch cycle).
- *
- * Direct children whose parents are all settled start immediately.
- * Deeper descendants wait until their parents complete (BFS order
- * ensures parents are set before children within a single update).
- */
-export function enqueueDescendants(
-	name: string,
-	ctx: VariableFetchContext,
-): void {
-	const { dependencyData, variableTypes } = ctx;
-	if (!dependencyData) {
-		return;
-	}
-
-	const { graph, parentDependencyGraph } = dependencyData;
-
-	variableFetchStore.update((draft) => {
-		const descendants = collectAllDescendants(name, graph);
-		descendants.forEach((desc) => {
-			if (variableTypes[desc] !== 'QUERY') {
-				return;
-			}
-
-			const parents = parentDependencyGraph[desc] || [];
-			const allParentsSettled = parents.every(
-				(p) => draft.states[p] === 'idle' || draft.states[p] === 'error',
-			);
-
-			if (allParentsSettled) {
-				const hasData = (draft.lastUpdated[desc] || 0) > 0;
-				draft.states[desc] = hasData ? 'revalidating' : 'loading';
-			} else {
-				draft.states[desc] = 'waiting';
-			}
-		});
-	});
-}
-
-/**
- * Start a full fetch cycle for all fetchable variables.
- * Called on: initial load, time range change, or dependency graph change.
- *
- * Query variables with no query-type parents start immediately.
- * Query variables with parents get 'waiting'.
- * Dynamic variables get 'waiting' — unblocked once all query vars complete.
- * If there are no query variables, dynamic vars start immediately.
- */
-export function enqueueFetchAll(ctx: VariableFetchContext): void {
-	const { dependencyData, variableTypes, dynamicVariableOrder } = ctx;
-	if (!dependencyData) {
-		return;
-	}
-
-	const { order, parentDependencyGraph } = dependencyData;
-
-	variableFetchStore.update((draft) => {
-		// Query variables: root ones start immediately, dependent ones wait
-		order.forEach((name) => {
-			const parents = parentDependencyGraph[name] || [];
-			const hasQueryParents = parents.some((p) => variableTypes[p] === 'QUERY');
-			if (hasQueryParents) {
-				draft.states[name] = 'waiting';
-			} else {
-				const hasData = (draft.lastUpdated[name] || 0) > 0;
-				draft.states[name] = hasData ? 'revalidating' : 'loading';
-			}
-		});
-
-		// Dynamic variables: always start as 'waiting'
-		dynamicVariableOrder.forEach((name) => {
-			draft.states[name] = 'waiting';
-		});
-
-		// If no query variables exist, unlock dynamic vars immediately
-		if (order.length === 0 && dynamicVariableOrder.length > 0) {
-			unlockDynamicVariables(draft, dynamicVariableOrder);
-		}
-	});
-}

frontend/src/providers/Dashboard/types.ts

@@ -47,6 +47,8 @@ export interface IDashboardContext {
 		allSelected: boolean,
 		isDynamic?: boolean,
 	) => void;
+	variablesToGetUpdated: string[];
+	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
 	dashboardQueryRangeCalled: boolean;
 	setDashboardQueryRangeCalled: (value: boolean) => void;
 	selectedRowWidgetId: string | null;

frontend/src/utils/docLinks.ts

@@ -6,6 +6,8 @@ const DOCLINKS = {
 		'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=traces-explorer-trace-tab#traces-view',
 	METRICS_EXPLORER_EMPTY_STATE:
 		'https://signoz.io/docs/userguide/send-metrics-cloud/',
+	EXTERNAL_API_MONITORING:
+		'https://signoz.io/docs/external-api-monitoring/overview/',
 };
 
 export default DOCLINKS;

frontend/src/utils/permission/index.ts

@@ -68,6 +68,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	ALERT_HISTORY: ['ADMIN', 'EDITOR', 'VIEWER'],
 	ALERT_OVERVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LOGIN: ['ADMIN', 'EDITOR', 'VIEWER'],
+	FORGOT_PASSWORD: ['ADMIN', 'EDITOR', 'VIEWER'],
 	NOT_FOUND: ['ADMIN', 'VIEWER', 'EDITOR'],
 	PASSWORD_RESET: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SERVICE_METRICS: ['ADMIN', 'EDITOR', 'VIEWER'],

frontend/yarn.lock

@@ -5038,7 +5038,7 @@
   resolved "https://registry.yarnpkg.com/@signozhq/design-tokens/-/design-tokens-2.1.1.tgz#9c36d433fd264410713cc0c5ebdd75ce0ebecba3"
   integrity sha512-SdziCHg5Lwj+6oY6IRUPplaKZ+kTHjbrlhNj//UoAJ8aQLnRdR2F/miPzfSi4vrYw88LtXxNA9J9iJyacCp37A==
 
-"@signozhq/icons@^0.1.0":
+"@signozhq/icons@0.1.0", "@signozhq/icons@^0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@signozhq/icons/-/icons-0.1.0.tgz#00dfb430dbac423bfff715876f91a7b8a72509e4"
   integrity sha512-kGWDhCpQkFWaNwyWfy88AIbg902wBbgTFTBAtmo6DkHyLGoqWAf0Jcq8BX+7brFqJF9PnLoSJDj1lvCpUsI/Ig==

pkg/querier/querier.go

@@ -208,7 +208,16 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 				event.GroupByApplied = len(spec.GroupBy) > 0
 
 				if spec.Source == telemetrytypes.SourceMeter {
-					spec.StepInterval = qbtypes.Step{Duration: time.Second * time.Duration(querybuilder.RecommendedStepIntervalForMeter(req.Start, req.End))}
+					if spec.StepInterval.Seconds() == 0 {
+						spec.StepInterval = qbtypes.Step{Duration: time.Second * time.Duration(querybuilder.RecommendedStepIntervalForMeter(req.Start, req.End))}
+					}
+
+					if spec.StepInterval.Seconds() < float64(querybuilder.MinAllowedStepIntervalForMeter(req.Start, req.End)) {
+						newStep := qbtypes.Step{
+							Duration: time.Second * time.Duration(querybuilder.MinAllowedStepIntervalForMeter(req.Start, req.End)),
+						}
+						spec.StepInterval = newStep
+					}
 				} else {
 					if spec.StepInterval.Seconds() == 0 {
 						spec.StepInterval = qbtypes.Step{
@@ -269,7 +278,7 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 	var metricTemporality map[string]metrictypes.Temporality
 	if len(metricNames) > 0 {
 		var err error
-		metricTemporality, err = q.metadataStore.FetchTemporalityMulti(ctx, metricNames...)
+		metricTemporality, err = q.metadataStore.FetchTemporalityMulti(ctx, req.Start, req.End, metricNames...)
 		if err != nil {
 			q.logger.WarnContext(ctx, "failed to fetch metric temporality", "error", err, "metrics", metricNames)
 			// Continue without temporality - statement builder will handle unspecified

pkg/query-service/app/clickhouseReader/reader.go

@@ -830,7 +830,7 @@ func (r *ClickHouseReader) GetUsage(ctx context.Context, queryParams *model.GetU
 
 func (r *ClickHouseReader) GetSpansForTrace(ctx context.Context, traceID string, traceDetailsQuery string) ([]model.SpanItemV2, *model.ApiError) {
 	var traceSummary model.TraceSummary
-	summaryQuery := fmt.Sprintf("SELECT * from %s.%s FINAL WHERE trace_id=$1", r.TraceDB, r.traceSummaryTable)
+	summaryQuery := fmt.Sprintf("SELECT trace_id, min(start) AS start, max(end) AS end, sum(num_spans) AS num_spans FROM %s.%s WHERE trace_id=$1 GROUP BY trace_id", r.TraceDB, r.traceSummaryTable)
 	err := r.db.QueryRow(ctx, summaryQuery, traceID).Scan(&traceSummary.TraceID, &traceSummary.Start, &traceSummary.End, &traceSummary.NumSpans)
 	if err != nil {
 		if err == sql.ErrNoRows {
@@ -6458,7 +6458,7 @@ func (r *ClickHouseReader) SearchTraces(ctx context.Context, params *model.Searc
 	}
 
 	var traceSummary model.TraceSummary
-	summaryQuery := fmt.Sprintf("SELECT * from %s.%s FINAL WHERE trace_id=$1", r.TraceDB, r.traceSummaryTable)
+	summaryQuery := fmt.Sprintf("SELECT trace_id, min(start) AS start, max(end) AS end, sum(num_spans) AS num_spans FROM %s.%s WHERE trace_id=$1 GROUP BY trace_id", r.TraceDB, r.traceSummaryTable)
 	err := r.db.QueryRow(ctx, summaryQuery, params.TraceID).Scan(&traceSummary.TraceID, &traceSummary.Start, &traceSummary.End, &traceSummary.NumSpans)
 	if err != nil {
 		if err == sql.ErrNoRows {

pkg/querybuilder/time.go

@@ -89,6 +89,23 @@ func RecommendedStepIntervalForMeter(start, end uint64) uint64 {
 	return recommended
 }
 
+func MinAllowedStepIntervalForMeter(start, end uint64) uint64 {
+	start = ToNanoSecs(start)
+	end = ToNanoSecs(end)
+
+	step := (end - start) / RecommendedNumberOfPoints / 1e9
+
+	// for meter queries the minimum step interval allowed is 1 hour as this is our granularity
+	if step < 3600 {
+		return 3600
+	}
+
+	// return the nearest lower multiple of 3600 ( 1 hour )
+	minAllowed := step - step%3600
+
+	return minAllowed
+}
+
 func RecommendedStepIntervalForMetric(start, end uint64) uint64 {
 	start = ToNanoSecs(start)
 	end = ToNanoSecs(end)

pkg/telemetrymetadata/metadata.go

@@ -1597,12 +1597,12 @@ func (t *telemetryMetaStore) GetAllValues(ctx context.Context, fieldValueSelecto
 	return values, complete, nil
 }
 
-func (t *telemetryMetaStore) FetchTemporality(ctx context.Context, metricName string) (metrictypes.Temporality, error) {
+func (t *telemetryMetaStore) FetchTemporality(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricName string) (metrictypes.Temporality, error) {
 	if metricName == "" {
 		return metrictypes.Unknown, errors.Newf(errors.TypeInternal, errors.CodeInternal, "metric name cannot be empty")
 	}
 
-	temporalityMap, err := t.FetchTemporalityMulti(ctx, metricName)
+	temporalityMap, err := t.FetchTemporalityMulti(ctx, queryTimeRangeStartTs, queryTimeRangeEndTs, metricName)
 	if err != nil {
 		return metrictypes.Unknown, err
 	}
@@ -1615,13 +1615,13 @@ func (t *telemetryMetaStore) FetchTemporality(ctx context.Context, metricName st
 	return temporality, nil
 }
 
-func (t *telemetryMetaStore) FetchTemporalityMulti(ctx context.Context, metricNames ...string) (map[string]metrictypes.Temporality, error) {
+func (t *telemetryMetaStore) FetchTemporalityMulti(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string]metrictypes.Temporality, error) {
 	if len(metricNames) == 0 {
 		return make(map[string]metrictypes.Temporality), nil
 	}
 
 	result := make(map[string]metrictypes.Temporality)
-	metricsTemporality, err := t.fetchMetricsTemporality(ctx, metricNames...)
+	metricsTemporality, err := t.fetchMetricsTemporality(ctx, queryTimeRangeStartTs, queryTimeRangeEndTs, metricNames...)
 	if err != nil {
 		return nil, err
 	}
@@ -1630,8 +1630,12 @@ func (t *telemetryMetaStore) FetchTemporalityMulti(ctx context.Context, metricNa
 
 	// For metrics not found in the database, set to Unknown
 	for _, metricName := range metricNames {
-		if temporality, exists := metricsTemporality[metricName]; exists {
-			result[metricName] = temporality
+		if temporality, exists := metricsTemporality[metricName]; exists && len(temporality) > 0 {
+			if len(temporality) > 1 {
+				result[metricName] = metrictypes.Multiple
+			} else {
+				result[metricName] = temporality[0]
+			}
 			continue
 		}
 		if temporality, exists := meterMetricsTemporality[metricName]; exists {
@@ -1644,8 +1648,10 @@ func (t *telemetryMetaStore) FetchTemporalityMulti(ctx context.Context, metricNa
 	return result, nil
 }
 
-func (t *telemetryMetaStore) fetchMetricsTemporality(ctx context.Context, metricNames ...string) (map[string]metrictypes.Temporality, error) {
-	result := make(map[string]metrictypes.Temporality)
+func (t *telemetryMetaStore) fetchMetricsTemporality(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string][]metrictypes.Temporality, error) {
+	result := make(map[string][]metrictypes.Temporality)
+
+	adjustedStartTs, adjustedEndTs, tsTableName, _ := telemetrymetrics.WhichTSTableToUse(queryTimeRangeStartTs, queryTimeRangeEndTs, nil)
 
 	// Build query to fetch temporality for all metrics
 	// We use attr_string_value where attr_name = '__temporality__'
@@ -1653,14 +1659,18 @@ func (t *telemetryMetaStore) fetchMetricsTemporality(ctx context.Context, metric
 	// and metric_name column contains temporality value, so we use the correct mapping
 	sb := sqlbuilder.Select(
 		"metric_name",
-		"argMax(temporality, last_reported_unix_milli) as temporality",
-	).From(t.metricsDBName + "." + t.metricsFieldsTblName)
+		"temporality",
+	).
+		From(t.metricsDBName + "." + tsTableName)
 
 	// Filter by metric names (in the temporality column due to data mix-up)
-	sb.Where(sb.In("metric_name", metricNames))
+	sb.Where(
+		sb.In("metric_name", metricNames),
+		sb.GTE("unix_milli", adjustedStartTs),
+		sb.LT("unix_milli", adjustedEndTs),
+	)
 
-	// Group by metric name to get one temporality per metric
-	sb.GroupBy("metric_name")
+	sb.GroupBy("metric_name", "temporality")
 
 	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 
@@ -1692,8 +1702,12 @@ func (t *telemetryMetaStore) fetchMetricsTemporality(ctx context.Context, metric
 			// Unknown or empty temporality
 			temporality = metrictypes.Unknown
 		}
-
-		result[metricName] = temporality
+		if temporality != metrictypes.Unknown {
+			result[metricName] = append(result[metricName], temporality)
+		}
+	}
+	if err := rows.Err(); err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "error iterating over metrics temporality rows")
 	}
 
 	return result, nil

pkg/telemetrymetrics/statement_builder.go

@@ -21,6 +21,10 @@ const (
 	RateWithoutNegative     = `If((per_series_value - lagInFrame(per_series_value, 1, 0) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1, 0) OVER rate_window) / (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window))`
 	IncreaseWithoutNegative = `If((per_series_value - lagInFrame(per_series_value, 1, 0) OVER rate_window) < 0, per_series_value, ((per_series_value - lagInFrame(per_series_value, 1, 0) OVER rate_window) / (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window)) * (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window))`
 
+	RateWithoutNegativeMultiTemporality     = `IF(LOWER(temporality) LIKE LOWER('delta'), %s, IF((%s - lagInFrame(%s, 1, 0) OVER rate_window) < 0, %s / (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window), (%s - lagInFrame(%s, 1, 0) OVER rate_window) / (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window))) AS per_series_value`
+	IncreaseWithoutNegativeMultiTemporality = `IF(LOWER(temporality) LIKE LOWER('delta'), %s, IF((%s - lagInFrame(%s, 1, 0) OVER rate_window) < 0, %s, ((%s - lagInFrame(%s, 1, 0) OVER rate_window) / (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window)) * (ts - lagInFrame(ts, 1, toDateTime(fromUnixTimestamp64Milli(%d))) OVER rate_window))) AS per_series_value`
+	OthersMultiTemporality                  = `IF(LOWER(temporality) LIKE LOWER('delta'), %s, %s) AS per_series_value`
+
 	RateWithInterpolation = `
 		CASE 
 			WHEN row_number() OVER rate_window = 1 THEN 
@@ -377,7 +381,7 @@ func (b *MetricQueryStatementBuilder) buildTimeSeriesCTE(
 		sb.LTE("unix_milli", end),
 	)
 
-	if query.Aggregations[0].Temporality != metrictypes.Unknown {
+	if query.Aggregations[0].Temporality != metrictypes.Multiple && query.Aggregations[0].Temporality != metrictypes.Unknown {
 		sb.Where(sb.ILike("temporality", query.Aggregations[0].Temporality.StringValue()))
 	}
 
@@ -407,8 +411,10 @@ func (b *MetricQueryStatementBuilder) buildTemporalAggregationCTE(
 ) (string, []any, error) {
 	if query.Aggregations[0].Temporality == metrictypes.Delta {
 		return b.buildTemporalAggDelta(ctx, start, end, query, timeSeriesCTE, timeSeriesCTEArgs)
+	} else if query.Aggregations[0].Temporality != metrictypes.Multiple {
+		return b.buildTemporalAggCumulativeOrUnspecified(ctx, start, end, query, timeSeriesCTE, timeSeriesCTEArgs)
 	}
-	return b.buildTemporalAggCumulativeOrUnspecified(ctx, start, end, query, timeSeriesCTE, timeSeriesCTEArgs)
+	return b.buildTemporalAggForMultipleTemporalities(ctx, start, end, query, timeSeriesCTE, timeSeriesCTEArgs)
 }
 
 func (b *MetricQueryStatementBuilder) buildTemporalAggDelta(
@@ -528,6 +534,58 @@ func (b *MetricQueryStatementBuilder) buildTemporalAggCumulativeOrUnspecified(
 	}
 }
 
+// because RateInterpolation is not enabled anywhere due to some gaps in the logic wrt cache handling, it hasn't been considered for the multi temporality
+func (b *MetricQueryStatementBuilder) buildTemporalAggForMultipleTemporalities(
+	_ context.Context,
+	start, end uint64,
+	query qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation],
+	timeSeriesCTE string,
+	timeSeriesCTEArgs []any,
+) (string, []any, error) {
+	stepSec := int64(query.StepInterval.Seconds())
+	sb := sqlbuilder.NewSelectBuilder()
+
+	sb.SelectMore(fmt.Sprintf(
+		"toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(%d)) AS ts",
+		stepSec,
+	))
+	for _, g := range query.GroupBy {
+		sb.SelectMore(fmt.Sprintf("`%s`", g.TelemetryFieldKey.Name))
+	}
+
+	aggForDeltaTemporality := AggregationColumnForSamplesTable(start, end, query.Aggregations[0].Type, metrictypes.Delta, query.Aggregations[0].TimeAggregation, query.Aggregations[0].TableHints)
+	aggForCumulativeTemporality := AggregationColumnForSamplesTable(start, end, query.Aggregations[0].Type, metrictypes.Cumulative, query.Aggregations[0].TimeAggregation, query.Aggregations[0].TableHints)
+	if query.Aggregations[0].TimeAggregation == metrictypes.TimeAggregationRate {
+		aggForDeltaTemporality = fmt.Sprintf("%s/%d", aggForDeltaTemporality, stepSec)
+	}
+
+	switch query.Aggregations[0].TimeAggregation {
+	case metrictypes.TimeAggregationRate:
+		rateExpr := fmt.Sprintf(RateWithoutNegativeMultiTemporality, aggForDeltaTemporality, aggForCumulativeTemporality, aggForCumulativeTemporality, aggForCumulativeTemporality, start, aggForCumulativeTemporality, aggForCumulativeTemporality, start)
+		sb.SelectMore(rateExpr)
+	case metrictypes.TimeAggregationIncrease:
+		increaseExpr := fmt.Sprintf(IncreaseWithoutNegativeMultiTemporality, aggForDeltaTemporality, aggForCumulativeTemporality, aggForCumulativeTemporality, aggForCumulativeTemporality, aggForCumulativeTemporality, aggForCumulativeTemporality, start, start)
+		sb.SelectMore(increaseExpr)
+	default:
+		expr := fmt.Sprintf(OthersMultiTemporality, aggForDeltaTemporality, aggForCumulativeTemporality)
+		sb.SelectMore(expr)
+	}
+
+	tbl := WhichSamplesTableToUse(start, end, query.Aggregations[0].Type, query.Aggregations[0].TimeAggregation, query.Aggregations[0].TableHints)
+	sb.From(fmt.Sprintf("%s.%s AS points", DBName, tbl))
+	sb.JoinWithOption(sqlbuilder.InnerJoin, timeSeriesCTE, "points.fingerprint = filtered_time_series.fingerprint")
+	sb.Where(
+		sb.In("metric_name", query.Aggregations[0].MetricName),
+		sb.GTE("unix_milli", start),
+		sb.LT("unix_milli", end),
+	)
+	sb.GroupBy("fingerprint", "ts", "temporality")
+	sb.GroupBy(querybuilder.GroupByKeys(query.GroupBy)...)
+	queryWithoutWindow, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse, timeSeriesCTEArgs...)
+	queryWithWindowAndOrder := queryWithoutWindow + " WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint ASC, ts ASC) ORDER BY ts"
+	return fmt.Sprintf("__temporal_aggregation_cte AS (%s)", queryWithWindowAndOrder), args, nil
+}
+
 func (b *MetricQueryStatementBuilder) buildSpatialAggregationCTE(
 	_ context.Context,
 	_ uint64,

pkg/types/integration.go

@@ -151,7 +151,8 @@ func (c *AccountConfig) Value() (driver.Value, error) {
 	if err != nil {
 		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't serialize cloud account config to JSON")
 	}
-	return serialized, nil
+	// Return as string instead of []byte to ensure PostgreSQL stores as text, not bytea
+	return string(serialized), nil
 }
 
 type AgentReport struct {
@@ -186,7 +187,8 @@ func (r *AgentReport) Value() (driver.Value, error) {
 			err, errors.CodeInternal, "couldn't serialize agent report to JSON",
 		)
 	}
-	return serialized, nil
+	// Return as string instead of []byte to ensure PostgreSQL stores as text, not bytea
+	return string(serialized), nil
 }
 
 type CloudIntegrationService struct {
@@ -240,5 +242,6 @@ func (c *CloudServiceConfig) Value() (driver.Value, error) {
 			err, errors.CodeInternal, "couldn't serialize cloud service config to JSON",
 		)
 	}
-	return serialized, nil
+	// Return as string instead of []byte to ensure PostgreSQL stores as text, not bytea
+	return string(serialized), nil
 }

pkg/types/metrictypes/metrictypes.go

@@ -19,6 +19,7 @@ var (
 	Cumulative  = Temporality{valuer.NewString("cumulative")}
 	Unspecified = Temporality{valuer.NewString("unspecified")}
 	Unknown     = Temporality{valuer.NewString("")}
+	Multiple    = Temporality{valuer.NewString("__multiple__")}
 )
 
 func (t Temporality) Value() (driver.Value, error) {

pkg/types/querybuildertypes/querybuildertypesv5/resp_test.go

@@ -130,7 +130,7 @@ func TestScalarData_MarshalJSON(t *testing.T) {
 					{4.0, 5.0, 6.0},
 				},
 			},
-			expected: `{"queryName":"test_query","columns":[{"name":"value","signal":"","fieldContext":"","fieldDataType":"","queryName":"test_query","aggregationIndex":0,"meta":{},"columnType":"aggregation"}],"data":[[1,2,3],[4,5,6]]}`,
+			expected: `{"queryName":"test_query","columns":[{"name":"value","queryName":"test_query","aggregationIndex":0,"meta":{},"columnType":"aggregation"}],"data":[[1,2,3],[4,5,6]]}`,
 		},
 		{
 			name: "scalar data with NaN",
@@ -149,7 +149,7 @@ func TestScalarData_MarshalJSON(t *testing.T) {
 					{math.Inf(1), 5.0, math.Inf(-1)},
 				},
 			},
-			expected: `{"queryName":"test_query","columns":[{"name":"value","signal":"","fieldContext":"","fieldDataType":"","queryName":"test_query","aggregationIndex":0,"meta":{},"columnType":"aggregation"}],"data":[[1,"NaN",3],["Inf",5,"-Inf"]]}`,
+			expected: `{"queryName":"test_query","columns":[{"name":"value","queryName":"test_query","aggregationIndex":0,"meta":{},"columnType":"aggregation"}],"data":[[1,"NaN",3],["Inf",5,"-Inf"]]}`,
 		},
 		{
 			name: "scalar data with mixed types",
@@ -168,7 +168,7 @@ func TestScalarData_MarshalJSON(t *testing.T) {
 					{nil, math.Inf(1), 3.14, false},
 				},
 			},
-			expected: `{"queryName":"test_query","columns":[{"name":"mixed","signal":"","fieldContext":"","fieldDataType":"","queryName":"test_query","aggregationIndex":0,"meta":{},"columnType":"aggregation"}],"data":[["string",42,"NaN",true],[null,"Inf",3.14,false]]}`,
+			expected: `{"queryName":"test_query","columns":[{"name":"mixed","queryName":"test_query","aggregationIndex":0,"meta":{},"columnType":"aggregation"}],"data":[["string",42,"NaN",true],[null,"Inf",3.14,false]]}`,
 		},
 		{
 			name: "scalar data with nested structures",
@@ -189,7 +189,7 @@ func TestScalarData_MarshalJSON(t *testing.T) {
 					},
 				},
 			},
-			expected: `{"queryName":"test_query","columns":[{"name":"nested","signal":"","fieldContext":"","fieldDataType":"","queryName":"test_query","aggregationIndex":0,"meta":{},"columnType":"aggregation"}],"data":[[{"count":10,"value":"NaN"},[1,"Inf",3]]]}`,
+			expected: `{"queryName":"test_query","columns":[{"name":"nested","queryName":"test_query","aggregationIndex":0,"meta":{},"columnType":"aggregation"}],"data":[[{"count":10,"value":"NaN"},[1,"Inf",3]]]}`,
 		},
 		{
 			name: "empty scalar data",

pkg/types/telemetrytypes/field.go

@@ -28,12 +28,12 @@ const (
 )
 
 type TelemetryFieldKey struct {
-	Name          string        `json:"name"`
+	Name          string        `json:"name" required:"true"`
 	Description   string        `json:"description,omitempty"`
 	Unit          string        `json:"unit,omitempty"`
-	Signal        Signal        `json:"signal,omitempty"`
-	FieldContext  FieldContext  `json:"fieldContext,omitempty"`
-	FieldDataType FieldDataType `json:"fieldDataType,omitempty"`
+	Signal        Signal        `json:"signal,omitzero"`
+	FieldContext  FieldContext  `json:"fieldContext,omitzero"`
+	FieldDataType FieldDataType `json:"fieldDataType,omitzero"`
 
 	JSONDataType *JSONDataType       `json:"-"`
 	JSONPlan     JSONAccessPlan      `json:"-"`
@@ -268,8 +268,8 @@ type FieldValueSelector struct {
 }
 
 type GettableFieldKeys struct {
-	Keys     map[string][]*TelemetryFieldKey `json:"keys"`
-	Complete bool                            `json:"complete"`
+	Keys     map[string][]*TelemetryFieldKey `json:"keys" required:"true"`
+	Complete bool                            `json:"complete" required:"true"`
 }
 
 type PostableFieldKeysParams struct {
@@ -285,8 +285,8 @@ type PostableFieldKeysParams struct {
 }
 
 type GettableFieldValues struct {
-	Values   *TelemetryFieldValues `json:"values"`
-	Complete bool                  `json:"complete"`
+	Values   *TelemetryFieldValues `json:"values" required:"true"`
+	Complete bool                  `json:"complete" required:"true"`
 }
 
 type PostableFieldValueParams struct {

pkg/types/telemetrytypes/store.go

@@ -27,10 +27,10 @@ type MetadataStore interface {
 	GetAllValues(ctx context.Context, fieldValueSelector *FieldValueSelector) (*TelemetryFieldValues, bool, error)
 
 	// FetchTemporality fetches the temporality for metric
-	FetchTemporality(ctx context.Context, metricName string) (metrictypes.Temporality, error)
+	FetchTemporality(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricName string) (metrictypes.Temporality, error)
 
 	// FetchTemporalityMulti fetches the temporality for multiple metrics
-	FetchTemporalityMulti(ctx context.Context, metricNames ...string) (map[string]metrictypes.Temporality, error)
+	FetchTemporalityMulti(ctx context.Context, queryTimeRangeStartTs, queryTimeRangeEndTs uint64, metricNames ...string) (map[string]metrictypes.Temporality, error)
 
 	// ListLogsJSONIndexes lists the JSON indexes for the logs table.
 	ListLogsJSONIndexes(ctx context.Context, filters ...string) (map[string][]schemamigrator.Index, error)