Merge branch 'main' into gateway-api-keys

* chore: add max-params eslint rule and update contribution guidelines

* chore: add no-cycle rule

docs/api/openapi.yml

@@ -2665,6 +2665,7 @@ paths:
       parameters:
       - in: query
         name: metricName
+        required: true
         schema:
           type: string
       responses:
@@ -2719,6 +2720,7 @@ paths:
       parameters:
       - in: query
         name: metricName
+        required: true
         schema:
           type: string
       responses:
@@ -2774,6 +2776,7 @@ paths:
       parameters:
       - in: query
         name: metricName
+        required: true
         schema:
           type: string
       responses:
@@ -2940,6 +2943,7 @@ paths:
       parameters:
       - in: query
         name: metricName
+        required: true
         schema:
           type: string
       responses:
@@ -3807,6 +3811,9 @@ components:
           type: string
         alertName:
           type: string
+      required:
+      - alertName
+      - alertId
       type: object
     MetricsexplorertypesMetricAlertsResponse:
       properties:
@@ -3815,6 +3822,8 @@ components:
             $ref: '#/components/schemas/MetricsexplorertypesMetricAlert'
           nullable: true
           type: array
+      required:
+      - alerts
       type: object
     MetricsexplorertypesMetricAttribute:
       properties:
@@ -3828,6 +3837,10 @@ components:
             type: string
           nullable: true
           type: array
+      required:
+      - key
+      - values
+      - valueCount
       type: object
     MetricsexplorertypesMetricAttributesRequest:
       properties:
@@ -3839,6 +3852,8 @@ components:
         start:
           nullable: true
           type: integer
+      required:
+      - metricName
       type: object
     MetricsexplorertypesMetricAttributesResponse:
       properties:
@@ -3850,6 +3865,9 @@ components:
         totalKeys:
           format: int64
           type: integer
+      required:
+      - attributes
+      - totalKeys
       type: object
     MetricsexplorertypesMetricDashboard:
       properties:
@@ -3861,6 +3879,11 @@ components:
           type: string
         widgetName:
           type: string
+      required:
+      - dashboardName
+      - dashboardId
+      - widgetId
+      - widgetName
       type: object
     MetricsexplorertypesMetricDashboardsResponse:
       properties:
@@ -3869,6 +3892,8 @@ components:
             $ref: '#/components/schemas/MetricsexplorertypesMetricDashboard'
           nullable: true
           type: array
+      required:
+      - dashboards
       type: object
     MetricsexplorertypesMetricHighlightsResponse:
       properties:
@@ -3884,6 +3909,11 @@ components:
         totalTimeSeries:
           minimum: 0
           type: integer
+      required:
+      - dataPoints
+      - lastReceived
+      - totalTimeSeries
+      - activeTimeSeries
       type: object
     MetricsexplorertypesMetricMetadata:
       properties:
@@ -3892,11 +3922,27 @@ components:
         isMonotonic:
           type: boolean
         temporality:
+          enum:
+          - delta
+          - cumulative
+          - unspecified
           type: string
         type:
+          enum:
+          - gauge
+          - sum
+          - histogram
+          - summary
+          - exponentialhistogram
           type: string
         unit:
           type: string
+      required:
+      - description
+      - type
+      - unit
+      - temporality
+      - isMonotonic
       type: object
     MetricsexplorertypesStat:
       properties:
@@ -3911,9 +3957,22 @@ components:
           minimum: 0
           type: integer
         type:
+          enum:
+          - gauge
+          - sum
+          - histogram
+          - summary
+          - exponentialhistogram
           type: string
         unit:
           type: string
+      required:
+      - metricName
+      - description
+      - type
+      - unit
+      - timeseries
+      - samples
       type: object
     MetricsexplorertypesStatsRequest:
       properties:
@@ -3931,6 +3990,10 @@ components:
         start:
           format: int64
           type: integer
+      required:
+      - start
+      - end
+      - limit
       type: object
     MetricsexplorertypesStatsResponse:
       properties:
@@ -3942,6 +4005,9 @@ components:
         total:
           minimum: 0
           type: integer
+      required:
+      - metrics
+      - total
       type: object
     MetricsexplorertypesTreemapEntry:
       properties:
@@ -3953,6 +4019,10 @@ components:
         totalValue:
           minimum: 0
           type: integer
+      required:
+      - metricName
+      - percentage
+      - totalValue
       type: object
     MetricsexplorertypesTreemapRequest:
       properties:
@@ -3964,10 +4034,18 @@ components:
         limit:
           type: integer
         mode:
+          enum:
+          - timeseries
+          - samples
           type: string
         start:
           format: int64
           type: integer
+      required:
+      - start
+      - end
+      - limit
+      - mode
       type: object
     MetricsexplorertypesTreemapResponse:
       properties:
@@ -3981,6 +4059,9 @@ components:
             $ref: '#/components/schemas/MetricsexplorertypesTreemapEntry'
           nullable: true
           type: array
+      required:
+      - timeseries
+      - samples
       type: object
     MetricsexplorertypesUpdateMetricMetadataRequest:
       properties:
@@ -3991,11 +4072,28 @@ components:
         metricName:
           type: string
         temporality:
+          enum:
+          - delta
+          - cumulative
+          - unspecified
           type: string
         type:
+          enum:
+          - gauge
+          - sum
+          - histogram
+          - summary
+          - exponentialhistogram
           type: string
         unit:
           type: string
+      required:
+      - metricName
+      - type
+      - description
+      - unit
+      - temporality
+      - isMonotonic
       type: object
     PreferencetypesPreference:
       properties:

frontend/.eslintrc.js

@@ -61,6 +61,8 @@ module.exports = {
 		curly: 'error', // Requires curly braces for all control statements
 		eqeqeq: ['error', 'always', { null: 'ignore' }], // Enforces === and !== (allows == null for null/undefined check)
 		'no-console': ['error', { allow: ['warn', 'error'] }], // Warns on console.log, allows console.warn/error
+		// TODO: Change this to error in May 2026
+		'max-params': ['warn', 3], // a function can have max 3 params after which it should become an object
 
 		// TypeScript rules
 		'@typescript-eslint/explicit-function-return-type': 'error', // Requires explicit return types on functions
@@ -116,7 +118,7 @@ module.exports = {
 			},
 		],
 		'import/no-extraneous-dependencies': ['error', { devDependencies: true }], // Prevents importing packages not in package.json
-		// 'import/no-cycle': 'warn', // TODO: Enable later to detect circular dependencies
+		'import/no-cycle': 'warn', // Warns about circular dependencies
 
 		// Import sorting rules
 		'simple-import-sort/imports': [
@@ -146,6 +148,19 @@ module.exports = {
 		'sonarjs/no-duplicate-string': 'off', // Disabled - can be noisy (enable periodically to check)
 	},
 	overrides: [
+		{
+			files: [
+				'**/*.test.{js,jsx,ts,tsx}',
+				'**/*.spec.{js,jsx,ts,tsx}',
+				'**/__tests__/**/*.{js,jsx,ts,tsx}',
+			],
+			rules: {
+				// Tests often have intentional duplication and complexity - disable SonarJS rules
+				'sonarjs/cognitive-complexity': 'off', // Tests can be complex
+				'sonarjs/no-identical-functions': 'off', // Similar test patterns are OK
+				'sonarjs/no-small-switch': 'off', // Small switches are OK in tests
+			},
+		},
 		{
 			files: ['src/api/generated/**/*.ts'],
 			rules: {
@@ -153,7 +168,6 @@ module.exports = {
 				'@typescript-eslint/explicit-module-boundary-types': 'off',
 				'no-nested-ternary': 'off',
 				'@typescript-eslint/no-unused-vars': 'warn',
-				'sonarjs/no-duplicate-string': 'off',
 			},
 		},
 	],

frontend/CONTRIBUTIONS.md

@@ -2,6 +2,11 @@
 
 Embrace the spirit of collaboration and contribute to the success of our open-source project by adhering to these frontend development guidelines with precision and passion.
 
+### Export Style
+
+- **React components** (`src/components/`, `src/container/`, `src/pages/`): Prefer **default exports** for the main component in each file
+- **Utilities, hooks, APIs, types, constants** (`src/utils/`, `src/hooks/`, `src/api/`, `src/lib/`, `src/types/`, `src/constants/`): Prefer **named exports** for better tree-shaking and explicit imports
+
 ### React and Components
 
 - Strive to create small and modular components, ensuring they are divided into individual pieces for improved maintainability and reusability.

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

@@ -28,8 +28,10 @@ import type {
 	GatewaytypesPostableIngestionKeyLimitDTO,
 	GatewaytypesUpdatableIngestionKeyLimitDTO,
 	GetIngestionKeys200,
+	GetIngestionKeysParams,
 	RenderErrorResponseDTO,
 	SearchIngestionKeys200,
+	SearchIngestionKeysParams,
 	UpdateIngestionKeyLimitPathParameters,
 	UpdateIngestionKeyPathParameters,
 } from '../sigNoz.schemas';
@@ -42,35 +44,44 @@ type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
  * This endpoint returns the ingestion keys for a workspace
  * @summary Get ingestion keys for workspace
  */
-export const getIngestionKeys = (signal?: AbortSignal) => {
+export const getIngestionKeys = (
+	params?: GetIngestionKeysParams,
+	signal?: AbortSignal,
+) => {
 	return GeneratedAPIInstance<GetIngestionKeys200>({
 		url: `/api/v2/gateway/ingestion_keys`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getGetIngestionKeysQueryKey = () => {
-	return ['getIngestionKeys'] as const;
+export const getGetIngestionKeysQueryKey = (
+	params?: GetIngestionKeysParams,
+) => {
+	return ['getIngestionKeys', ...(params ? [params] : [])] as const;
 };
 
 export const getGetIngestionKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof getIngestionKeys>>,
 	TError = RenderErrorResponseDTO
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getIngestionKeys>>,
-		TError,
-		TData
-	>;
-}) => {
+>(
+	params?: GetIngestionKeysParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionKeys>>,
+			TError,
+			TData
+		>;
+	},
+) => {
 	const { query: queryOptions } = options ?? {};
 
-	const queryKey = queryOptions?.queryKey ?? getGetIngestionKeysQueryKey();
+	const queryKey = queryOptions?.queryKey ?? getGetIngestionKeysQueryKey(params);
 
 	const queryFn: QueryFunction<Awaited<ReturnType<typeof getIngestionKeys>>> = ({
 		signal,
-	}) => getIngestionKeys(signal);
+	}) => getIngestionKeys(params, signal);
 
 	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getIngestionKeys>>,
@@ -91,14 +102,17 @@ export type GetIngestionKeysQueryError = RenderErrorResponseDTO;
 export function useGetIngestionKeys<
 	TData = Awaited<ReturnType<typeof getIngestionKeys>>,
 	TError = RenderErrorResponseDTO
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getIngestionKeys>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetIngestionKeysQueryOptions(options);
+>(
+	params?: GetIngestionKeysParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionKeys>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetIngestionKeysQueryOptions(params, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -114,10 +128,11 @@ export function useGetIngestionKeys<
  */
 export const invalidateGetIngestionKeys = async (
 	queryClient: QueryClient,
+	params?: GetIngestionKeysParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetIngestionKeysQueryKey() },
+		{ queryKey: getGetIngestionKeysQueryKey(params) },
 		options,
 	);
 
@@ -662,35 +677,45 @@ export const useUpdateIngestionKeyLimit = <
  * This endpoint returns the ingestion keys for a workspace
  * @summary Search ingestion keys for workspace
  */
-export const searchIngestionKeys = (signal?: AbortSignal) => {
+export const searchIngestionKeys = (
+	params?: SearchIngestionKeysParams,
+	signal?: AbortSignal,
+) => {
 	return GeneratedAPIInstance<SearchIngestionKeys200>({
 		url: `/api/v2/gateway/ingestion_keys/search`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getSearchIngestionKeysQueryKey = () => {
-	return ['searchIngestionKeys'] as const;
+export const getSearchIngestionKeysQueryKey = (
+	params?: SearchIngestionKeysParams,
+) => {
+	return ['searchIngestionKeys', ...(params ? [params] : [])] as const;
 };
 
 export const getSearchIngestionKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof searchIngestionKeys>>,
 	TError = RenderErrorResponseDTO
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof searchIngestionKeys>>,
-		TError,
-		TData
-	>;
-}) => {
+>(
+	params?: SearchIngestionKeysParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof searchIngestionKeys>>,
+			TError,
+			TData
+		>;
+	},
+) => {
 	const { query: queryOptions } = options ?? {};
 
-	const queryKey = queryOptions?.queryKey ?? getSearchIngestionKeysQueryKey();
+	const queryKey =
+		queryOptions?.queryKey ?? getSearchIngestionKeysQueryKey(params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof searchIngestionKeys>>
-	> = ({ signal }) => searchIngestionKeys(signal);
+	> = ({ signal }) => searchIngestionKeys(params, signal);
 
 	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof searchIngestionKeys>>,
@@ -711,14 +736,17 @@ export type SearchIngestionKeysQueryError = RenderErrorResponseDTO;
 export function useSearchIngestionKeys<
 	TData = Awaited<ReturnType<typeof searchIngestionKeys>>,
 	TError = RenderErrorResponseDTO
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof searchIngestionKeys>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getSearchIngestionKeysQueryOptions(options);
+>(
+	params?: SearchIngestionKeysParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof searchIngestionKeys>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getSearchIngestionKeysQueryOptions(params, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -734,10 +762,11 @@ export function useSearchIngestionKeys<
  */
 export const invalidateSearchIngestionKeys = async (
 	queryClient: QueryClient,
+	params?: SearchIngestionKeysParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getSearchIngestionKeysQueryKey() },
+		{ queryKey: getSearchIngestionKeysQueryKey(params) },
 		options,
 	);
 

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

@@ -47,7 +47,7 @@ type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
  * @summary Get metric alerts
  */
 export const getMetricAlerts = (
-	params?: GetMetricAlertsParams,
+	params: GetMetricAlertsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricAlerts200>({
@@ -66,7 +66,7 @@ export const getGetMetricAlertsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
 	TError = RenderErrorResponseDTO
 >(
-	params?: GetMetricAlertsParams,
+	params: GetMetricAlertsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAlerts>>,
@@ -103,7 +103,7 @@ export function useGetMetricAlerts<
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
 	TError = RenderErrorResponseDTO
 >(
-	params?: GetMetricAlertsParams,
+	params: GetMetricAlertsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAlerts>>,
@@ -128,7 +128,7 @@ export function useGetMetricAlerts<
  */
 export const invalidateGetMetricAlerts = async (
 	queryClient: QueryClient,
-	params?: GetMetricAlertsParams,
+	params: GetMetricAlertsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
@@ -144,7 +144,7 @@ export const invalidateGetMetricAlerts = async (
  * @summary Get metric dashboards
  */
 export const getMetricDashboards = (
-	params?: GetMetricDashboardsParams,
+	params: GetMetricDashboardsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricDashboards200>({
@@ -165,7 +165,7 @@ export const getGetMetricDashboardsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
 	TError = RenderErrorResponseDTO
 >(
-	params?: GetMetricDashboardsParams,
+	params: GetMetricDashboardsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricDashboards>>,
@@ -203,7 +203,7 @@ export function useGetMetricDashboards<
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
 	TError = RenderErrorResponseDTO
 >(
-	params?: GetMetricDashboardsParams,
+	params: GetMetricDashboardsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricDashboards>>,
@@ -228,7 +228,7 @@ export function useGetMetricDashboards<
  */
 export const invalidateGetMetricDashboards = async (
 	queryClient: QueryClient,
-	params?: GetMetricDashboardsParams,
+	params: GetMetricDashboardsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
@@ -244,7 +244,7 @@ export const invalidateGetMetricDashboards = async (
  * @summary Get metric highlights
  */
 export const getMetricHighlights = (
-	params?: GetMetricHighlightsParams,
+	params: GetMetricHighlightsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricHighlights200>({
@@ -265,7 +265,7 @@ export const getGetMetricHighlightsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
 	TError = RenderErrorResponseDTO
 >(
-	params?: GetMetricHighlightsParams,
+	params: GetMetricHighlightsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricHighlights>>,
@@ -303,7 +303,7 @@ export function useGetMetricHighlights<
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
 	TError = RenderErrorResponseDTO
 >(
-	params?: GetMetricHighlightsParams,
+	params: GetMetricHighlightsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricHighlights>>,
@@ -328,7 +328,7 @@ export function useGetMetricHighlights<
  */
 export const invalidateGetMetricHighlights = async (
 	queryClient: QueryClient,
-	params?: GetMetricHighlightsParams,
+	params: GetMetricHighlightsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
@@ -526,7 +526,7 @@ export const useGetMetricAttributes = <
  * @summary Get metric metadata
  */
 export const getMetricMetadata = (
-	params?: GetMetricMetadataParams,
+	params: GetMetricMetadataParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricMetadata200>({
@@ -547,7 +547,7 @@ export const getGetMetricMetadataQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
 	TError = RenderErrorResponseDTO
 >(
-	params?: GetMetricMetadataParams,
+	params: GetMetricMetadataParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricMetadata>>,
@@ -585,7 +585,7 @@ export function useGetMetricMetadata<
 	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
 	TError = RenderErrorResponseDTO
 >(
-	params?: GetMetricMetadataParams,
+	params: GetMetricMetadataParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricMetadata>>,
@@ -610,7 +610,7 @@ export function useGetMetricMetadata<
  */
 export const invalidateGetMetricMetadata = async (
 	queryClient: QueryClient,
-	params?: GetMetricMetadataParams,
+	params: GetMetricMetadataParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(

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

@@ -650,11 +650,11 @@ export interface MetricsexplorertypesMetricAlertDTO {
 	/**
 	 * @type string
 	 */
-	alertId?: string;
+	alertId: string;
 	/**
 	 * @type string
 	 */
-	alertName?: string;
+	alertName: string;
 }
 
 export interface MetricsexplorertypesMetricAlertsResponseDTO {
@@ -662,24 +662,24 @@ export interface MetricsexplorertypesMetricAlertsResponseDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	alerts?: MetricsexplorertypesMetricAlertDTO[] | null;
+	alerts: MetricsexplorertypesMetricAlertDTO[] | null;
 }
 
 export interface MetricsexplorertypesMetricAttributeDTO {
 	/**
 	 * @type string
 	 */
-	key?: string;
+	key: string;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	valueCount?: number;
+	valueCount: number;
 	/**
 	 * @type array
 	 * @nullable true
 	 */
-	values?: string[] | null;
+	values: string[] | null;
 }
 
 export interface MetricsexplorertypesMetricAttributesRequestDTO {
@@ -691,7 +691,7 @@ export interface MetricsexplorertypesMetricAttributesRequestDTO {
 	/**
 	 * @type string
 	 */
-	metricName?: string;
+	metricName: string;
 	/**
 	 * @type integer
 	 * @nullable true
@@ -704,31 +704,31 @@ export interface MetricsexplorertypesMetricAttributesResponseDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	attributes?: MetricsexplorertypesMetricAttributeDTO[] | null;
+	attributes: MetricsexplorertypesMetricAttributeDTO[] | null;
 	/**
 	 * @type integer
 	 * @format int64
 	 */
-	totalKeys?: number;
+	totalKeys: number;
 }
 
 export interface MetricsexplorertypesMetricDashboardDTO {
 	/**
 	 * @type string
 	 */
-	dashboardId?: string;
+	dashboardId: string;
 	/**
 	 * @type string
 	 */
-	dashboardName?: string;
+	dashboardName: string;
 	/**
 	 * @type string
 	 */
-	widgetId?: string;
+	widgetId: string;
 	/**
 	 * @type string
 	 */
-	widgetName?: string;
+	widgetName: string;
 }
 
 export interface MetricsexplorertypesMetricDashboardsResponseDTO {
@@ -736,7 +736,7 @@ export interface MetricsexplorertypesMetricDashboardsResponseDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	dashboards?: MetricsexplorertypesMetricDashboardDTO[] | null;
+	dashboards: MetricsexplorertypesMetricDashboardDTO[] | null;
 }
 
 export interface MetricsexplorertypesMetricHighlightsResponseDTO {
@@ -744,74 +744,96 @@ export interface MetricsexplorertypesMetricHighlightsResponseDTO {
 	 * @type integer
 	 * @minimum 0
 	 */
-	activeTimeSeries?: number;
+	activeTimeSeries: number;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	dataPoints?: number;
+	dataPoints: number;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	lastReceived?: number;
+	lastReceived: number;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	totalTimeSeries?: number;
+	totalTimeSeries: number;
 }
 
+export enum MetricsexplorertypesMetricMetadataDTOTemporality {
+	delta = 'delta',
+	cumulative = 'cumulative',
+	unspecified = 'unspecified',
+}
+export enum MetricsexplorertypesMetricMetadataDTOType {
+	gauge = 'gauge',
+	sum = 'sum',
+	histogram = 'histogram',
+	summary = 'summary',
+	exponentialhistogram = 'exponentialhistogram',
+}
 export interface MetricsexplorertypesMetricMetadataDTO {
 	/**
 	 * @type string
 	 */
-	description?: string;
+	description: string;
 	/**
 	 * @type boolean
 	 */
-	isMonotonic?: boolean;
+	isMonotonic: boolean;
+	/**
+	 * @enum delta,cumulative,unspecified
+	 * @type string
+	 */
+	temporality: MetricsexplorertypesMetricMetadataDTOTemporality;
+	/**
+	 * @enum gauge,sum,histogram,summary,exponentialhistogram
+	 * @type string
+	 */
+	type: MetricsexplorertypesMetricMetadataDTOType;
 	/**
 	 * @type string
 	 */
-	temporality?: string;
-	/**
-	 * @type string
-	 */
-	type?: string;
-	/**
-	 * @type string
-	 */
-	unit?: string;
+	unit: string;
 }
 
+export enum MetricsexplorertypesStatDTOType {
+	gauge = 'gauge',
+	sum = 'sum',
+	histogram = 'histogram',
+	summary = 'summary',
+	exponentialhistogram = 'exponentialhistogram',
+}
 export interface MetricsexplorertypesStatDTO {
 	/**
 	 * @type string
 	 */
-	description?: string;
+	description: string;
 	/**
 	 * @type string
 	 */
-	metricName?: string;
+	metricName: string;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	samples?: number;
+	samples: number;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	timeseries?: number;
+	timeseries: number;
+	/**
+	 * @enum gauge,sum,histogram,summary,exponentialhistogram
+	 * @type string
+	 */
+	type: MetricsexplorertypesStatDTOType;
 	/**
 	 * @type string
 	 */
-	type?: string;
-	/**
-	 * @type string
-	 */
-	unit?: string;
+	unit: string;
 }
 
 export interface MetricsexplorertypesStatsRequestDTO {
@@ -819,12 +841,12 @@ export interface MetricsexplorertypesStatsRequestDTO {
 	 * @type integer
 	 * @format int64
 	 */
-	end?: number;
+	end: number;
 	filter?: Querybuildertypesv5FilterDTO;
 	/**
 	 * @type integer
 	 */
-	limit?: number;
+	limit: number;
 	/**
 	 * @type integer
 	 */
@@ -834,7 +856,7 @@ export interface MetricsexplorertypesStatsRequestDTO {
 	 * @type integer
 	 * @format int64
 	 */
-	start?: number;
+	start: number;
 }
 
 export interface MetricsexplorertypesStatsResponseDTO {
@@ -842,51 +864,56 @@ export interface MetricsexplorertypesStatsResponseDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	metrics?: MetricsexplorertypesStatDTO[] | null;
+	metrics: MetricsexplorertypesStatDTO[] | null;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	total?: number;
+	total: number;
 }
 
 export interface MetricsexplorertypesTreemapEntryDTO {
 	/**
 	 * @type string
 	 */
-	metricName?: string;
+	metricName: string;
 	/**
 	 * @type number
 	 * @format double
 	 */
-	percentage?: number;
+	percentage: number;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	totalValue?: number;
+	totalValue: number;
 }
 
+export enum MetricsexplorertypesTreemapRequestDTOMode {
+	timeseries = 'timeseries',
+	samples = 'samples',
+}
 export interface MetricsexplorertypesTreemapRequestDTO {
 	/**
 	 * @type integer
 	 * @format int64
 	 */
-	end?: number;
+	end: number;
 	filter?: Querybuildertypesv5FilterDTO;
 	/**
 	 * @type integer
 	 */
-	limit?: number;
+	limit: number;
 	/**
+	 * @enum timeseries,samples
 	 * @type string
 	 */
-	mode?: string;
+	mode: MetricsexplorertypesTreemapRequestDTOMode;
 	/**
 	 * @type integer
 	 * @format int64
 	 */
-	start?: number;
+	start: number;
 }
 
 export interface MetricsexplorertypesTreemapResponseDTO {
@@ -894,39 +921,53 @@ export interface MetricsexplorertypesTreemapResponseDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	samples?: MetricsexplorertypesTreemapEntryDTO[] | null;
+	samples: MetricsexplorertypesTreemapEntryDTO[] | null;
 	/**
 	 * @type array
 	 * @nullable true
 	 */
-	timeseries?: MetricsexplorertypesTreemapEntryDTO[] | null;
+	timeseries: MetricsexplorertypesTreemapEntryDTO[] | null;
 }
 
+export enum MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality {
+	delta = 'delta',
+	cumulative = 'cumulative',
+	unspecified = 'unspecified',
+}
+export enum MetricsexplorertypesUpdateMetricMetadataRequestDTOType {
+	gauge = 'gauge',
+	sum = 'sum',
+	histogram = 'histogram',
+	summary = 'summary',
+	exponentialhistogram = 'exponentialhistogram',
+}
 export interface MetricsexplorertypesUpdateMetricMetadataRequestDTO {
 	/**
 	 * @type string
 	 */
-	description?: string;
+	description: string;
 	/**
 	 * @type boolean
 	 */
-	isMonotonic?: boolean;
+	isMonotonic: boolean;
 	/**
 	 * @type string
 	 */
-	metricName?: string;
+	metricName: string;
+	/**
+	 * @enum delta,cumulative,unspecified
+	 * @type string
+	 */
+	temporality: MetricsexplorertypesUpdateMetricMetadataRequestDTOTemporality;
+	/**
+	 * @enum gauge,sum,histogram,summary,exponentialhistogram
+	 * @type string
+	 */
+	type: MetricsexplorertypesUpdateMetricMetadataRequestDTOType;
 	/**
 	 * @type string
 	 */
-	temporality?: string;
-	/**
-	 * @type string
-	 */
-	type?: string;
-	/**
-	 * @type string
-	 */
-	unit?: string;
+	unit: string;
 }
 
 export interface PreferencetypesPreferenceDTO {
@@ -1851,6 +1892,19 @@ export type GetFeatures200 = {
 	status?: string;
 };
 
+export type GetIngestionKeysParams = {
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	page?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	per_page?: number;
+};
+
 export type GetIngestionKeys200 = {
 	data?: GatewaytypesGettableIngestionKeysDTO;
 	/**
@@ -1890,6 +1944,24 @@ export type DeleteIngestionKeyLimitPathParameters = {
 export type UpdateIngestionKeyLimitPathParameters = {
 	limitId: string;
 };
+export type SearchIngestionKeysParams = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	name?: string;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	page?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	per_page?: number;
+};
+
 export type SearchIngestionKeys200 = {
 	data?: GatewaytypesGettableIngestionKeysDTO;
 	/**
@@ -1903,7 +1975,7 @@ export type GetMetricAlertsParams = {
 	 * @type string
 	 * @description undefined
 	 */
-	metricName?: string;
+	metricName: string;
 };
 
 export type GetMetricAlerts200 = {
@@ -1919,7 +1991,7 @@ export type GetMetricDashboardsParams = {
 	 * @type string
 	 * @description undefined
 	 */
-	metricName?: string;
+	metricName: string;
 };
 
 export type GetMetricDashboards200 = {
@@ -1935,7 +2007,7 @@ export type GetMetricHighlightsParams = {
 	 * @type string
 	 * @description undefined
 	 */
-	metricName?: string;
+	metricName: string;
 };
 
 export type GetMetricHighlights200 = {
@@ -1962,7 +2034,7 @@ export type GetMetricMetadataParams = {
 	 * @type string
 	 * @description undefined
 	 */
-	metricName?: string;
+	metricName: string;
 };
 
 export type GetMetricMetadata200 = {

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx

@@ -22,7 +22,7 @@ import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useNotifications } from 'hooks/useNotifications';
 import { PenLine, Trash2 } from 'lucide-react';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import { TVariableMode } from './types';

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

@@ -1,8 +1,11 @@
-import { memo, useEffect, useState } from 'react';
+import { memo, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { Row } from 'antd';
 import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
-import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
+import {
+	useDashboardVariables,
+	useDashboardVariablesSelector,
+} from 'hooks/dashboard/useDashboardVariables';
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { isEmpty } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
@@ -12,13 +15,7 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import DynamicVariableSelection from './DynamicVariableSelection';
-import {
-	buildDependencies,
-	buildDependencyGraph,
-	buildParentDependencyGraph,
-	IDependencyData,
-	onUpdateVariableNode,
-} from './util';
+import { onUpdateVariableNode } from './util';
 import VariableItem from './VariableItem';
 
 import './DashboardVariableSelection.styles.scss';
@@ -35,11 +32,11 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
 
 	const { dashboardVariables } = useDashboardVariables();
-
-	const [variablesTableData, setVariablesTableData] = useState<any>([]);
-
-	const [dependencyData, setDependencyData] = useState<IDependencyData | null>(
-		null,
+	const sortedVariablesArray = useDashboardVariablesSelector(
+		(state) => state.sortedVariablesArray,
+	);
+	const dependencyData = useDashboardVariablesSelector(
+		(state) => state.dependencyData,
 	);
 
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
@@ -47,24 +44,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 	);
 
 	useEffect(() => {
-		const tableRowData = [];
-
-		// eslint-disable-next-line no-restricted-syntax
-		for (const [key, value] of Object.entries(dashboardVariables)) {
-			const { id } = value;
-
-			tableRowData.push({
-				key,
-				name: key,
-				...dashboardVariables[key],
-				id,
-			});
-		}
-
-		tableRowData.sort((a, b) => a.order - b.order);
-
-		setVariablesTableData(tableRowData);
-
 		// Initialize variables with default values if not in URL
 		initializeDefaultVariables(
 			dashboardVariables,
@@ -73,30 +52,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 		);
 	}, [getUrlVariables, updateUrlVariable, dashboardVariables]);
 
-	useEffect(() => {
-		if (variablesTableData.length > 0) {
-			const depGrp = buildDependencies(variablesTableData);
-			const { order, graph, hasCycle, cycleNodes } = buildDependencyGraph(depGrp);
-			const parentDependencyGraph = buildParentDependencyGraph(graph);
-
-			// cleanup order to only include variables that are of type 'QUERY'
-			const cleanedOrder = order.filter((variable) => {
-				const variableData = variablesTableData.find(
-					(v: IDashboardVariable) => v.name === variable,
-				);
-				return variableData?.type === 'QUERY';
-			});
-
-			setDependencyData({
-				order: cleanedOrder,
-				graph,
-				parentDependencyGraph,
-				hasCycle,
-				cycleNodes,
-			});
-		}
-	}, [dashboardVariables, variablesTableData]);
-
 	// this handles the case where the dependency order changes i.e. variable list updated via creation or deletion etc. and we need to refetch the variables
 	// also trigger when the global time changes
 	useEffect(
@@ -186,45 +141,30 @@ function DashboardVariableSelection(): JSX.Element | null {
 		}
 	};
 
-	if (!dashboardVariables) {
-		return null;
-	}
-
-	const orderBasedSortedVariables = variablesTableData.sort(
-		(a: { order: number }, b: { order: number }) => a.order - b.order,
-	);
-
 	return (
 		<Row style={{ display: 'flex', gap: '12px' }}>
-			{orderBasedSortedVariables &&
-				Array.isArray(orderBasedSortedVariables) &&
-				orderBasedSortedVariables.length > 0 &&
-				orderBasedSortedVariables.map((variable) =>
-					variable.type === 'DYNAMIC' ? (
-						<DynamicVariableSelection
-							key={`${variable.name}${variable.id}${variable.order}`}
-							existingVariables={dashboardVariables}
-							variableData={{
-								name: variable.name,
-								...variable,
-							}}
-							onValueUpdate={onValueUpdate}
-						/>
-					) : (
-						<VariableItem
-							key={`${variable.name}${variable.id}}${variable.order}`}
-							existingVariables={dashboardVariables}
-							variableData={{
-								name: variable.name,
-								...variable,
-							}}
-							onValueUpdate={onValueUpdate}
-							variablesToGetUpdated={variablesToGetUpdated}
-							setVariablesToGetUpdated={setVariablesToGetUpdated}
-							dependencyData={dependencyData}
-						/>
-					),
-				)}
+			{sortedVariablesArray.map((variable) => {
+				const key = `${variable.name}${variable.id}${variable.order}`;
+
+				return variable.type === 'DYNAMIC' ? (
+					<DynamicVariableSelection
+						key={key}
+						existingVariables={dashboardVariables}
+						variableData={variable}
+						onValueUpdate={onValueUpdate}
+					/>
+				) : (
+					<VariableItem
+						key={key}
+						existingVariables={dashboardVariables}
+						variableData={variable}
+						onValueUpdate={onValueUpdate}
+						variablesToGetUpdated={variablesToGetUpdated}
+						setVariablesToGetUpdated={setVariablesToGetUpdated}
+						dependencyData={dependencyData}
+					/>
+				);
+			})}
 		</Row>
 	);
 }

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

@@ -16,6 +16,7 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
 import { debounce, isArray, isEmpty, isString } from 'lodash-es';
+import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
@@ -24,7 +25,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 
 import { ALL_SELECT_VALUE, variablePropsToPayloadVariables } from '../utils';
 import { SelectItemStyle } from './styles';
-import { areArraysEqual, checkAPIInvocation, IDependencyData } from './util';
+import { areArraysEqual, checkAPIInvocation } from './util';
 
 import './DashboardVariableSelection.styles.scss';
 

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

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { v4 as uuidv4 } from 'uuid';
 

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

@@ -1,6 +1,9 @@
 import { OptionData } from 'components/NewSelect/types';
 import { isEmpty, isNull } from 'lodash-es';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
+import {
+	IDashboardVariables,
+	IDependencyData,
+} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 export function areArraysEqual(
@@ -97,14 +100,6 @@ export const buildDependencies = (
 	return graph;
 };
 
-export interface IDependencyData {
-	order: string[];
-	graph: VariableGraph;
-	parentDependencyGraph: VariableGraph;
-	hasCycle: boolean;
-	cycleNodes?: string[];
-}
-
 export const buildParentDependencyGraph = (
 	graph: VariableGraph,
 ): VariableGraph => {

frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.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 Tooltip from 'lib/uPlotV2/components/Tooltip/Tooltip';
+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 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}
+				/>
+			);
+		},
+		[config, legendConfig.position],
+	);
+
+	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>
+	);
+}

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

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

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

@@ -5,25 +5,32 @@ export interface ChartDimensions {
 	height: number;
 	legendWidth: number;
 	legendHeight: number;
-	legendsPerSet: number;
+	averageLegendWidth: number;
 }
 
 const AVG_CHAR_WIDTH = 8;
+const LEGEND_WIDTH_PERCENTILE = 0.85;
 const DEFAULT_AVG_LABEL_LENGTH = 15;
-const LEGEND_GAP = 16;
+const BASE_LEGEND_WIDTH = 16;
 const LEGEND_PADDING = 12;
-const LEGEND_LINE_HEIGHT = 36;
+const LEGEND_LINE_HEIGHT = 28;
 
 /**
- * Average text width from series labels (for legendsPerSet).
+ * Calculates the average width of the legend items based on the labels of the series.
+ * @param legends - The labels of the series.
+ * @returns The average width of the legend items.
  */
 export function calculateAverageLegendWidth(legends: string[]): number {
 	if (legends.length === 0) {
-		return DEFAULT_AVG_LABEL_LENGTH;
+		return DEFAULT_AVG_LABEL_LENGTH * AVG_CHAR_WIDTH;
 	}
-	const averageLabelLength =
-		legends.reduce((sum, l) => sum + l.length, 0) / legends.length;
-	return averageLabelLength * AVG_CHAR_WIDTH;
+
+	const lengths = legends.map((l) => l.length).sort((a, b) => a - b);
+
+	const index = Math.ceil(LEGEND_WIDTH_PERCENTILE * lengths.length) - 1;
+	const percentileLength = lengths[Math.max(0, index)];
+
+	return BASE_LEGEND_WIDTH + percentileLength * AVG_CHAR_WIDTH;
 }
 
 /**
@@ -64,7 +71,7 @@ export function calculateChartDimensions({
 			height: 0,
 			legendWidth: 0,
 			legendHeight: 0,
-			legendsPerSet: 0,
+			averageLegendWidth: 0,
 		};
 	}
 
@@ -85,13 +92,15 @@ export function calculateChartDimensions({
 			legendWidth: rightLegendWidth,
 			legendHeight: containerHeight,
 			// Single vertical list on the right.
-			legendsPerSet: 1,
+			averageLegendWidth: rightLegendWidth,
 		};
 	}
 
 	const legendRowHeight = LEGEND_LINE_HEIGHT + LEGEND_PADDING;
 
-	const legendItemWidth = Math.min(approxLegendItemWidth, 400);
+	const legendItemWidth = Math.ceil(
+		Math.min(approxLegendItemWidth, MAX_LEGEND_WIDTH),
+	);
 	const legendItemsPerRow = Math.max(
 		1,
 		Math.floor((containerWidth - LEGEND_PADDING * 2) / legendItemWidth),
@@ -114,17 +123,11 @@ export function calculateChartDimensions({
 		maxAllowedLegendHeight,
 	);
 
-	// How many legend items per row in the Legend component.
-	const legendsPerSet = Math.ceil(
-		(containerWidth + LEGEND_GAP) /
-			(Math.min(MAX_LEGEND_WIDTH, approxLegendItemWidth) + LEGEND_GAP),
-	);
-
 	return {
 		width: containerWidth,
 		height: Math.max(0, containerHeight - bottomLegendHeight),
 		legendWidth: containerWidth,
 		legendHeight: bottomLegendHeight,
-		legendsPerSet,
+		averageLegendWidth: legendItemWidth,
 	};
 }

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -11,6 +11,7 @@ export interface ChartLayoutProps {
 	children: (props: {
 		chartWidth: number;
 		chartHeight: number;
+		averageLegendWidth: number;
 	}) => React.ReactNode;
 	layoutChildren?: React.ReactNode;
 	containerWidth: number;
@@ -56,6 +57,7 @@ export default function ChartLayout({
 					{children({
 						chartWidth: chartDimensions.width,
 						chartHeight: chartDimensions.height,
+						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
 				<div
@@ -65,7 +67,7 @@ export default function ChartLayout({
 						width: chartDimensions.legendWidth,
 					}}
 				>
-					{legendComponent(chartDimensions.legendsPerSet)}
+					{legendComponent(chartDimensions.averageLegendWidth)}
 				</div>
 			</div>
 			{layoutChildren}

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -4,7 +4,7 @@ import { ToggleGraphProps } from 'components/Graph/types';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';

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';
@@ -111,6 +113,8 @@ export const showErrorNotification = (
 ): void => {
 	notifications.error({
 		message: err.message || SOMETHING_WENT_WRONG,
+		description: (err as AxiosError<RenderErrorResponseDTO>).response?.data?.error
+			?.message,
 	});
 };
 
@@ -163,12 +167,17 @@ 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>();
 	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,
@@ -186,7 +195,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const [
 		createLimitForIngestionKeyError,
 		setCreateLimitForIngestionKeyError,
-	] = useState<ErrorResponse | null>(null);
+	] = useState<string | null>(null);
 
 	const [
 		hasUpdateLimitForIngestionKeyError,
@@ -196,7 +205,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const [
 		updateLimitForIngestionKeyError,
 		setUpdateLimitForIngestionKeyError,
-	] = useState<ErrorResponse | null>(null);
+	] = useState<string | null>(null);
 
 	const { t } = useTranslation(['ingestionKeys']);
 
@@ -216,7 +225,7 @@ function MultiIngestionSettings(): JSX.Element {
 		handleFormReset();
 	};
 
-	const showDeleteModal = (apiKey: IngestionKeyProps): void => {
+	const showDeleteModal = (apiKey: GatewaytypesIngestionKeyDTO): void => {
 		setActiveAPIKey(apiKey);
 		setIsDeleteModalOpen(true);
 	};
@@ -233,7 +242,7 @@ function MultiIngestionSettings(): JSX.Element {
 		setIsAddModalOpen(false);
 	};
 
-	const showEditModal = (apiKey: IngestionKeyProps): void => {
+	const showEditModal = (apiKey: GatewaytypesIngestionKeyDTO): void => {
 		setActiveAPIKey(apiKey);
 		handleFormReset();
 		setUpdatedTags(apiKey.tags || []);
@@ -258,25 +267,64 @@ 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: getIngestionKeysData,
+		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: 1,
+			per_page: 100,
+			name: searchText,
+		},
+		{
+			query: {
+				enabled: isSearching,
+			},
+		},
+	);
+
+	// Use the appropriate data based on which API is active
+	const IngestionKeys = isSearching
+		? searchIngestionKeysData
+		: getIngestionKeysData;
+	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]);
+		setActiveAPIKey(IngestionKeys?.data.data?.keys?.[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]);
 
@@ -297,6 +345,7 @@ function MultiIngestionSettings(): JSX.Element {
 
 	const clearSearch = (): void => {
 		setSearchValue('');
+		setSearchText('');
 	};
 
 	const {
@@ -309,21 +358,27 @@ 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({
+		mutation: {
+			onSuccess: (_data) => {
+				// 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);
+			},
 		},
 	});
 
-	const { mutate: updateAPIKey, isLoading: isLoadingUpdateAPIKey } = useMutation(
-		updateIngestionKey,
-		{
+	const {
+		mutate: updateAPIKey,
+		isLoading: isLoadingUpdateAPIKey,
+	} = useUpdateIngestionKey({
+		mutation: {
 			onSuccess: () => {
 				refetchAPIKeys();
 				setIsEditModalOpen(false);
@@ -332,11 +387,13 @@ function MultiIngestionSettings(): JSX.Element {
 				showErrorNotification(notifications, error as AxiosError);
 			},
 		},
-	);
+	});
 
-	const { mutate: deleteAPIKey, isLoading: isDeleteingAPIKey } = useMutation(
-		deleteIngestionKey,
-		{
+	const {
+		mutate: deleteAPIKey,
+		isLoading: isDeleteingAPIKey,
+	} = useDeleteIngestionKey({
+		mutation: {
 			onSuccess: () => {
 				refetchAPIKeys();
 				setIsDeleteModalOpen(false);
@@ -345,49 +402,59 @@ function MultiIngestionSettings(): JSX.Element {
 				showErrorNotification(notifications, error as AxiosError);
 			},
 		},
-	);
+	});
 
 	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({
+		mutation: {
+			onSuccess: () => {
+				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 {
 		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({
+		mutation: {
+			onSuccess: () => {
+				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',
+				);
+			},
 		},
 	});
 
-	const { mutate: deleteLimitForKey, isLoading: isDeletingLimit } = useMutation(
-		deleteLimitsForIngestionKey,
-		{
+	const {
+		mutate: deleteLimitForKey,
+		isLoading: isDeletingLimit,
+	} = useDeleteIngestionKeyLimit({
+		mutation: {
 			onSuccess: () => {
 				setIsDeleteModalOpen(false);
 				setIsDeleteLimitModalOpen(false);
@@ -397,13 +464,15 @@ function MultiIngestionSettings(): JSX.Element {
 				showErrorNotification(notifications, error as AxiosError);
 			},
 		},
-	);
+	});
 
 	const onDeleteHandler = (): void => {
 		clearSearch();
 
-		if (activeAPIKey) {
-			deleteAPIKey(activeAPIKey.id);
+		if (activeAPIKey && activeAPIKey.id) {
+			deleteAPIKey({
+				pathParams: { keyId: activeAPIKey.id },
+			});
 		}
 	};
 
@@ -411,13 +480,15 @@ function MultiIngestionSettings(): JSX.Element {
 		editForm
 			.validateFields()
 			.then((values) => {
-				if (activeAPIKey) {
+				if (activeAPIKey && activeAPIKey.id) {
 					updateAPIKey({
-						id: activeAPIKey.id,
+						pathParams: { keyId: activeAPIKey.id },
 						data: {
 							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(),
+							),
 						},
 					});
 				}
@@ -435,10 +506,12 @@ 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,
+					});
 				}
 			})
 			.catch((errorInfo) => {
@@ -465,7 +538,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,7 +562,7 @@ function MultiIngestionSettings(): JSX.Element {
 
 	/* eslint-disable sonarjs/cognitive-complexity */
 	const handleAddLimit = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signalName: string,
 	): void => {
 		const {
@@ -502,7 +575,7 @@ function MultiIngestionSettings(): JSX.Element {
 		} = addEditLimitForm.getFieldsValue();
 
 		const payload: AddLimitProps = {
-			keyID: APIKey.id,
+			keyID: APIKey.id || '',
 			signal: signalName,
 			config: {},
 		};
@@ -576,11 +649,17 @@ function MultiIngestionSettings(): JSX.Element {
 			return;
 		}
 
-		createLimitForIngestionKey(payload);
+		createLimitForIngestionKey({
+			pathParams: { keyId: payload.keyID },
+			data: {
+				signal: payload.signal,
+				config: payload.config,
+			},
+		});
 	};
 
 	const handleUpdateLimit = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signal: LimitProps,
 	): void => {
 		const {
@@ -644,7 +723,12 @@ function MultiIngestionSettings(): JSX.Element {
 			}
 		}
 
-		updateLimitForIngestionKey(payload);
+		updateLimitForIngestionKey({
+			pathParams: { limitId: payload.limitID },
+			data: {
+				config: payload.config,
+			},
+		});
 	};
 	/* eslint-enable sonarjs/cognitive-complexity */
 
@@ -656,7 +740,7 @@ function MultiIngestionSettings(): JSX.Element {
 	};
 
 	const enableEditLimitMode = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signal: LimitProps,
 	): void => {
 		const dayCount = signal?.config?.day?.count;
@@ -703,14 +787,16 @@ function MultiIngestionSettings(): JSX.Element {
 
 	const onDeleteLimitHandler = (): void => {
 		if (activeSignal && activeSignal.id) {
-			deleteLimitForKey(activeSignal.id);
+			deleteLimitForKey({
+				pathParams: { limitId: activeSignal.id },
+			});
 		}
 	};
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
 	const handleCreateAlert = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signal: LimitProps,
 	): void => {
 		let metricName = '';
@@ -771,31 +857,41 @@ 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,
+					  )
+					: '';
 
 				// 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,8 +908,10 @@ 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
@@ -822,7 +920,9 @@ function MultiIngestionSettings(): JSX.Element {
 											onClick={(e): void => {
 												e.stopPropagation();
 												e.preventDefault();
-												handleCopyKey(APIKey.value);
+												if (APIKey?.value) {
+													handleCopyKey(APIKey.value);
+												}
 											}}
 										/>
 									</div>
@@ -854,7 +954,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>
 
@@ -916,7 +1016,9 @@ function MultiIngestionSettings(): JSX.Element {
 																		<Button
 																			className="periscope-btn ghost"
 																			icon={<PenLine size={14} />}
-																			disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
+																			disabled={
+																				!!(activeAPIKey?.id === APIKey?.id && activeSignal)
+																			}
 																			onClick={(e): void => {
 																				e.stopPropagation();
 																				e.preventDefault();
@@ -926,7 +1028,9 @@ function MultiIngestionSettings(): JSX.Element {
 																		<Button
 																			className="periscope-btn ghost"
 																			icon={<Trash2 color={Color.BG_CHERRY_500} size={14} />}
-																			disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
+																			disabled={
+																				!!(activeAPIKey?.id === APIKey?.id && activeSignal)
+																			}
 																			onClick={(e): void => {
 																				e.stopPropagation();
 																				e.preventDefault();
@@ -940,7 +1044,7 @@ function MultiIngestionSettings(): JSX.Element {
 																		size="small"
 																		shape="round"
 																		icon={<PlusIcon size={14} />}
-																		disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
+																		disabled={!!(activeAPIKey?.id === APIKey?.id && activeSignal)}
 																		onClick={(e): void => {
 																			e.stopPropagation();
 																			e.preventDefault();
@@ -958,7 +1062,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 +1258,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">
@@ -1490,7 +1594,7 @@ function MultiIngestionSettings(): JSX.Element {
 					showHeader={false}
 					onChange={handleTableChange}
 					pagination={{
-						pageSize: paginationParams?.per_page,
+						pageSize: isSearching ? 100 : 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

@@ -86,32 +86,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 = {
 			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: TEST_EXPIRES_AT,
+						value: 'secret',
+						workspace_id: TEST_WORKSPACE_ID,
+						id: 'k1',
+						created_at: TEST_CREATED_UPDATED,
+						updated_at: TEST_CREATED_UPDATED,
+						tags: [],
+						limits: [
+							{
+								id: 'l1',
+								signal: 'metrics',
+								config: { day: { count: 1000 } },
+							},
+						],
+					},
+				],
+				_pagination: { page: 1, per_page: 10, pages: 1, total: 1 },
+			},
 		};
 
 		server.use(
-			rest.get('*/workspaces/me/keys*', (_req, res, ctx) =>
+			rest.get('*/api/v2/gateway/ingestion_keys*', (_req, res, ctx) =>
 				res(ctx.status(200), ctx.json(response)),
 			),
 		);

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,8 @@ 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 || 'Something went wrong'}
 					</Typography.Text>
 
 					<div className="ingestion-setup-details-links">
@@ -176,7 +183,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 +193,7 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 														`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INGESTION_KEY_COPIED}`,
 														{},
 													);
-													handleCopyKey(firstIngestionKey?.value);
+													handleCopyKey(firstIngestionKey?.value || '');
 												}}
 											/>
 										</Typography.Text>

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/__test__/QueryBuilderSearchV2.test.tsx

@@ -12,7 +12,7 @@ import {
 	initialQueriesMap,
 	initialQueryBuilderFormValues,
 } from 'constants/queryBuilder';
-import { IUseDashboardVariablesReturn } from 'hooks/dashboard/useDashboardVariables';
+import { IUseDashboardVariablesReturn } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { QueryBuilderContext } from 'providers/QueryBuilder';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';

frontend/src/hooks/dashboard/__test__/useGetResolvedText.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderHook } from '@testing-library/react';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 
 import useGetResolvedText from '../useGetResolvedText';
 

frontend/src/hooks/dashboard/useDashboardVariables.ts

@@ -1,21 +1,40 @@
-import { useSyncExternalStore } from 'react';
-
+import { useCallback, useRef, useSyncExternalStore } from 'react';
+import { dashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
 import {
-	dashboardVariablesStore,
-	IDashboardVariables,
-} from '../../providers/Dashboard/store/dashboardVariablesStore';
+	IDashboardVariablesStoreState,
+	IUseDashboardVariablesReturn,
+} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 
-export interface IUseDashboardVariablesReturn {
-	dashboardVariables: IDashboardVariables;
-}
+/**
+ * Generic selector hook for dashboard variables store
+ * Allows granular subscriptions to any part of the store state
+ *
+ * @example
+ * ! Select top-level field
+ * const variables = useDashboardVariablesSelector(s => s.variables);
+ *
+ * ! Select specific variable
+ * const fooVar = useDashboardVariablesSelector(s => s.variables['foo']);
+ *
+ * ! Select derived value
+ * const hasVariables = useDashboardVariablesSelector(s => Object.keys(s.variables).length > 0);
+ */
+export const useDashboardVariablesSelector = <T>(
+	selector: (state: IDashboardVariablesStoreState) => T,
+): T => {
+	const selectorRef = useRef(selector);
+	selectorRef.current = selector;
 
-export const useDashboardVariables = (): IUseDashboardVariablesReturn => {
-	const dashboardVariables = useSyncExternalStore(
-		dashboardVariablesStore.subscribe,
-		dashboardVariablesStore.getSnapshot,
+	const getSnapshot = useCallback(
+		() => selectorRef.current(dashboardVariablesStore.getSnapshot()),
+		[],
 	);
 
-	return {
-		dashboardVariables,
-	};
+	return useSyncExternalStore(dashboardVariablesStore.subscribe, getSnapshot);
+};
+
+export const useDashboardVariables = (): IUseDashboardVariablesReturn => {
+	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
+
+	return { dashboardVariables };
 };

frontend/src/lib/dashbaordVariables/getDashboardVariables.ts

@@ -1,5 +1,5 @@
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import store from 'store';
 
 export const getDashboardVariables = (

frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss

@@ -1,7 +1,18 @@
+.legend-search-container {
+	flex-shrink: 0;
+	width: 100%;
+	padding-right: 8px;
+
+	.legend-search-input {
+		font-size: 12px;
+	}
+}
+
 .legend-container {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	gap: 12px;
 	height: 100%;
 	width: 100%;
 
@@ -17,6 +28,38 @@
 		height: 100%;
 		width: 100%;
 
+		.virtuoso-grid-list {
+			min-width: 0;
+			display: grid;
+			grid-auto-flow: row;
+			grid-template-columns: repeat(
+				auto-fill,
+				minmax(var(--legend-average-width, 240px), 1fr)
+			);
+			row-gap: 4px;
+			column-gap: 12px;
+		}
+
+		.virtuoso-grid-item {
+			min-width: 0;
+		}
+
+		&.legend-virtuoso-container-right {
+			.virtuoso-grid-list {
+				grid-template-columns: 1fr;
+			}
+		}
+
+		&.legend-virtuoso-container-single-row {
+			.virtuoso-grid-list {
+				grid-template-columns: repeat(
+					auto-fit,
+					minmax(var(--legend-average-width, 240px), max-content)
+				);
+				justify-content: center;
+			}
+		}
+
 		&::-webkit-scrollbar {
 			width: 0.3rem;
 		}
@@ -58,9 +101,15 @@
 	align-items: center;
 	gap: 6px;
 	padding: 4px 8px;
+	max-width: 100%;
+	overflow: hidden;
 	border-radius: 4px;
 	cursor: pointer;
 
+	&.legend-item-right {
+		width: 100%;
+	}
+
 	&.legend-item-off {
 		opacity: 0.3;
 		text-decoration: line-through;

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

@@ -1,23 +1,21 @@
-import { useCallback, useMemo, useRef } from 'react';
-import { Virtuoso } from 'react-virtuoso';
-import { Tooltip as AntdTooltip } from 'antd';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { VirtuosoGrid } from 'react-virtuoso';
+import { Input, Tooltip as AntdTooltip } from 'antd';
 import cx from 'classnames';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-import { LegendPosition } from 'types/api/dashboard/getAll';
 
-import { LegendProps } from '../types';
+import { LegendPosition, LegendProps } from '../types';
 import { useLegendActions } from './useLegendActions';
 
 import './Legend.styles.scss';
 
-export const MAX_LEGEND_WIDTH = 320;
-const LEGENDS_PER_SET_DEFAULT = 5;
+export const MAX_LEGEND_WIDTH = 240;
 
 export default function Legend({
 	position = LegendPosition.BOTTOM,
 	config,
-	legendsPerSet = LEGENDS_PER_SET_DEFAULT,
+	averageLegendWidth = MAX_LEGEND_WIDTH,
 }: LegendProps): JSX.Element {
 	const {
 		legendItemsMap,
@@ -33,54 +31,54 @@ export default function Legend({
 		focusedSeriesIndex,
 	});
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
+	const [legendSearchQuery, setLegendSearchQuery] = useState('');
 
-	// Chunk legend items into rows of LEGENDS_PER_ROW items each
-	const legendRows = useMemo(() => {
-		const legendItems = Object.values(legendItemsMap);
+	const legendItems = useMemo(() => Object.values(legendItemsMap), [
+		legendItemsMap,
+	]);
 
-		return legendItems.reduce((acc: LegendItem[][], curr, i) => {
-			if (i % legendsPerSet === 0) {
-				acc.push([]);
-			}
-			acc[acc.length - 1].push(curr);
-			return acc;
-		}, [] as LegendItem[][]);
-	}, [legendItemsMap, legendsPerSet]);
+	const isSingleRow = useMemo(() => {
+		if (!legendContainerRef.current || position !== LegendPosition.BOTTOM) {
+			return false;
+		}
+		const containerWidth = legendContainerRef.current.clientWidth;
 
-	const renderLegendRow = useCallback(
-		(rowIndex: number, row: LegendItem[]): JSX.Element => (
-			<div
-				key={rowIndex}
-				className={cx(
-					'legend-row',
-					`legend-row-${position.toLowerCase()}`,
-					legendRows.length === 1 && position === LegendPosition.BOTTOM
-						? 'legend-single-row'
-						: '',
-				)}
-			>
-				{row.map((item) => (
-					<AntdTooltip key={item.seriesIndex} title={item.label}>
-						<div
-							data-legend-item-id={item.seriesIndex}
-							className={cx('legend-item', {
-								'legend-item-off': !item.show,
-								'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
-							})}
-							style={{ maxWidth: `min(${MAX_LEGEND_WIDTH}px, 100%)` }}
-						>
-							<div
-								className="legend-marker"
-								style={{ borderColor: String(item.color) }}
-								data-is-legend-marker={true}
-							/>
-							<span className="legend-label">{item.label}</span>
-						</div>
-					</AntdTooltip>
-				))}
-			</div>
+		const totalLegendWidth = legendItems.length * (averageLegendWidth + 16);
+		const totalRows = Math.ceil(totalLegendWidth / containerWidth);
+		return totalRows <= 1;
+	}, [averageLegendWidth, legendContainerRef, legendItems.length, position]);
+
+	const visibleLegendItems = useMemo(() => {
+		if (position !== LegendPosition.RIGHT || !legendSearchQuery.trim()) {
+			return legendItems;
+		}
+
+		const query = legendSearchQuery.trim().toLowerCase();
+		return legendItems.filter((item) =>
+			item.label?.toLowerCase().includes(query),
+		);
+	}, [position, legendSearchQuery, legendItems]);
+
+	const renderLegendItem = useCallback(
+		(item: LegendItem): JSX.Element => (
+			<AntdTooltip key={item.seriesIndex} title={item.label}>
+				<div
+					data-legend-item-id={item.seriesIndex}
+					className={cx('legend-item', `legend-item-${position.toLowerCase()}`, {
+						'legend-item-off': !item.show,
+						'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
+					})}
+				>
+					<div
+						className="legend-marker"
+						style={{ borderColor: String(item.color) }}
+						data-is-legend-marker={true}
+					/>
+					<span className="legend-label">{item.label}</span>
+				</div>
+			</AntdTooltip>
 		),
-		[focusedSeriesIndex, position, legendRows],
+		[focusedSeriesIndex, position],
 	);
 
 	return (
@@ -90,11 +88,29 @@ export default function Legend({
 			onClick={onLegendClick}
 			onMouseMove={onLegendMouseMove}
 			onMouseLeave={onLegendMouseLeave}
+			style={{
+				['--legend-average-width' as string]: `${averageLegendWidth + 16}px`, // 16px is the marker width
+			}}
 		>
-			<Virtuoso
-				className="legend-virtuoso-container"
-				data={legendRows}
-				itemContent={(index, row): JSX.Element => renderLegendRow(index, row)}
+			{position === LegendPosition.RIGHT && (
+				<div className="legend-search-container">
+					<Input
+						allowClear
+						placeholder="Search..."
+						value={legendSearchQuery}
+						onChange={(e): void => setLegendSearchQuery(e.target.value)}
+						className="legend-search-input"
+					/>
+				</div>
+			)}
+			<VirtuosoGrid
+				className={cx(
+					'legend-virtuoso-container',
+					`legend-virtuoso-container-${position.toLowerCase()}`,
+					{ 'legend-virtuoso-container-single-row': isSingleRow },
+				)}
+				data={visibleLegendItems}
+				itemContent={(_, item): JSX.Element => renderLegendItem(item)}
 			/>
 		</div>
 	);

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.styles.scss

@@ -5,7 +5,7 @@
 	-webkit-font-smoothing: antialiased;
 	color: var(--bg-vanilla-100);
 	border-radius: 6px;
-	padding: 1rem 1rem 0.5rem 1rem;
+	padding: 1rem 0.5rem 0.5rem 1rem;
 	border: 1px solid var(--bg-ink-100);
 	display: flex;
 	flex-direction: column;
@@ -15,6 +15,12 @@
 		background: var(--bg-vanilla-100);
 		color: var(--bg-ink-500);
 		border: 1px solid var(--bg-vanilla-300);
+
+		.uplot-tooltip-list {
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-vanilla-400);
+			}
+		}
 	}
 
 	.uplot-tooltip-header {
@@ -22,18 +28,18 @@
 		font-weight: 500;
 	}
 
-	.uplot-tooltip-list-container {
-		height: 100%;
-		.uplot-tooltip-list {
-			&::-webkit-scrollbar {
-				width: 0.3rem;
-			}
-			&::-webkit-scrollbar-corner {
-				background: transparent;
-			}
-			&::-webkit-scrollbar-thumb {
-				background: rgb(136, 136, 136);
-			}
+	.uplot-tooltip-list {
+		&::-webkit-scrollbar {
+			width: 0.3rem;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-100);
+			border-radius: 0.5rem;
 		}
 	}
 

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

@@ -75,7 +75,7 @@ export interface LegendConfig {
 export interface LegendProps {
 	position?: LegendPosition;
 	config: UPlotConfigBuilder;
-	legendsPerSet?: number;
+	averageLegendWidth?: number;
 }
 
 export interface TooltipContentItem {

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -45,8 +45,11 @@ import APIError from 'types/api/error';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as generateUUID } from 'uuid';
 
-import { useDashboardVariables } from '../../hooks/dashboard/useDashboardVariables';
-import { setDashboardVariablesStore } from './store/dashboardVariablesStore';
+import { useDashboardVariablesSelector } from '../../hooks/dashboard/useDashboardVariables';
+import {
+	setDashboardVariablesStore,
+	updateDashboardVariablesStore,
+} from './store/dashboardVariables/dashboardVariablesStore';
 import {
 	DashboardSortOrder,
 	IDashboardContext,
@@ -198,14 +201,23 @@ export function DashboardProvider({
 			: isDashboardWidgetPage?.params.dashboardId) || '';
 
 	const [selectedDashboard, setSelectedDashboard] = useState<Dashboard>();
-	const dashboardVariables = useDashboardVariables();
+	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
+	const savedDashboardId = useDashboardVariablesSelector((s) => s.dashboardId);
 
 	useEffect(() => {
 		const existingVariables = dashboardVariables;
 		const updatedVariables = selectedDashboard?.data.variables || {};
 
-		if (!isEqual(existingVariables, updatedVariables)) {
-			setDashboardVariablesStore(updatedVariables);
+		if (savedDashboardId !== dashboardId) {
+			setDashboardVariablesStore({
+				dashboardId,
+				variables: updatedVariables,
+			});
+		} else if (!isEqual(existingVariables, updatedVariables)) {
+			updateDashboardVariablesStore({
+				dashboardId,
+				variables: updatedVariables,
+			});
 		}
 	}, [selectedDashboard]);
 

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

@@ -0,0 +1,57 @@
+import createStore from '../store';
+import { IDashboardVariablesStoreState } from './dashboardVariablesStoreTypes';
+import {
+	computeDerivedValues,
+	updateDerivedValues,
+} from './dashboardVariablesStoreUtils';
+
+const initialState: IDashboardVariablesStoreState = {
+	dashboardId: '',
+	variables: {},
+	sortedVariablesArray: [],
+	dependencyData: null,
+};
+
+export const dashboardVariablesStore = createStore<IDashboardVariablesStoreState>(
+	initialState,
+);
+
+/**
+ * Set dashboard variables (replaces all variables)
+ */
+export function setDashboardVariablesStore({
+	dashboardId,
+	variables,
+}: {
+	dashboardId: string;
+	variables: IDashboardVariablesStoreState['variables'];
+}): void {
+	dashboardVariablesStore.set(() => {
+		return {
+			dashboardId,
+			variables,
+			...computeDerivedValues(variables),
+		} as IDashboardVariablesStoreState;
+	});
+}
+
+/**
+ * Update specific dashboard variables (merges with existing)
+ */
+export function updateDashboardVariablesStore({
+	dashboardId,
+	variables,
+}: {
+	dashboardId: string;
+	variables: IDashboardVariablesStoreState['variables'];
+}): void {
+	dashboardVariablesStore.update((draft) => {
+		if (draft.dashboardId !== dashboardId) {
+			// If dashboardId doesn't match, we replace the entire state
+			draft.dashboardId = dashboardId;
+		}
+		draft.variables = variables;
+
+		updateDerivedValues(draft);
+	});
+}

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

@@ -0,0 +1,31 @@
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+export type VariableGraph = Record<string, string[]>;
+
+export interface IDependencyData {
+	order: string[];
+	graph: VariableGraph;
+	parentDependencyGraph: VariableGraph;
+	hasCycle: boolean;
+	cycleNodes?: string[];
+}
+
+export type IDashboardVariables = Record<string, IDashboardVariable>;
+
+export interface IDashboardVariablesStoreState {
+	// dashboard id
+	dashboardId: string;
+
+	// Raw variables keyed by id/name
+	variables: IDashboardVariables;
+
+	// Derived: sorted array of variables by order
+	sortedVariablesArray: IDashboardVariable[];
+
+	// Derived: dependency data for QUERY variables
+	dependencyData: IDependencyData | null;
+}
+
+export interface IUseDashboardVariablesReturn {
+	dashboardVariables: IDashboardVariablesStoreState['variables'];
+}

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

@@ -0,0 +1,89 @@
+import {
+	buildDependencies,
+	buildDependencyGraph,
+} from 'container/DashboardContainer/DashboardVariablesSelection/util';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import {
+	IDashboardVariables,
+	IDashboardVariablesStoreState,
+	IDependencyData,
+} from './dashboardVariablesStoreTypes';
+
+/**
+ * Build a sorted array of variables by their order property
+ */
+export function buildSortedVariablesArray(
+	variables: IDashboardVariables,
+): IDashboardVariable[] {
+	const sortedVariablesArray: IDashboardVariable[] = [];
+
+	Object.values(variables).forEach((value) => {
+		sortedVariablesArray.push({ ...value });
+	});
+
+	sortedVariablesArray.sort((a, b) => a.order - b.order);
+
+	return sortedVariablesArray;
+}
+
+/**
+ * Build dependency data from sorted variables array
+ * This includes the dependency graph, topological order, and cycle detection
+ */
+export function buildDependencyData(
+	sortedVariablesArray: IDashboardVariable[],
+): IDependencyData | null {
+	if (sortedVariablesArray.length === 0) {
+		return null;
+	}
+
+	const dependencies = buildDependencies(sortedVariablesArray);
+	const {
+		order,
+		graph,
+		parentDependencyGraph,
+		hasCycle,
+		cycleNodes,
+	} = buildDependencyGraph(dependencies);
+
+	// Filter order to only include QUERY type variables
+	const queryVariableOrder = order.filter((variable: string) => {
+		const variableData = sortedVariablesArray.find((v) => v.name === variable);
+		return variableData?.type === 'QUERY';
+	});
+
+	return {
+		order: queryVariableOrder,
+		graph,
+		parentDependencyGraph,
+		hasCycle,
+		cycleNodes,
+	};
+}
+
+/**
+ * Compute derived values from variables
+ * This is a composition of buildSortedVariablesArray and buildDependencyData
+ */
+export function computeDerivedValues(
+	variables: IDashboardVariablesStoreState['variables'],
+): Pick<
+	IDashboardVariablesStoreState,
+	'sortedVariablesArray' | 'dependencyData'
+> {
+	const sortedVariablesArray = buildSortedVariablesArray(variables);
+	const dependencyData = buildDependencyData(sortedVariablesArray);
+
+	return { sortedVariablesArray, dependencyData };
+}
+
+/**
+ * Update derived values in the store state (for use with immer)
+ */
+export function updateDerivedValues(
+	draft: IDashboardVariablesStoreState,
+): void {
+	draft.sortedVariablesArray = buildSortedVariablesArray(draft.variables);
+	draft.dependencyData = buildDependencyData(draft.sortedVariablesArray);
+}

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

@@ -1,14 +0,0 @@
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import createStore from './store';
-
-// export type IDashboardVariables = DashboardData['variables'];
-export type IDashboardVariables = Record<string, IDashboardVariable>;
-
-export const dashboardVariablesStore = createStore<IDashboardVariables>({});
-
-export function setDashboardVariablesStore(
-	variables: Partial<IDashboardVariables>,
-): void {
-	dashboardVariablesStore.set(() => ({ ...variables }));
-}

pkg/alertmanager/alertmanagerserver/dispatcher.go

@@ -569,8 +569,8 @@ func (d *Dispatcher) getOrCreateRoute(receiver string) *dispatch.Route {
 	route := &dispatch.Route{
 		RouteOpts: dispatch.RouteOpts{
 			Receiver:      receiver,
-			GroupWait:     30 * time.Second,
-			GroupInterval: 5 * time.Minute,
+			GroupWait:     d.route.RouteOpts.GroupWait,
+			GroupInterval: d.route.RouteOpts.GroupInterval,
 			GroupByAll:    false,
 		},
 		Matchers: labels.Matchers{{

pkg/alertmanager/alertmanagerserver/distpatcher_test.go

@@ -1183,8 +1183,8 @@ func TestDispatcherRaceOnFirstAlertNotDeliveredWhenGroupWaitIsZero(t *testing.T)
 
 route:
   group_by: ['alertname']
-  group_wait: 1h
-  group_interval: 1h
+  group_wait: 30s
+  group_interval: 5m
   receiver: 'slack'`
 	conf, err := config.Load(confData)
 	if err != nil {
@@ -1308,3 +1308,95 @@ func TestDispatcher_DoMaintenance(t *testing.T) {
 	require.False(t, isMuted)
 	require.Empty(t, mutedBy)
 }
+
+func TestDispatcher_GetOrCreateRoute(t *testing.T) {
+	testCases := []struct {
+		name                  string
+		confData              string
+		expectedReceiver      string
+		expectedGroupWait     time.Duration
+		expectedGroupInterval time.Duration
+		expectedGroupByAll    bool
+		expectedMatchersLen   int
+		expectedMatcherName   string
+		expectedMatcherValue  string
+	}{
+		{
+			name: "create route for slack receiver",
+			confData: `receivers:
+- name: 'slack'
+- name: 'email'
+- name: 'pagerduty'
+
+route:
+  group_by: ['alertname']
+  group_wait: 1m
+  group_interval: 1m
+  receiver: 'slack'`,
+			expectedReceiver:      "slack",
+			expectedGroupWait:     1 * time.Minute,
+			expectedGroupInterval: 1 * time.Minute,
+			expectedGroupByAll:    false,
+			expectedMatchersLen:   1,
+			expectedMatcherName:   "__receiver__",
+			expectedMatcherValue:  "slack",
+		},
+		{
+			name: "no group_wait and group_interval use default values",
+			confData: `receivers:
+- name: 'slack'
+
+route:
+  group_by: ['alertname']
+  receiver: 'slack'`,
+			expectedReceiver:      "slack",
+			expectedGroupWait:     30 * time.Second,
+			expectedGroupInterval: 5 * time.Minute,
+			expectedGroupByAll:    false,
+			expectedMatchersLen:   1,
+			expectedMatcherName:   "__receiver__",
+			expectedMatcherValue:  "slack",
+		},
+	}
+
+	for _, tc := range testCases {
+		t.Run(tc.name, func(t *testing.T) {
+			conf, err := config.Load(tc.confData)
+			if err != nil {
+				t.Fatal(err)
+			}
+
+			providerSettings := createTestProviderSettings()
+			logger := providerSettings.Logger
+			route := dispatch.NewRoute(conf.Route, nil)
+			marker := alertmanagertypes.NewMarker(prometheus.NewRegistry())
+			alerts, err := mem.NewAlerts(context.Background(), marker, time.Hour, nil, logger, nil)
+			if err != nil {
+				t.Fatal(err)
+			}
+			defer alerts.Close()
+
+			timeout := func(d time.Duration) time.Duration { return time.Duration(0) }
+			recorder := &recordStage{alerts: make(map[string]map[model.Fingerprint]*alertmanagertypes.Alert)}
+			metrics := NewDispatcherMetrics(false, prometheus.NewRegistry())
+			store := nfroutingstoretest.NewMockSQLRouteStore()
+			store.MatchExpectationsInOrder(false)
+			nfManager, err := rulebasednotification.New(context.Background(), providerSettings, nfmanager.Config{}, store)
+			if err != nil {
+				t.Fatal(err)
+			}
+			d := NewDispatcher(alerts, route, recorder, marker, timeout, nil, logger, metrics, nfManager, "test-org")
+			// setup the dispatcher for tests
+			d.receiverRoutes = map[string]*dispatch.Route{}
+
+			newRoute := d.getOrCreateRoute(tc.expectedReceiver)
+			require.Equal(t, tc.expectedReceiver, newRoute.RouteOpts.Receiver)
+			require.Equal(t, tc.expectedGroupWait, newRoute.RouteOpts.GroupWait)
+			require.Equal(t, tc.expectedGroupInterval, newRoute.RouteOpts.GroupInterval)
+			require.Equal(t, tc.expectedGroupByAll, newRoute.RouteOpts.GroupByAll)
+			require.Equal(t, tc.expectedMatchersLen, len(newRoute.Matchers))
+			require.Equal(t, tc.expectedMatcherName, newRoute.Matchers[0].Name)
+			require.Equal(t, tc.expectedMatcherValue, newRoute.Matchers[0].Value)
+		})
+	}
+}

pkg/types/metricsexplorertypes/metricsexplorer.go

@@ -34,9 +34,9 @@ var (
 // StatsRequest represents the payload accepted by the metrics stats endpoint.
 type StatsRequest struct {
 	Filter  *qbtypes.Filter  `json:"filter,omitempty"`
-	Start   int64            `json:"start"`
-	End     int64            `json:"end"`
-	Limit   int              `json:"limit"`
+	Start   int64            `json:"start" required:"true"`
+	End     int64            `json:"end" required:"true"`
+	Limit   int              `json:"limit" required:"true"`
 	Offset  int              `json:"offset"`
 	OrderBy *qbtypes.OrderBy `json:"orderBy,omitempty"`
 }
@@ -96,26 +96,26 @@ func (req *StatsRequest) UnmarshalJSON(data []byte) error {
 
 // Stat represents the summary information returned per metric.
 type Stat struct {
-	MetricName  string           `json:"metricName"`
-	Description string           `json:"description"`
-	MetricType  metrictypes.Type `json:"type"`
-	MetricUnit  string           `json:"unit"`
-	TimeSeries  uint64           `json:"timeseries"`
-	Samples     uint64           `json:"samples"`
+	MetricName  string           `json:"metricName" required:"true"`
+	Description string           `json:"description" required:"true"`
+	MetricType  metrictypes.Type `json:"type" required:"true" enum:"gauge,sum,histogram,summary,exponentialhistogram"`
+	MetricUnit  string           `json:"unit" required:"true"`
+	TimeSeries  uint64           `json:"timeseries" required:"true"`
+	Samples     uint64           `json:"samples" required:"true"`
 }
 
 // StatsResponse represents the aggregated metrics statistics.
 type StatsResponse struct {
-	Metrics []Stat `json:"metrics"`
-	Total   uint64 `json:"total"`
+	Metrics []Stat `json:"metrics" required:"true" nullable:"true"`
+	Total   uint64 `json:"total" required:"true"`
 }
 
 type MetricMetadata struct {
-	Description string                  `json:"description"`
-	MetricType  metrictypes.Type        `json:"type"`
-	MetricUnit  string                  `json:"unit"`
-	Temporality metrictypes.Temporality `json:"temporality"`
-	IsMonotonic bool                    `json:"isMonotonic"`
+	Description string                  `json:"description" required:"true"`
+	MetricType  metrictypes.Type        `json:"type" required:"true" enum:"gauge,sum,histogram,summary,exponentialhistogram"`
+	MetricUnit  string                  `json:"unit" required:"true"`
+	Temporality metrictypes.Temporality `json:"temporality" required:"true" enum:"delta,cumulative,unspecified"`
+	IsMonotonic bool                    `json:"isMonotonic" required:"true"`
 }
 
 // MarshalBinary implements cachetypes.Cacheable interface
@@ -130,21 +130,21 @@ func (m *MetricMetadata) UnmarshalBinary(data []byte) error {
 
 // UpdateMetricMetadataRequest represents the payload for updating metric metadata.
 type UpdateMetricMetadataRequest struct {
-	MetricName  string                  `json:"metricName"`
-	Type        metrictypes.Type        `json:"type"`
-	Description string                  `json:"description"`
-	Unit        string                  `json:"unit"`
-	Temporality metrictypes.Temporality `json:"temporality"`
-	IsMonotonic bool                    `json:"isMonotonic"`
+	MetricName  string                  `json:"metricName" required:"true"`
+	Type        metrictypes.Type        `json:"type" required:"true" enum:"gauge,sum,histogram,summary,exponentialhistogram"`
+	Description string                  `json:"description" required:"true"`
+	Unit        string                  `json:"unit" required:"true"`
+	Temporality metrictypes.Temporality `json:"temporality" required:"true" enum:"delta,cumulative,unspecified"`
+	IsMonotonic bool                    `json:"isMonotonic" required:"true"`
 }
 
 // TreemapRequest represents the payload for the metrics treemap endpoint.
 type TreemapRequest struct {
 	Filter *qbtypes.Filter `json:"filter,omitempty"`
-	Start  int64           `json:"start"`
-	End    int64           `json:"end"`
-	Limit  int             `json:"limit"`
-	Mode   TreemapMode     `json:"mode"`
+	Start  int64           `json:"start" required:"true"`
+	End    int64           `json:"end" required:"true"`
+	Limit  int             `json:"limit" required:"true"`
+	Mode   TreemapMode     `json:"mode" required:"true" enum:"timeseries,samples"`
 }
 
 // Validate enforces basic constraints on TreemapRequest.
@@ -210,52 +210,52 @@ func (req *TreemapRequest) UnmarshalJSON(data []byte) error {
 
 // TreemapEntry represents each node in the treemap response.
 type TreemapEntry struct {
-	MetricName string  `json:"metricName"`
-	Percentage float64 `json:"percentage"`
-	TotalValue uint64  `json:"totalValue"`
+	MetricName string  `json:"metricName" required:"true"`
+	Percentage float64 `json:"percentage" required:"true"`
+	TotalValue uint64  `json:"totalValue" required:"true"`
 }
 
 // TreemapResponse is the output structure for the treemap endpoint.
 type TreemapResponse struct {
-	TimeSeries []TreemapEntry `json:"timeseries"`
-	Samples    []TreemapEntry `json:"samples"`
+	TimeSeries []TreemapEntry `json:"timeseries" required:"true" nullable:"true"`
+	Samples    []TreemapEntry `json:"samples" required:"true" nullable:"true"`
 }
 
 // MetricAlert represents an alert associated with a metric.
 type MetricAlert struct {
-	AlertName string `json:"alertName"`
-	AlertID   string `json:"alertId"`
+	AlertName string `json:"alertName" required:"true"`
+	AlertID   string `json:"alertId" required:"true"`
 }
 
 // MetricAlertsResponse represents the response for metric alerts endpoint.
 type MetricAlertsResponse struct {
-	Alerts []MetricAlert `json:"alerts"`
+	Alerts []MetricAlert `json:"alerts" required:"true" nullable:"true"`
 }
 
 // MetricDashboard represents a dashboard/widget referencing a metric.
 type MetricDashboard struct {
-	DashboardName string `json:"dashboardName"`
-	DashboardID   string `json:"dashboardId"`
-	WidgetID      string `json:"widgetId"`
-	WidgetName    string `json:"widgetName"`
+	DashboardName string `json:"dashboardName" required:"true"`
+	DashboardID   string `json:"dashboardId" required:"true"`
+	WidgetID      string `json:"widgetId" required:"true"`
+	WidgetName    string `json:"widgetName" required:"true"`
 }
 
 // MetricDashboardsResponse represents the response for metric dashboards endpoint.
 type MetricDashboardsResponse struct {
-	Dashboards []MetricDashboard `json:"dashboards"`
+	Dashboards []MetricDashboard `json:"dashboards" required:"true" nullable:"true"`
 }
 
 // MetricHighlightsResponse is the output structure for the metric highlights endpoint.
 type MetricHighlightsResponse struct {
-	DataPoints       uint64 `json:"dataPoints"`
-	LastReceived     uint64 `json:"lastReceived"`
-	TotalTimeSeries  uint64 `json:"totalTimeSeries"`
-	ActiveTimeSeries uint64 `json:"activeTimeSeries"`
+	DataPoints       uint64 `json:"dataPoints" required:"true"`
+	LastReceived     uint64 `json:"lastReceived" required:"true"`
+	TotalTimeSeries  uint64 `json:"totalTimeSeries" required:"true"`
+	ActiveTimeSeries uint64 `json:"activeTimeSeries" required:"true"`
 }
 
 // MetricAttributesRequest represents the payload for the metric attributes endpoint.
 type MetricAttributesRequest struct {
-	MetricName string `json:"metricName"`
+	MetricName string `json:"metricName" required:"true"`
 	Start      *int64 `json:"start,omitempty"`
 	End        *int64 `json:"end,omitempty"`
 }
@@ -292,17 +292,17 @@ func (req *MetricAttributesRequest) UnmarshalJSON(data []byte) error {
 
 // MetricAttribute represents a single attribute with its values and count.
 type MetricAttribute struct {
-	Key        string   `json:"key"`
-	Values     []string `json:"values"`
-	ValueCount uint64   `json:"valueCount"`
+	Key        string   `json:"key" required:"true"`
+	Values     []string `json:"values" required:"true" nullable:"true"`
+	ValueCount uint64   `json:"valueCount" required:"true"`
 }
 
 // MetricAttributesResponse is the output structure for the metric attributes endpoint.
 type MetricAttributesResponse struct {
-	Attributes []MetricAttribute `json:"attributes"`
-	TotalKeys  int64             `json:"totalKeys"`
+	Attributes []MetricAttribute `json:"attributes" required:"true" nullable:"true"`
+	TotalKeys  int64             `json:"totalKeys" required:"true"`
 }
 
 type MetricNameParams struct {
-	MetricName string `query:"metricName"`
+	MetricName string `query:"metricName" required:"true"`
 }

pkg/types/metrictypes/metrictypes.go

@@ -130,7 +130,7 @@ var (
 	SumType          = Type{valuer.NewString("sum")}
 	HistogramType    = Type{valuer.NewString("histogram")}
 	SummaryType      = Type{valuer.NewString("summary")}
-	ExpHistogramType = Type{valuer.NewString("exponential_histogram")}
+	ExpHistogramType = Type{valuer.NewString("exponentialhistogram")}
 	UnspecifiedType  = Type{valuer.NewString("")}
 )