test(quick-filters): add settings-with-banner stories for every filters page (#12968)

#### Description

- the quick filters settings panel is sized from the filters pane, not
the viewport. the case that broke was a banner shortening the layout,
which pushed the Save changes footer off screen.. so every page with
settings now has a story for exactly that.
- each new story opens settings and removes a filter first, that is what
puts the footer on screen. same play sequence as the existing dirty
story so the two are comparable side by side.
- external apis and cost meter had no settings story at all, they get
the plain and dirty ones too. cost meter's settings live on the explorer
tab so its stories start there.
- `banner` is already a global control on the app shell mocks, so no
mock changes anywhere.. the stories just turn it on.

#### Issues closed by this PR

Part of https://github.com/SigNoz/engineering-pod/issues/5978

#### Additional Information

- covers logs, traces, exceptions, ai observability, external apis and
cost meter.
- the play functions have not been run here, playwright's browser is not
installed on my machine. external apis and cost meter are the ones worth
checking first since they never had a settings story.
- cc. @H4ad

.github/CODEOWNERS

@@ -200,6 +200,15 @@ go.mod @therealpandey
 /frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
 /frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend
+/frontend/src/container/RoutingPolicies/ @SigNoz/pulse-frontend
+/frontend/src/components/AlertBreadcrumb/ @SigNoz/pulse-frontend
+/frontend/src/container/EditRules/ @SigNoz/pulse-frontend
+/frontend/src/components/AlertDetailsFilters/ @SigNoz/pulse-frontend
+/frontend/src/components/Alerts/ @SigNoz/pulse-frontend
+/frontend/src/hooks/routingPolicies/ @SigNoz/pulse-frontend
+/frontend/src/types/api/alerts/ @SigNoz/pulse-frontend
+/frontend/src/providers/Alert.tsx @SigNoz/pulse-frontend
+/frontend/src/constants/alerts.ts @SigNoz/pulse-frontend
 
 ## Notification Channels
 /frontend/src/pages/ChannelsEdit/ @SigNoz/pulse-frontend
@@ -207,6 +216,8 @@ go.mod @therealpandey
 /frontend/src/container/AllAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/CreateAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/EditAlertChannels/ @SigNoz/pulse-frontend
+/frontend/src/container/FormAlertChannels/ @SigNoz/pulse-frontend
+/frontend/src/hooks/notificationChannels/ @SigNoz/pulse-frontend
 
 ## OpenAPI Schema - Generated
 /frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv

docs/api/openapi.yml

@@ -8935,6 +8935,89 @@ components:
         message:
           type: string
       type: object
+    RuletypesLabelPair:
+      properties:
+        key:
+          type: string
+        value:
+          type: string
+      required:
+      - key
+      - value
+      type: object
+    RuletypesListOrder:
+      enum:
+      - asc
+      - desc
+      type: string
+    RuletypesListSort:
+      enum:
+      - updated_at
+      - created_at
+      - name
+      - state
+      - severity
+      type: string
+    RuletypesListableRule:
+      properties:
+        alert:
+          type: string
+        alertType:
+          $ref: '#/components/schemas/RuletypesAlertType'
+        createdAt:
+          format: date-time
+          type: string
+        createdBy:
+          type: string
+        description:
+          type: string
+        disabled:
+          type: boolean
+        id:
+          type: string
+        labels:
+          additionalProperties:
+            type: string
+          type: object
+        ruleType:
+          $ref: '#/components/schemas/RuletypesRuleType'
+        state:
+          $ref: '#/components/schemas/RuletypesAlertState'
+        updatedAt:
+          format: date-time
+          type: string
+        updatedBy:
+          type: string
+      required:
+      - id
+      - state
+      - alert
+      - alertType
+      - ruleType
+      type: object
+    RuletypesListableRules:
+      properties:
+        labels:
+          items:
+            $ref: '#/components/schemas/RuletypesLabelPair'
+          type: array
+        reservedKeywords:
+          items:
+            type: string
+          type: array
+        rules:
+          items:
+            $ref: '#/components/schemas/RuletypesListableRule'
+          type: array
+        total:
+          format: int64
+          type: integer
+      required:
+      - rules
+      - total
+      - labels
+      - reservedKeywords
+      type: object
     RuletypesMatchType:
       enum:
       - at_least_once
@@ -20887,9 +20970,10 @@ paths:
       - users
   /api/v2/rules:
     get:
-      deprecated: false
-      description: This endpoint lists all alert rules with their current evaluation
-        state
+      deprecated: true
+      description: 'This endpoint lists all alert rules with their current evaluation
+        state. Deprecated: use ListRulesV3, which supports filtering, sorting and
+        pagination.'
       operationId: ListRules
       responses:
         "200":
@@ -26671,6 +26755,93 @@ paths:
       summary: Get metric dashboards (v2)
       tags:
       - metrics
+  /api/v3/rules:
+    get:
+      deprecated: false
+      description: Returns a page of alert rules with their current evaluation state,
+        trimmed to the fields the list page renders. Supports a filter DSL (`query`),
+        a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`),
+        order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). In the
+        filter DSL, a non-reserved key is matched as a rule label directly (`team
+        = infra`); a key that collides with a reserved keyword matches either interpretation
+        (negative operators exclude both), and `labels.<key>` targets only the label.
+        The response also carries the org's label pairs and the reserved filter keys
+        for building filter suggestions.
+      operationId: ListRulesV3
+      parameters:
+      - in: query
+        name: query
+        schema:
+          type: string
+      - in: query
+        name: states
+        schema:
+          items:
+            type: string
+          type: array
+      - in: query
+        name: sort
+        schema:
+          $ref: '#/components/schemas/RuletypesListSort'
+      - in: query
+        name: order
+        schema:
+          $ref: '#/components/schemas/RuletypesListOrder'
+      - in: query
+        name: limit
+        schema:
+          type: integer
+      - in: query
+        name: offset
+        schema:
+          type: integer
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/RuletypesListableRules'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: List alert rules (v3)
+      tags:
+      - rules
   /api/v3/traces/{traceID}/flamegraph:
     post:
       deprecated: false

ee/sqlstore/postgressqlstore/formatter.go

@@ -23,6 +23,15 @@ func (f *formatter) JSONExtractString(column, path string) []byte {
 	return append(f.TextToJsonColumn(column), ops...)
 }
 
+func (f *formatter) JSONExtractMapValue(column, mapField, key string) []byte {
+	sql := f.TextToJsonColumn(column)
+	sql = append(sql, "->"...)
+	sql = schema.Append(f.bunf, sql, mapField)
+	sql = append(sql, "->>"...)
+	sql = schema.Append(f.bunf, sql, key)
+	return sql
+}
+
 func (f *formatter) JSONType(column, path string) []byte {
 	var sql []byte
 	sql = append(sql, "jsonb_typeof("...)

ee/sqlstore/postgressqlstore/formatter_test.go

@@ -55,6 +55,67 @@ func TestJSONExtractString(t *testing.T) {
 	}
 }
 
+func TestJSONExtractMapValue(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		mapField string
+		key      string
+		expected string
+	}{
+		{
+			name:     "PlainKey",
+			column:   "data",
+			mapField: "labels",
+			key:      "team",
+			expected: `"data"::jsonb->'labels'->>'team'`,
+		},
+		{
+			name:     "DottedKey_OneMapEntry",
+			column:   "data",
+			mapField: "labels",
+			key:      "k8s.cluster",
+			expected: `"data"::jsonb->'labels'->>'k8s.cluster'`,
+		},
+		{
+			name:     "SingleQuoteInKey_Doubled",
+			column:   "data",
+			mapField: "labels",
+			key:      "o'brien",
+			expected: `"data"::jsonb->'labels'->>'o''brien'`,
+		},
+		{
+			name:     "BackslashInKey_Literal",
+			column:   "data",
+			mapField: "labels",
+			key:      `a\b`,
+			expected: `"data"::jsonb->'labels'->>'a\b'`,
+		},
+		{
+			name:     "DoubleQuoteInKey_Literal",
+			column:   "data",
+			mapField: "labels",
+			key:      `a"b`,
+			expected: `"data"::jsonb->'labels'->>'a"b'`,
+		},
+		{
+			name:     "QualifiedColumn",
+			column:   "rule.data",
+			mapField: "labels",
+			key:      "severity",
+			expected: `"rule"."data"::jsonb->'labels'->>'severity'`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.JSONExtractMapValue(tt.column, tt.mapField, tt.key))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
 func TestJSONType(t *testing.T) {
 	tests := []struct {
 		name     string

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

@@ -41,6 +41,8 @@ import type {
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
 	ListRules200,
+	ListRulesV3200,
+	ListRulesV3Params,
 	PatchRuleByID200,
 	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
@@ -73,7 +75,8 @@ const withQueryKey = <T extends object, K>(
 };
 
 /**
- * This endpoint lists all alert rules with their current evaluation state
+ * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
+ * @deprecated
  * @summary List alert rules
  */
 export const listRules = (signal?: AbortSignal) => {
@@ -115,6 +118,7 @@ export type ListRulesQueryResult = NonNullable<
 export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary List alert rules
  */
 
@@ -134,6 +138,7 @@ export function useListRules<
 }
 
 /**
+ * @deprecated
  * @summary List alert rules
  */
 export const invalidateListRules = async (
@@ -1388,3 +1393,97 @@ export const useTestRule = <
 > => {
 	return useMutation(getTestRuleMutationOptions(options));
 };
+/**
+ * Returns a page of alert rules with their current evaluation state, trimmed to the fields the list page renders. Supports a filter DSL (`query`), a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). In the filter DSL, a non-reserved key is matched as a rule label directly (`team = infra`); a key that collides with a reserved keyword matches either interpretation (negative operators exclude both), and `labels.<key>` targets only the label. The response also carries the org's label pairs and the reserved filter keys for building filter suggestions.
+ * @summary List alert rules (v3)
+ */
+export const listRulesV3 = (
+	params?: ListRulesV3Params,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListRulesV3200>({
+		url: `/api/v3/rules`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getListRulesV3QueryKey = (params?: ListRulesV3Params) => {
+	return [`/api/v3/rules`, ...(params ? [params] : [])] as const;
+};
+
+export const getListRulesV3QueryOptions = <
+	TData = Awaited<ReturnType<typeof listRulesV3>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListRulesV3Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listRulesV3>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListRulesV3QueryKey(params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRulesV3>>> = ({
+		signal,
+	}) => listRulesV3(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listRulesV3>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListRulesV3QueryResult = NonNullable<
+	Awaited<ReturnType<typeof listRulesV3>>
+>;
+export type ListRulesV3QueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List alert rules (v3)
+ */
+
+export function useListRulesV3<
+	TData = Awaited<ReturnType<typeof listRulesV3>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListRulesV3Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listRulesV3>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListRulesV3QueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary List alert rules (v3)
+ */
+export const invalidateListRulesV3 = async (
+	queryClient: QueryClient,
+	params?: ListRulesV3Params,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListRulesV3QueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};

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

@@ -10188,6 +10188,99 @@ export interface RuletypesGettableTestRuleDTO {
 	message?: string;
 }
 
+export interface RuletypesLabelPairDTO {
+	/**
+	 * @type string
+	 */
+	key: string;
+	/**
+	 * @type string
+	 */
+	value: string;
+}
+
+export enum RuletypesListOrderDTO {
+	asc = 'asc',
+	desc = 'desc',
+}
+export enum RuletypesListSortDTO {
+	updated_at = 'updated_at',
+	created_at = 'created_at',
+	name = 'name',
+	state = 'state',
+	severity = 'severity',
+}
+export type RuletypesListableRuleDTOLabels = { [key: string]: string };
+
+export enum RuletypesRuleTypeDTO {
+	threshold_rule = 'threshold_rule',
+	promql_rule = 'promql_rule',
+	anomaly_rule = 'anomaly_rule',
+}
+export interface RuletypesListableRuleDTO {
+	/**
+	 * @type string
+	 */
+	alert: string;
+	alertType: RuletypesAlertTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type boolean
+	 */
+	disabled?: boolean;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type object
+	 */
+	labels?: RuletypesListableRuleDTOLabels;
+	ruleType: RuletypesRuleTypeDTO;
+	state: RuletypesAlertStateDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export interface RuletypesListableRulesDTO {
+	/**
+	 * @type array
+	 */
+	labels: RuletypesLabelPairDTO[];
+	/**
+	 * @type array
+	 */
+	reservedKeywords: string[];
+	/**
+	 * @type array
+	 */
+	rules: RuletypesListableRuleDTO[];
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	total: number;
+}
+
 export interface RuletypesRenotifyDTO {
 	/**
 	 * @type array,null
@@ -10284,11 +10377,6 @@ export interface RuletypesRuleConditionDTO {
 	thresholds?: RuletypesRuleThresholdDataDTO;
 }
 
-export enum RuletypesRuleTypeDTO {
-	threshold_rule = 'threshold_rule',
-	promql_rule = 'promql_rule',
-	anomaly_rule = 'anomaly_rule',
-}
 export interface RuletypesPostableRuleDTO {
 	/**
 	 * @type string
@@ -14189,6 +14277,45 @@ export type GetMetricDashboardsV2200 = {
 	status: string;
 };
 
+export type ListRulesV3Params = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	query?: string;
+	/**
+	 * @type array
+	 * @description undefined
+	 */
+	states?: string[];
+	/**
+	 * @description undefined
+	 */
+	sort?: RuletypesListSortDTO;
+	/**
+	 * @description undefined
+	 */
+	order?: RuletypesListOrderDTO;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	limit?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	offset?: number;
+};
+
+export type ListRulesV3200 = {
+	data: RuletypesListableRulesDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetFlamegraphPathParameters = {
 	traceID: string;
 };

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -2,6 +2,8 @@
 	display: flex;
 	flex-direction: row;
 	position: relative;
+	flex: 1;
+	min-height: 0;
 
 	.quick-filters-settings-container {
 		flex: 0 0 0;

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss

@@ -0,0 +1,33 @@
+// The one `overflow: hidden` in the chain. Ancestors (RouteTab, AppLayout)
+// only hand height down; each pane below owns its own scroll.
+.layout {
+	display: flex;
+	flex: 1;
+	height: 100%;
+	min-height: 0;
+	overflow: hidden;
+}
+
+// Positioned so overlays (settings drawer) paint above the content pane
+// without changing this pane's layout width.
+.filters {
+	width: 280px;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	position: relative;
+	overflow: visible;
+	z-index: 2;
+}
+
+// Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
+// `height: 100%`), which owns the scrolling.
+.content {
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -0,0 +1,54 @@
+import { ComponentProps, ReactNode } from 'react';
+import cx from 'classnames';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+
+import QuickFilters from '../QuickFilters';
+
+import styles from './QuickFiltersLayout.module.scss';
+
+// Same optionality as `<QuickFilters />` in JSX (honours its defaultProps).
+type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
+	typeof QuickFilters,
+	ComponentProps<typeof QuickFilters>
+>;
+
+export interface QuickFiltersLayoutProps {
+	quickFilterProps: QuickFiltersElementProps;
+	showFilters: boolean;
+	className?: string;
+	contentClassName?: string;
+	testId?: string;
+	children: ReactNode;
+}
+
+function QuickFiltersLayout({
+	quickFilterProps,
+	showFilters,
+	className,
+	contentClassName,
+	testId,
+	children,
+}: QuickFiltersLayoutProps): JSX.Element {
+	return (
+		<div className={cx(styles.layout, className)} data-testid={testId}>
+			{showFilters && (
+				<aside
+					className={styles.filters}
+					data-testid="quick-filters-layout-filters"
+				>
+					<QuickFilters {...quickFilterProps} />
+				</aside>
+			)}
+			<section
+				className={cx(styles.content, contentClassName)}
+				data-testid="quick-filters-layout-content"
+			>
+				<OverlayScrollbar>
+					<div>{children}</div>
+				</OverlayScrollbar>
+			</section>
+		</div>
+	);
+}
+
+export default QuickFiltersLayout;

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../types';
+import QuickFiltersLayout from '../QuickFiltersLayout';
+
+jest.mock('../QuickFiltersLayout.module.scss', () => ({
+	__esModule: true,
+	default: {
+		layout: 'layout',
+		filters: 'filters',
+		content: 'content',
+	},
+}));
+
+jest.mock('../../QuickFilters', () => ({
+	__esModule: true,
+	default: ({ source }: { source: string }): JSX.Element => (
+		<div data-testid="quick-filters">{source}</div>
+	),
+}));
+
+const quickFilterProps = {
+	source: QuickFiltersSource.TRACES_EXPLORER,
+	handleFilterVisibilityChange: jest.fn(),
+};
+
+describe('QuickFiltersLayout', () => {
+	it('renders QuickFilters with the given props inside the filters pane', () => {
+		render(
+			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		const filtersPane = screen.getByTestId('quick-filters-layout-filters');
+		expect(filtersPane).toContainElement(screen.getByTestId('quick-filters'));
+		expect(screen.getByTestId('quick-filters')).toHaveTextContent(
+			QuickFiltersSource.TRACES_EXPLORER,
+		);
+		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
+			'content',
+		);
+	});
+
+	it('does not render the filters pane when showFilters is false', () => {
+		render(
+			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		expect(
+			screen.queryByTestId('quick-filters-layout-filters'),
+		).not.toBeInTheDocument();
+		expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
+		expect(screen.getByText('content')).toBeInTheDocument();
+	});
+
+	it('merges classNames onto the root and content panes', () => {
+		render(
+			<QuickFiltersLayout
+				showFilters
+				quickFilterProps={quickFilterProps}
+				className="page-root"
+				contentClassName="page-content"
+				testId="page"
+			>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		const root = screen.getByTestId('page');
+		expect(root).toHaveClass('layout', 'page-root');
+		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
+			'content',
+			'page-content',
+		);
+	});
+});

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -6,27 +6,12 @@
 	left: 0;
 	z-index: 999;
 	width: 342px;
+	height: 100%;
 	background: var(--l1-background);
 	transition: width 0.05s ease-in-out;
 	overflow: hidden;
 	color: var(--l1-foreground);
 
-	&.qf-logs-explorer {
-		height: calc(100vh - 45px);
-	}
-
-	&.qf-exceptions {
-		height: 100vh;
-	}
-
-	&.qf-api-monitoring {
-		height: calc(100vh - 45px);
-	}
-
-	&.qf-traces-explorer {
-		height: calc(100vh - 45px);
-	}
-
 	&.hidden {
 		width: 0;
 	}

frontend/src/components/RouteTab/RouteTab.module.scss

@@ -0,0 +1,38 @@
+// Hands the parent's height down to the active pane and lets the pane scroll
+// its own content, so TopNav and the tab bar stay put. Child combinators only
+// (nested Tabs must not be caught).
+.routeTab {
+	flex: 1;
+	min-height: 0;
+}
+
+.routeTab > :global(.ant-tabs-content-holder) {
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab > :global(.ant-tabs-content-holder) > :global(.ant-tabs-content) {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab
+	> :global(.ant-tabs-content-holder)
+	> :global(.ant-tabs-content)
+	> :global(.ant-tabs-tabpane-active) {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab
+	> :global(.ant-tabs-content-holder)
+	> :global(.ant-tabs-content)
+	> :global(.ant-tabs-tabpane-active)
+	> :global(.overlay-scrollbar) {
+	flex: 1;
+	min-height: 0;
+}

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -5,6 +5,11 @@ import { fireEvent, render, screen } from 'tests/test-utils';
 import RouteTab from './index';
 import { RouteTabProps } from './types';
 
+jest.mock('./RouteTab.module.scss', () => ({
+	__esModule: true,
+	default: { routeTab: 'routeTab' },
+}));
+
 function DummyComponent1(): JSX.Element {
 	return <div>Dummy Component 1</div>;
 }
@@ -74,6 +79,36 @@ describe('RouteTab component', () => {
 		expect(history.location.pathname).toBe('/tab2');
 	});
 
+	it('applies the layout class alongside a custom className', () => {
+		const history = createMemoryHistory();
+		const { container } = render(
+			<Router history={history}>
+				<RouteTab
+					history={history}
+					routes={testRoutes}
+					activeKey="Tab1"
+					className="custom-tabs"
+				/>
+			</Router>,
+		);
+		expect(container.querySelector('.ant-tabs')).toHaveClass(
+			'routeTab',
+			'custom-tabs',
+		);
+	});
+
+	it('renders the active tab content inside an overlay scrollbar', () => {
+		const history = createMemoryHistory();
+		const { container } = render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
+			</Router>,
+		);
+		expect(
+			container.querySelector('.ant-tabs-tabpane-active > .overlay-scrollbar'),
+		).toHaveTextContent('Dummy Component 1');
+	});
+
 	it('calls onChangeHandler on tab change', () => {
 		const onChangeHandler = jest.fn();
 		const history = createMemoryHistory();

frontend/src/components/RouteTab/index.tsx

@@ -5,20 +5,32 @@ import {
 	useParams,
 } from 'react-router-dom';
 import { Tabs, TabsProps } from 'antd';
+import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 
 import { RouteTabProps } from './types';
 
+import styles from './RouteTab.module.scss';
+
 interface Params {
 	[key: string]: string;
 }
 
+/**
+ * Each pane scrolls its own content inside an OverlayScrollbar, so the tab bar
+ * stays put. Mounted as the page root the pane is bounded to the viewport; inside
+ * a plain block wrapper the scroller is inert and the page scrolls as usual.
+ * Pane content that needs a bounded box must size itself with `height: 100%`
+ * (the scroller's viewport is block flow, so `flex: 1` has no effect there).
+ */
 function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
 	history,
 	showRightSection,
+	className,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const params = useParams<Params>();
@@ -50,11 +62,16 @@ function RouteTab({
 		label: name,
 		key,
 		tabKey: route,
-		children: <Component />,
+		children: (
+			<OverlayScrollbar>
+				<Component />
+			</OverlayScrollbar>
+		),
 	}));
 
 	return (
 		<Tabs
+			className={cx(styles.routeTab, className)}
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}

frontend/src/constants/theme.ts

@@ -129,6 +129,10 @@ const themeColors = {
 		salmon2: '#FFAB91',
 		salmon3: '#E0876A',
 	},
+	/* Series palette (dark). Hues in the red band are deliberately absent: red is
+	   reserved for thresholds and error states, so an arbitrary series must never
+	   claim it. generateColor indexes by `hash % Object.keys(...).length`, so
+	   adding or removing an entry recolors every existing chart. */
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',
@@ -152,13 +156,13 @@ const themeColors = {
 
 		// Oranges (3)
 		festivalOrange: '#F2994A',
-		coralOrange: '#E17055',
+		amber1: '#E1A155',
 		pumpkin: '#FF7F50',
 
-		// Reds (3)
-		radicalRed: '#FF1A66',
-		crimsonRed: '#EB5757',
-		fireRed: '#E10600',
+		// Olives / Greens (3)
+		olive1: '#DFC33A',
+		olive2: '#D5E55D',
+		green7: '#81C220',
 
 		// Pinks (3)
 		hotPink: '#E84393',
@@ -191,9 +195,9 @@ const themeColors = {
 		orange1: '#D35400',
 		orange2: '#E67E22',
 		orange3: '#F5B041',
-		red1: '#C0392B',
-		red2: '#E74C3C',
-		red3: '#EC7063',
+		green8: '#5AC02B',
+		green9: '#48E043',
+		green10: '#68E788',
 		pink1: '#D81B60',
 		pink2: '#E91E63',
 		pink3: '#F06292',
@@ -212,9 +216,9 @@ const themeColors = {
 		coral1: '#E67E22',
 		coral2: '#F39C12',
 		coral3: '#F5B041',
-		crimson1: '#C0392B',
-		crimson2: '#E74C3C',
-		crimson3: '#EC7063',
+		teal7: '#2BC07B',
+		teal8: '#43E0C5',
+		teal9: '#68D9E7',
 		violet1: '#8E44AD',
 		violet2: '#9B59B6',
 		violet3: '#BB8FCE',
@@ -224,18 +228,18 @@ const themeColors = {
 		forest1: '#27AE60',
 		forest2: '#2ECC71',
 		forest3: '#58D68D',
-		blush1: '#FF6F91',
+		cyan4: '#83C2EB',
 		blush2: '#FF85A2',
 		blush3: '#FFA0B3',
 		lavender1: '#9B59B6',
 		lavender2: '#AF7AC5',
 		lavender3: '#C39BD3',
-		tomato1: '#E74C3C',
-		tomato2: '#EC7063',
-		tomato3: '#F1948A',
-		salmon1: '#FF6B6B',
-		salmon2: '#FF8787',
-		salmon3: '#FFA1A1',
+		blue7: '#4375E0',
+		blue8: '#686DE7',
+		indigo1: '#A68EED',
+		indigo2: '#B980EA',
+		purple6: '#EE98D9',
+		olive3: '#F2F0AE',
 		mustard1: '#F1C40F',
 		mustard2: '#F7DC6F',
 		mustard3: '#F9E79F',
@@ -254,9 +258,9 @@ const themeColors = {
 		blue4: '#2874A6',
 		blue5: '#2E86C1',
 		blue6: '#3498DB',
-		red4: '#C0392B',
-		red5: '#E74C3C',
-		red6: '#EC7063',
+		purple4: '#A52BC0',
+		purple5: '#E043D0',
+		magenta4: '#E768B5',
 		orange4: '#D35400',
 		orange5: '#E67E22',
 		orange6: '#EB984E',
@@ -267,18 +271,19 @@ const themeColors = {
 		gold5: '#F1C40F',
 		gold6: '#F4D03F',
 	},
+	/* Series palette (light). Same red-free constraint as chartcolors above. */
 	lightModeColor: {
-		radicalRed: '#D81B60',
+		magenta1: '#D81B60',
 
 		dodgerBlueDark: '#1E5BD9',
 		steelgrey: '#344B6B',
 		steelpurple: '#5E548E',
 		steelindigo: '#8E4A7C',
 		steelpink: '#B63A6F',
-		steelcoral: '#E14B5A',
+		amber1: '#E1A14B',
 		steelorange: '#E76F2F',
 		steelgold: '#E09B00',
-		steelrust: '#C93A50',
+		olive1: '#C9BD3A',
 		steelgreen: '#2F7D69',
 
 		mediumOrchidDark: '#8E24AA',
@@ -286,17 +291,17 @@ const themeColors = {
 		seaGreen: '#1E7F5A',
 		turquoiseBlueDark: '#007EA7',
 		silverDark: '#5F5F5F',
-		outrageousOrangeDark: '#E64A19',
-		roseBudDark: '#D84315',
+		green1: '#ACDB24',
+		green2: '#66CC21',
 		deepSkyBlueDark: '#0277BD',
 		royalBlue: '#2A4FDB',
 
 		avocadoDark: '#6B6B1E',
 		mintGreenDark: '#2E9E55',
-		chestnut: '#8B3A3A',
+		green3: '#3F8B3A',
 		limaDark: '#5C7F00',
 		olive: '#6E7F00',
-		beautyBushDark: '#C93C3C',
+		green4: '#3CC964',
 
 		danube: '#4F6FB3',
 		oliveDrab: '#4F7F1A',
@@ -304,13 +309,13 @@ const themeColors = {
 		electricLimeDark: '#6B8F00',
 		robin: '#2F4FCC',
 
-		harleyOrange: '#CC2E12',
+		teal1: '#1FBF83',
 		gladeGreen: '#4F7F46',
 		hemlock: '#5C5C45',
 		vidaLoca: '#3D6B00',
 		rust: '#993300',
 
-		red: '#C62828',
+		teal2: '#28C6C1',
 		blue: '#1A237E',
 		green: '#1B7F3A',
 		purple: '#6A1B9A',
@@ -320,7 +325,7 @@ const themeColors = {
 		brown: '#7A3A1E',
 		teal: '#006D6F',
 		limeDark: '#4C8C2B',
-		maroon: '#6D1B1B',
+		cyan1: '#1B546D',
 		navy: '#0D1B5E',
 		gray: '#616161',
 
@@ -328,25 +333,25 @@ const themeColors = {
 		indigo: '#303F9F',
 		slateGray: '#556B7C',
 		chocolate: '#9C4A1A',
-		tomato: '#E53935',
+		blue1: '#3B74DF',
 		steelBlue: '#3A6EA5',
 
 		peruDark: '#B35E00',
 		darkOliveGreen: '#445B1F',
-		indianRed: '#B04040',
+		blue2: '#4041B0',
 		mediumSlateBlue: '#5C6BC0',
-		rosyBrownDark: '#A94444',
+		indigo1: '#6644A9',
 		darkSlateGray: '#2E4A4A',
 
 		fuchsia: '#C511C5',
-		salmonDark: '#E64A3C',
-		darkSalmonDark: '#C85A3A',
+		indigo2: '#AD42E0',
+		purple1: '#C83AC5',
 		paleVioletRedDark: '#C2186A',
 
 		mediumPurple: '#7E57C2',
 		darkOrchid: '#7B1FA2',
 		mediumSeaGreenDark: '#2E8B57',
-		lightCoralDark: '#E57373',
+		purple2: '#E573BC',
 
 		gold: '#D4AF37',
 		sandyBrownDark: '#C76A15',

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

@@ -1,23 +1,15 @@
-.api-monitoring-page {
-	display: flex;
-	height: 100%;
+.api-monitoring-explorer {
+	.api-quick-filters-header {
+		padding: 12px;
+		border-bottom: 1px solid var(--l1-border);
+		border-right: 1px solid var(--l1-border);
 
-	.api-quick-filter-left-section {
-		width: 0%;
-		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		gap: 6px;
 
-		.api-quick-filters-header {
-			padding: 12px;
-			border-bottom: 1px solid var(--l1-border);
-			border-right: 1px solid var(--l1-border);
-
-			display: flex;
-			align-items: center;
-			gap: 6px;
-
-			font-size: 14px;
-			line-height: 18px;
-		}
+		font-size: 14px;
+		line-height: 18px;
 	}
 
 	.api-module-right-section {
@@ -161,16 +153,6 @@
 			}
 		}
 	}
-
-	&.filter-visible {
-		.api-quick-filter-left-section {
-			width: 260px;
-		}
-
-		.api-module-right-section {
-			width: calc(100% - 260px);
-		}
-	}
 }
 
 .no-filtered-domains-message-container {

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -1,8 +1,7 @@
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
@@ -20,20 +19,21 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div className={cx('api-monitoring-page', 'filter-visible')}>
-				<section className="api-quick-filter-left-section">
-					<QuickFilters
-						className="qf-api-monitoring"
-						source={QuickFiltersSource.API_MONITORING}
-						signal={SignalType.API_MONITORING}
-						showFilterCollapse={false}
-						showQueryName={false}
-						handleFilterVisibilityChange={(): void => {}}
-						useFieldApis={quickFilterFieldApis}
-					/>
-				</section>
+			<QuickFiltersLayout
+				className="api-monitoring-explorer"
+				showFilters
+				quickFilterProps={{
+					className: 'qf-api-monitoring',
+					source: QuickFiltersSource.API_MONITORING,
+					signal: SignalType.API_MONITORING,
+					showFilterCollapse: false,
+					showQueryName: false,
+					handleFilterVisibilityChange: (): void => {},
+					useFieldApis: quickFilterFieldApis,
+				}}
+			>
 				<DomainList />
-			</div>
+			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>
 	);
 }

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

@@ -65,8 +65,6 @@
 }
 
 .trace-explorer-page {
-	display: flex;
-
 	// Meant to fix the query builder colors
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);
@@ -75,32 +73,8 @@
 	--input-hover-border-color: var(--internal-ant-border-color-hover);
 	--input-focus-border-color: var(--internal-ant-border-color-hover);
 
-	.filter {
-		width: 260px;
-		height: 100%;
-		min-height: 100vh;
-
-		border-right: 0px;
-		border: 1px solid var(--l1-border);
-		background-color: var(--l1-background);
-
-		> .ant-card-body {
-			padding: 0;
-			width: 258px;
-		}
-	}
-
 	.trace-explorer {
-		width: 100%;
 		background: var(--l1-background);
-
-		> .ant-card-body {
-			padding: 0;
-		}
-
 		border-color: var(--l1-border);
 	}
-	.trace-explorer.filters-expanded {
-		width: calc(100% - 260px);
-	}
 }

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -2,12 +2,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
-import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -188,26 +186,21 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div
+			<QuickFiltersLayout
 				className="trace-explorer-page"
-				data-testid="llm-observability-explorer"
+				testId="llm-observability-explorer"
+				showFilters={isOpen}
+				quickFilterProps={{
+					className: 'qf-traces-explorer',
+					source: QuickFiltersSource.AI_OBSERVABILITY,
+					signal: SignalType.AI_OBSERVABILITY,
+					useFieldApis: quickFiltersFieldApis,
+					handleFilterVisibilityChange: (): void => {
+						setOpen(!isOpen);
+					},
+				}}
 			>
-				<Card className="filter" hidden={!isOpen}>
-					<QuickFilters
-						className="qf-traces-explorer"
-						source={QuickFiltersSource.AI_OBSERVABILITY}
-						signal={SignalType.AI_OBSERVABILITY}
-						useFieldApis={quickFiltersFieldApis}
-						handleFilterVisibilityChange={(): void => {
-							setOpen(!isOpen);
-						}}
-					/>
-				</Card>
-				<div
-					className={cx('trace-explorer', {
-						'filters-expanded': isOpen,
-					})}
-				>
+				<div className="trace-explorer">
 					<div className="trace-explorer-header">
 						<Toolbar
 							showAutoRefresh
@@ -291,7 +284,7 @@ function Explorer(): JSX.Element {
 						)}
 					</div>
 				</div>
-			</div>
+			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>
 	);
 }

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

@@ -1,18 +1,7 @@
 .meter-explorer-container {
-	display: flex;
-	flex-direction: row;
-
-	.meter-explorer-quick-filters-section {
-		width: 280px;
-		border-right: 1px solid var(--l1-border);
-
-		&.hidden {
-			display: none;
-		}
-	}
-
 	.meter-explorer-content-section {
-		width: 100%;
+		// Clearance for the fixed ExplorerOptions bar.
+		padding-bottom: 80px;
 
 		// Meant to fix the query builder colors
 		--input-background: var(--l2-background);
@@ -83,14 +72,6 @@
 			}
 		}
 	}
-
-	&.quick-filters-open {
-		.meter-explorer-content-section {
-			width: calc(100% - 280px);
-		}
-	}
-
-	padding-bottom: 80px;
 }
 
 .dashboards-and-alerts-popover-container {

frontend/src/container/MeterExplorer/Explorer/Explorer.tsx

@@ -3,9 +3,8 @@ import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
@@ -121,29 +120,21 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div
-				className={cx('meter-explorer-container', {
-					'quick-filters-open': showQuickFilters,
-				})}
+			<QuickFiltersLayout
+				className="meter-explorer-container"
+				showFilters={showQuickFilters}
+				quickFilterProps={{
+					className: 'qf-meter-explorer',
+					source: QuickFiltersSource.METER_EXPLORER,
+					signal: SignalType.METER_EXPLORER,
+					showFilterCollapse: true,
+					showQueryName: false,
+					handleFilterVisibilityChange: (): void => {
+						setShowQuickFilters(!showQuickFilters);
+					},
+					useFieldApis: quickFilterFieldApis,
+				}}
 			>
-				<div
-					className={cx('meter-explorer-quick-filters-section', {
-						hidden: !showQuickFilters,
-					})}
-				>
-					<QuickFilters
-						className="qf-meter-explorer"
-						source={QuickFiltersSource.METER_EXPLORER}
-						signal={SignalType.METER_EXPLORER}
-						showFilterCollapse
-						showQueryName={false}
-						handleFilterVisibilityChange={(): void => {
-							setShowQuickFilters(!showQuickFilters);
-						}}
-						useFieldApis={quickFilterFieldApis}
-					/>
-				</div>
-
 				<div className="meter-explorer-content-section">
 					<div className="meter-explorer-explore-content">
 						<div className="explore-header">
@@ -196,7 +187,7 @@ function Explorer(): JSX.Element {
 						splitedQueries={splitedQueries}
 					/>
 				</div>
-			</div>
+			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss

@@ -60,9 +60,6 @@
 	.metrics-table-container {
 		padding-bottom: 48px;
 		.ant-table {
-			margin-left: -16px;
-			margin-right: -16px;
-
 			.ant-table-thead > tr > th {
 				padding: 12px;
 				font-weight: 500;

frontend/src/container/SideNav/NavItem/NavItem.styles.scss

@@ -114,8 +114,4 @@
 			}
 		}
 	}
-
-	.beta-tag {
-		padding-right: 0;
-	}
 }

frontend/src/container/SideNav/NavItem/NavItem.tsx

@@ -51,7 +51,7 @@ export default function NavItem({
 			data-testid={dataTestId}
 		>
 			{showIcon && <div className="nav-item-active-marker" />}
-			<div className={cx('nav-item-data', isBeta ? 'beta-tag' : '')}>
+			<div className="nav-item-data">
 				{showIcon && (
 					<div className={cx('nav-item-icon', isEarlyAccess ? 'noz-wave' : '')}>
 						{icon}

frontend/src/lib/query/__tests__/panelTypeDataSourceFormValuesMap.test.ts

@@ -0,0 +1,135 @@
+import {
+	type BuilderField,
+	panelTypeDataSourceFormValuesMap,
+	type PartialPanelTypes,
+} from 'lib/query/panelTypeDataSourceFormValuesMap';
+import { isStaticPanelKind } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
+import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { DataSource } from 'types/common/queryBuilder';
+
+/**
+ * The map is composed from a few shape rules rather than spelled out per panel type
+ * and data source. These specs pin the rules themselves — each one fails only when a
+ * rule changes, which is the moment to stop and decide, rather than whenever any
+ * field moves.
+ *
+ * The composition it replaced was checked cell by cell against the previous literal
+ * table, which is in git history at `main:frontend/src/lib/query/panelQuery.ts`.
+ */
+function fieldsFor(
+	panelType: keyof PartialPanelTypes,
+	dataSource: DataSource,
+): BuilderField[] {
+	return panelTypeDataSourceFormValuesMap[panelType][dataSource].builder
+		.queryData;
+}
+
+/** Fields present in `to` but not in `from`. */
+function added(from: BuilderField[], to: BuilderField[]): BuilderField[] {
+	return to.filter((field) => !from.includes(field)).sort();
+}
+
+/** Panel types built on the aggregating field list. */
+const AGGREGATING_TYPES: (keyof PartialPanelTypes)[] = [
+	PANEL_TYPES.AREA,
+	PANEL_TYPES.BAR,
+	PANEL_TYPES.HISTOGRAM,
+	PANEL_TYPES.TABLE,
+	PANEL_TYPES.PIE,
+];
+
+/** Panel types that reduce each series to one cell or slice. */
+const SCALAR_TYPES: (keyof PartialPanelTypes)[] = [
+	PANEL_TYPES.TABLE,
+	PANEL_TYPES.PIE,
+];
+
+describe('panelTypeDataSourceFormValuesMap', () => {
+	const seriesLogs = fieldsFor(PANEL_TYPES.TIME_SERIES, DataSource.LOGS);
+	const seriesMetrics = fieldsFor(PANEL_TYPES.TIME_SERIES, DataSource.METRICS);
+
+	// A kind with no entry throws on switch: handleQueryChange reads
+	// map[panelType][dataSource] straight through, and the cast at its call site
+	// hides the gap. Static kinds return before that call, so they are exempt.
+	it('covers every panel kind that can be switched to', () => {
+		const uncovered = Object.entries(PANEL_KIND_TO_PANEL_TYPE)
+			.filter(([kind]) => !isStaticPanelKind(kind as never))
+			.map(([, panelType]) => panelType)
+			.filter((panelType) => !(panelType in panelTypeDataSourceFormValuesMap));
+
+		expect(uncovered).toStrictEqual([]);
+	});
+
+	it('shares one builder surface between logs and traces', () => {
+		Object.values(panelTypeDataSourceFormValuesMap).forEach((sources) => {
+			expect(sources[DataSource.LOGS].builder.queryData).toStrictEqual(
+				sources[DataSource.TRACES].builder.queryData,
+			);
+		});
+	});
+
+	// The provider pushes onto the list it reads from this map, so two cells backed by
+	// one instance would leak fields into each other.
+	it('gives every cell its own array instance', () => {
+		const arrays = Object.values(panelTypeDataSourceFormValuesMap).flatMap(
+			(sources) =>
+				Object.values(sources).map((source) => source.builder.queryData),
+		);
+
+		expect(new Set(arrays).size).toBe(arrays.length);
+	});
+
+	// One consequence of composing: the aggregating types share a single field list, so
+	// an edit meant for charts reaches table and pie too.
+	it.each(AGGREGATING_TYPES)(
+		'gives %s the same non-metrics fields as a time series',
+		(panelType) => {
+			expect(fieldsFor(panelType, DataSource.LOGS)).toStrictEqual(seriesLogs);
+		},
+	);
+
+	it('adds both metrics aggregation steps for metrics', () => {
+		expect(added(seriesLogs, seriesMetrics)).toStrictEqual([
+			'spaceAggregation',
+			'timeAggregation',
+		]);
+	});
+
+	it.each(SCALAR_TYPES)('offers reduceTo to %s on metrics only', (panelType) => {
+		expect(
+			added(seriesMetrics, fieldsFor(panelType, DataSource.METRICS)),
+		).toStrictEqual(['reduceTo']);
+		expect(fieldsFor(panelType, DataSource.LOGS)).not.toContain('reduceTo');
+	});
+
+	it('drops grouping, paging and ordering for a single value', () => {
+		const value = fieldsFor(PANEL_TYPES.VALUE, DataSource.LOGS);
+
+		expect(added(value, seriesLogs)).toStrictEqual([
+			'groupBy',
+			'limit',
+			'orderBy',
+		]);
+		expect(value).toContain('reduceTo');
+	});
+
+	it('offers no aggregation fields to raw rows', () => {
+		const rows = fieldsFor(PANEL_TYPES.LIST, DataSource.LOGS);
+
+		expect(rows).not.toContain('aggregateAttribute');
+		expect(rows).not.toContain('aggregateOperator');
+		expect(rows).not.toContain('groupBy');
+		expect(rows).not.toContain('having');
+		expect(rows).not.toContain('stepInterval');
+	});
+
+	it('drops paging and ordering for metrics rows', () => {
+		expect(
+			added(
+				fieldsFor(PANEL_TYPES.LIST, DataSource.METRICS),
+				fieldsFor(PANEL_TYPES.LIST, DataSource.LOGS),
+			),
+		).toStrictEqual(['functions', 'limit', 'orderBy']);
+	});
+});

frontend/src/lib/query/panelQuery.ts

@@ -1,7 +1,7 @@
 /**
  * Panel query shaping shared by the dashboard panel editor and the query
- * builder: the per-panel-type field allowlist, the panel-type switch, and the
- * dirty-check used to decide whether a panel has unsaved query edits.
+ * builder: the panel-type switch and the dirty-check used to decide whether a
+ * panel has unsaved query edits.
  */
 import {
 	initialQueryBuilderFormValuesMap,
@@ -9,7 +9,11 @@ import {
 } from 'constants/queryBuilder';
 import { cloneDeep, isEqual, set, unset } from 'lodash-es';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
+
+import {
+	panelTypeDataSourceFormValuesMap,
+	PartialPanelTypes,
+} from 'lib/query/panelTypeDataSourceFormValuesMap';
 
 // Asks "would saving the current panel change the persisted widget spec?".
 //
@@ -91,453 +95,6 @@ export const getIsQueryModified = (
 	);
 };
 
-export type PartialPanelTypes = {
-	[PANEL_TYPES.BAR]: 'bar';
-	[PANEL_TYPES.LIST]: 'list';
-	[PANEL_TYPES.TABLE]: 'table';
-	[PANEL_TYPES.TIME_SERIES]: 'graph';
-	[PANEL_TYPES.VALUE]: 'value';
-	[PANEL_TYPES.PIE]: 'pie';
-	[PANEL_TYPES.HISTOGRAM]: 'histogram';
-};
-
-export const panelTypeDataSourceFormValuesMap: Record<
-	keyof PartialPanelTypes,
-	Record<DataSource, any>
-> = {
-	[PANEL_TYPES.BAR]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'legend',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'disabled',
-					'functions',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'legend',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-	},
-	[PANEL_TYPES.TIME_SERIES]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'legend',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'disabled',
-					'functions',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'legend',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-	},
-	[PANEL_TYPES.HISTOGRAM]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'legend',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'disabled',
-					'functions',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'legend',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-	},
-	[PANEL_TYPES.TABLE]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'expression',
-					'legend',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'reduceTo',
-					'limit',
-					'having',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'expression',
-					'disabled',
-					'functions',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'expression',
-					'legend',
-					'aggregations',
-				],
-			},
-		},
-	},
-	[PANEL_TYPES.PIE]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'expression',
-					'legend',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'reduceTo',
-					'limit',
-					'having',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'expression',
-					'disabled',
-					'functions',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'expression',
-					'legend',
-					'aggregations',
-				],
-			},
-		},
-	},
-	[PANEL_TYPES.LIST]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'queryName',
-					'filters',
-					'filter',
-					'limit',
-					'orderBy',
-					'functions',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: ['queryName', 'filters', 'filter', 'aggregations'],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'queryName',
-					'filters',
-					'filter',
-					'limit',
-					'orderBy',
-					'functions',
-					'aggregations',
-				],
-			},
-		},
-	},
-	[PANEL_TYPES.VALUE]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'reduceTo',
-					'having',
-					'functions',
-					'stepInterval',
-					'queryName',
-					'expression',
-					'disabled',
-					'legend',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'having',
-					'reduceTo',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'expression',
-					'disabled',
-					'functions',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'reduceTo',
-					'having',
-					'functions',
-					'stepInterval',
-					'queryName',
-					'expression',
-					'disabled',
-					'legend',
-					'aggregations',
-				],
-			},
-		},
-	},
-};
-
 export function handleQueryChange(
 	newPanelType: keyof PartialPanelTypes,
 	supersetQuery: Query,
@@ -555,7 +112,7 @@ export function handleQueryChange(
 					panelTypeDataSourceFormValuesMap[newPanelType][dataSource].builder
 						.queryData;
 
-				fieldsToSelect.forEach((field: keyof IBuilderQuery) => {
+				fieldsToSelect.forEach((field) => {
 					set(tempQuery, field, supersetQuery.builder.queryData[index][field]);
 				});
 

frontend/src/lib/query/panelTypeDataSourceFormValuesMap.ts

@@ -0,0 +1,140 @@
+/**
+ * Builder fields carried across a panel-type switch, per panel type and data source.
+ * Each shape is cut from the widest one by omission.
+ */
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+export type PartialPanelTypes = {
+	[PANEL_TYPES.BAR]: 'bar';
+	[PANEL_TYPES.LIST]: 'list';
+	[PANEL_TYPES.TABLE]: 'table';
+	[PANEL_TYPES.TIME_SERIES]: 'graph';
+	[PANEL_TYPES.AREA]: 'area';
+	[PANEL_TYPES.VALUE]: 'value';
+	[PANEL_TYPES.PIE]: 'pie';
+	[PANEL_TYPES.HISTOGRAM]: 'histogram';
+};
+
+export type BuilderField = keyof IBuilderQuery;
+
+export type PanelTypeFormValues = {
+	builder: { queryData: BuilderField[] };
+};
+
+/** A field added to `IBuilderQuery` fails to compile here until answered either way. */
+const IS_CARRIED = {
+	queryName: true,
+	aggregateOperator: true,
+	aggregateAttribute: true,
+	aggregations: true,
+	timeAggregation: true,
+	spaceAggregation: true,
+	functions: true,
+	filter: true,
+	filters: true,
+	groupBy: true,
+	expression: true,
+	disabled: true,
+	having: true,
+	limit: true,
+	stepInterval: true,
+	orderBy: true,
+	reduceTo: true,
+	legend: true,
+	// `dataSource` is appended by the provider; the rest drive surfaces this switch
+	// does not reach.
+	dataSource: false,
+	temporality: false,
+	pageSize: false,
+	offset: false,
+	selectColumns: false,
+	source: false,
+	builderQueryType: false,
+} satisfies Record<BuilderField, boolean>;
+
+function omit(
+	fields: readonly BuilderField[],
+	...omitted: BuilderField[]
+): BuilderField[] {
+	return fields.filter((field) => !omitted.includes(field));
+}
+
+const METRICS_AGGREGATION: readonly BuilderField[] = [
+	'timeAggregation',
+	'spaceAggregation',
+];
+
+const SCALAR_METRICS: readonly BuilderField[] = (
+	Object.entries(IS_CARRIED) as [BuilderField, boolean][]
+)
+	.filter(([, carried]) => carried)
+	.map(([field]) => field);
+
+// `reduceTo` is offered for metrics only, an asymmetry carried over from the old table.
+const SERIES_METRICS: readonly BuilderField[] = omit(
+	SCALAR_METRICS,
+	'reduceTo',
+);
+
+const SERIES: readonly BuilderField[] = omit(
+	SERIES_METRICS,
+	...METRICS_AGGREGATION,
+);
+
+const SINGLE_VALUE_METRICS: readonly BuilderField[] = omit(
+	SCALAR_METRICS,
+	'groupBy',
+	'limit',
+	'orderBy',
+);
+const SINGLE_VALUE: readonly BuilderField[] = omit(
+	SINGLE_VALUE_METRICS,
+	...METRICS_AGGREGATION,
+);
+
+const RAW_ROWS: readonly BuilderField[] = omit(
+	SERIES,
+	'aggregateAttribute',
+	'aggregateOperator',
+	'groupBy',
+	'having',
+	'stepInterval',
+	'disabled',
+	'legend',
+	'expression',
+);
+const RAW_ROWS_METRICS: readonly BuilderField[] = omit(
+	RAW_ROWS,
+	'limit',
+	'orderBy',
+	'functions',
+);
+
+/** Each cell gets its own copy; a shared instance would let cells contaminate
+ * each other. */
+function bySource(
+	logsAndTraces: readonly BuilderField[],
+	metrics: readonly BuilderField[],
+): Record<DataSource, PanelTypeFormValues> {
+	return {
+		[DataSource.LOGS]: { builder: { queryData: [...logsAndTraces] } },
+		[DataSource.TRACES]: { builder: { queryData: [...logsAndTraces] } },
+		[DataSource.METRICS]: { builder: { queryData: [...metrics] } },
+	};
+}
+
+export const panelTypeDataSourceFormValuesMap: Record<
+	keyof PartialPanelTypes,
+	Record<DataSource, PanelTypeFormValues>
+> = {
+	[PANEL_TYPES.TIME_SERIES]: bySource(SERIES, SERIES_METRICS),
+	[PANEL_TYPES.AREA]: bySource(SERIES, SERIES_METRICS),
+	[PANEL_TYPES.BAR]: bySource(SERIES, SERIES_METRICS),
+	[PANEL_TYPES.HISTOGRAM]: bySource(SERIES, SERIES_METRICS),
+	[PANEL_TYPES.TABLE]: bySource(SERIES, SCALAR_METRICS),
+	[PANEL_TYPES.PIE]: bySource(SERIES, SCALAR_METRICS),
+	[PANEL_TYPES.VALUE]: bySource(SINGLE_VALUE, SINGLE_VALUE_METRICS),
+	[PANEL_TYPES.LIST]: bySource(RAW_ROWS, RAW_ROWS_METRICS),
+};

frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts

@@ -13,7 +13,7 @@ describe('Get Series Data', () => {
 		expect(seriesData).toHaveLength(5);
 		expect(seriesData[1].label).toBe('firstLegend');
 		expect(seriesData[1].show).toBe(true);
-		expect(seriesData[1].fill).toBe('#FF6F91');
+		expect(seriesData[1].fill).toBe('#83C2EB');
 		expect(seriesData[1].width).toBe(2);
 	});
 

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

@@ -57,3 +57,12 @@
 	color: var(--l3-foreground);
 	text-align: center;
 }
+
+/* The bottom legend's box is only the rows reserved for it. */
+.container:not(.isRight) .emptyState {
+	flex: 1;
+	min-height: 0;
+	display: grid;
+	place-items: center;
+	padding: 0;
+}

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

@@ -8,7 +8,7 @@ import { LegendAction, LegendPosition, LegendProps } from '../types';
 import { LEGEND_ITEM_EXTRA_WIDTH, MAX_LEGEND_WIDTH } from './constants';
 import LegendRow from './LegendRow';
 import LegendToolbar from './LegendToolbar';
-import { filterLegendItems, getShownSeriesState } from './utils';
+import { getVisibleSeriesState } from './utils';
 
 import styles from './Legend.module.scss';
 
@@ -20,6 +20,7 @@ export default function Legend({
 	items,
 	position,
 	averageLegendWidth = MAX_LEGEND_WIDTH,
+	showSearch = false,
 	focusedSeriesIndex,
 	onAction,
 	showCopy = true,
@@ -30,27 +31,22 @@ export default function Legend({
 	const itemWidth = averageLegendWidth + LEGEND_ITEM_EXTRA_WIDTH;
 	const isRightPosition = position === LegendPosition.RIGHT;
 
-	const { visibleCount, soleShownSeriesIndex } = useMemo(
-		() => getShownSeriesState(items),
-		[items],
-	);
+	// The layout decides: it reserves the height.
+	const showToolbar = showSearch && items.length > 0;
 
-	// A bottom legend gets two rows; spending one on chrome costs more chart than
-	// the readout is worth.
-	const showToolbar = isRightPosition && items.length > 0;
-	const showFilter = showToolbar;
+	const effectiveQuery = showToolbar ? filterQuery : '';
 
-	const effectiveQuery = showFilter ? filterQuery : '';
-
-	const visibleLegendItems = useMemo(
-		() => filterLegendItems(items, effectiveQuery),
+	const {
+		listedItems,
+		visibleCount,
+		onlyVisibleSeriesIndex,
+		areAllSeriesVisible,
+	} = useMemo(
+		() => getVisibleSeriesState(items, effectiveQuery),
 		[items, effectiveQuery],
 	);
 
-	const isEmptyState =
-		!!effectiveQuery.trim() && visibleLegendItems.length === 0;
-
-	const isAllShown = visibleCount === items.length;
+	const isEmptyState = !!effectiveQuery.trim() && listedItems.length === 0;
 
 	// A row that unmounts under the pointer never fires its own mouseleave.
 	const handleMouseLeave = useCallback(
@@ -63,14 +59,20 @@ export default function Legend({
 			<LegendRow
 				key={item.seriesIndex}
 				item={item}
-				isSoleShown={soleShownSeriesIndex === item.seriesIndex}
-				isAllShown={isAllShown}
+				isOneSeriesVisible={onlyVisibleSeriesIndex === item.seriesIndex}
+				areAllSeriesVisible={areAllSeriesVisible}
 				isFocused={focusedSeriesIndex === item.seriesIndex}
 				showCopy={showCopy}
 				onAction={onAction}
 			/>
 		),
-		[soleShownSeriesIndex, isAllShown, focusedSeriesIndex, showCopy, onAction],
+		[
+			onlyVisibleSeriesIndex,
+			areAllSeriesVisible,
+			focusedSeriesIndex,
+			showCopy,
+			onAction,
+		],
 	);
 
 	return (
@@ -87,7 +89,7 @@ export default function Legend({
 				<LegendToolbar
 					visibleCount={visibleCount}
 					totalCount={items.length}
-					showFilter={showFilter}
+					position={position}
 					filterQuery={filterQuery}
 					onFilterQueryChange={setFilterQuery}
 				/>
@@ -101,7 +103,7 @@ export default function Legend({
 					className={styles.scroller}
 					listClassName={styles.gridList}
 					itemClassName={styles.gridItem}
-					data={visibleLegendItems}
+					data={listedItems}
 					itemContent={(_, item): JSX.Element => renderLegendItem(item)}
 				/>
 			)}

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

@@ -13,9 +13,9 @@ import styles from './LegendRow.module.scss';
 export interface LegendRowProps {
 	item: LegendItem;
 	/** The only series currently shown, so hiding it is refused. */
-	isSoleShown: boolean;
+	isOneSeriesVisible: boolean;
 	/** Nothing is hidden, so the row's action can only narrow the selection. */
-	isAllShown: boolean;
+	areAllSeriesVisible: boolean;
 	isFocused: boolean;
 	showCopy: boolean;
 	onAction: OnLegendAction;
@@ -29,15 +29,15 @@ export interface LegendRowProps {
  */
 function LegendRow({
 	item,
-	isSoleShown,
-	isAllShown,
+	isOneSeriesVisible,
+	areAllSeriesVisible,
 	isFocused,
 	showCopy,
 	onAction,
 }: LegendRowProps): JSX.Element {
 	const { seriesIndex, show } = item;
 	const label = item.label ?? '';
-	const isShowAllAction = show && !isAllShown;
+	const isShowAllAction = show && !areAllSeriesVisible;
 	const scopeActionLabel = isShowAllAction
 		? 'Show all series'
 		: 'Show only current series';
@@ -47,15 +47,15 @@ function LegendRow({
 
 	/** Everything showing -> isolate; showing alone -> restore all. */
 	const handleRowClick = useCallback((): void => {
-		if (isSoleShown) {
+		if (isOneSeriesVisible) {
 			onAction({ type: LegendAction.SHOW_ALL });
 			return;
 		}
 		onAction({
-			type: isAllShown ? LegendAction.SHOW_ONLY : LegendAction.TOGGLE,
+			type: areAllSeriesVisible ? LegendAction.SHOW_ONLY : LegendAction.TOGGLE,
 			seriesIndex,
 		});
-	}, [isSoleShown, isAllShown, onAction, seriesIndex]);
+	}, [isOneSeriesVisible, areAllSeriesVisible, onAction, seriesIndex]);
 
 	const handleMarkerClick = useCallback(
 		(event: MouseEvent<HTMLButtonElement>): void => {
@@ -126,7 +126,7 @@ function LegendRow({
 					backgroundColor: show ? seriesColor : 'transparent',
 				}}
 				onClick={handleMarkerClick}
-				disabled={isSoleShown}
+				disabled={isOneSeriesVisible}
 				aria-label={`${show ? 'Hide' : 'Show'} ${label}`}
 				data-is-legend-marker={true}
 				data-testid={`legend-marker-${seriesIndex}`}

frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.module.scss

@@ -33,3 +33,32 @@
 .searchIcon {
 	color: var(--l3-foreground);
 }
+
+/* Height + margin must match LEGEND_TOOLBAR_HEIGHT and LEGEND_TOOLBAR_GAP. */
+.inlineToolbar {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	height: 24px;
+	margin-bottom: var(--spacing-2);
+	padding-right: var(--spacing-4);
+}
+
+.search {
+	flex: 0 0 auto;
+	width: 240px;
+	max-width: 100%;
+}
+
+.statusInline {
+	// Truncates rather than wrapping onto a row the legend has not reserved.
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.searchInputInline {
+	width: 100%;
+	height: 24px;
+}

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

@@ -1,14 +1,17 @@
 import { ChangeEvent, useCallback } from 'react';
+import cx from 'classnames';
 import { Input } from 'antd';
 import { Search } from '@signozhq/icons';
 
+import { LegendPosition } from '../types';
+
 import styles from './LegendToolbar.module.scss';
 
 export interface LegendToolbarProps {
 	visibleCount: number;
 	totalCount: number;
-	/** Search is intrinsic to the right-positioned legend. */
-	showFilter: boolean;
+	/** Layout only: the column stacks, the bottom row does not. */
+	position: LegendPosition;
 	filterQuery: string;
 	onFilterQueryChange: (query: string) => void;
 }
@@ -17,7 +20,7 @@ export interface LegendToolbarProps {
 export default function LegendToolbar({
 	visibleCount,
 	totalCount,
-	showFilter,
+	position,
 	filterQuery,
 	onFilterQueryChange,
 }: LegendToolbarProps): JSX.Element {
@@ -27,30 +30,48 @@ export default function LegendToolbar({
 		[onFilterQueryChange],
 	);
 
-	return (
-		<>
-			{showFilter && (
+	const searchProps = {
+		allowClear: true,
+		prefix: <Search size={12} className={styles.searchIcon} />,
+		placeholder: 'Search...',
+		value: filterQuery,
+		onChange: handleFilterChange,
+		className: styles.searchInput,
+		'data-testid': 'legend-search-input',
+	};
+
+	const status = (
+		<span
+			className={cx(styles.status, {
+				[styles.statusInline]: position !== LegendPosition.RIGHT,
+			})}
+			aria-live="polite"
+			data-testid="legend-status"
+		>
+			{`Showing ${visibleCount} of ${totalCount} series`}
+		</span>
+	);
+
+	if (position === LegendPosition.RIGHT) {
+		return (
+			<>
 				<div className={styles.searchContainer}>
-					<Input
-						allowClear
-						prefix={<Search size={12} className={styles.searchIcon} />}
-						placeholder="Search..."
-						value={filterQuery}
-						onChange={handleFilterChange}
-						className={styles.searchInput}
-						data-testid="legend-search-input"
-					/>
+					<Input {...searchProps} />
 				</div>
-			)}
-			<div className={styles.toolbar}>
-				<span
-					className={styles.status}
-					aria-live="polite"
-					data-testid="legend-status"
-				>
-					{`Showing ${visibleCount} of ${totalCount} series`}
-				</span>
+				<div className={styles.toolbar}>{status}</div>
+			</>
+		);
+	}
+
+	return (
+		<div className={styles.inlineToolbar}>
+			<div className={styles.search}>
+				<Input
+					{...searchProps}
+					className={cx(styles.searchInput, styles.searchInputInline)}
+				/>
 			</div>
-		</>
+			{status}
+		</div>
 	);
 }

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

@@ -16,6 +16,7 @@ export default function UPlotLegend({
 	position = LegendPosition.BOTTOM,
 	config,
 	averageLegendWidth,
+	showSearch,
 }: UPlotLegendProps): JSX.Element {
 	const { legendItemsMap, focusedSeriesIndex } = useLegendsSync({ config });
 	const onAction = useLegendActions();
@@ -27,6 +28,7 @@ export default function UPlotLegend({
 			items={items}
 			position={position}
 			averageLegendWidth={averageLegendWidth}
+			showSearch={showSearch}
 			focusedSeriesIndex={focusedSeriesIndex}
 			onAction={onAction}
 		/>

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

@@ -88,11 +88,15 @@ describe('UPlotLegend', () => {
 		jest.clearAllMocks();
 	});
 
-	const renderLegend = (position?: LegendPosition): RenderResult =>
+	const renderLegend = (
+		position?: LegendPosition,
+		showSearch = true,
+	): RenderResult =>
 		render(
 			<TooltipProvider>
 				<UPlotLegend
 					position={position}
+					showSearch={showSearch}
 					// config is consumed by the mocked useLegendsSync hook, not directly
 					config={{} as any}
 				/>
@@ -100,14 +104,38 @@ describe('UPlotLegend', () => {
 		);
 
 	describe('layout and position', () => {
-		it('renders the search input on a RIGHT legend', () => {
-			renderLegend(LegendPosition.RIGHT);
+		it.each([LegendPosition.RIGHT, LegendPosition.BOTTOM])(
+			'gives the legend a search box and a readout (%s)',
+			(position) => {
+				renderLegend(position);
 
-			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
-		});
+				expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
+				expect(screen.getByTestId('legend-status')).toBeInTheDocument();
+			},
+		);
 
-		it('keeps a BOTTOM legend bare — its two rows all go to series', () => {
-			renderLegend();
+		it.each([LegendPosition.RIGHT, LegendPosition.BOTTOM])(
+			'counts down the readout as the search narrows the list (%s)',
+			async (position) => {
+				const user = userEvent.setup();
+				renderLegend(position);
+
+				// B is hidden.
+				expect(screen.getByTestId('legend-status')).toHaveTextContent(
+					'Showing 2 of 3 series',
+				);
+
+				await user.type(screen.getByTestId('legend-search-input'), 'a');
+
+				// Only A matches, counted against all three.
+				expect(screen.getByTestId('legend-status')).toHaveTextContent(
+					'Showing 1 of 3 series',
+				);
+			},
+		);
+
+		it('keeps a BOTTOM legend bare while every series is on screen', () => {
+			renderLegend(LegendPosition.BOTTOM, false);
 
 			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
 			expect(screen.queryByTestId('legend-status')).not.toBeInTheDocument();
@@ -116,6 +144,16 @@ describe('UPlotLegend', () => {
 			expect(screen.getByTestId('legend-scope-0')).toBeInTheDocument();
 		});
 
+		it('filters a BOTTOM legend from its search box', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.BOTTOM);
+
+			await user.type(screen.getByTestId('legend-search-input'), 'b');
+
+			expect(screen.getByText('B')).toBeInTheDocument();
+			expect(screen.queryByText('A')).not.toBeInTheDocument();
+		});
+
 		it('renders the marker with the series colour, filled only when shown', () => {
 			renderLegend(LegendPosition.RIGHT);
 

frontend/src/lib/uPlotV2/components/Legend/__tests__/utils.test.ts

@@ -1,6 +1,6 @@
 import { LegendItem } from 'lib/uPlotV2/config/types';
 
-import { filterLegendItems, getShownSeriesState } from '../utils';
+import { filterLegendItems, getVisibleSeriesState } from '../utils';
 
 const items = (shown: boolean[]): LegendItem[] =>
 	shown.map((show, index) => ({
@@ -10,26 +10,49 @@ const items = (shown: boolean[]): LegendItem[] =>
 		show,
 	}));
 
-describe('getShownSeriesState', () => {
+describe('getVisibleSeriesState', () => {
 	it('counts the shown series', () => {
-		expect(getShownSeriesState(items([true, false, true]))).toStrictEqual({
-			visibleCount: 2,
-			soleShownSeriesIndex: null,
-		});
+		const state = getVisibleSeriesState(items([true, false, true]), '');
+
+		expect(state.visibleCount).toBe(2);
+		expect(state.onlyVisibleSeriesIndex).toBeNull();
+		expect(state.areAllSeriesVisible).toBe(false);
 	});
 
 	it('names the series when exactly one is shown', () => {
-		expect(getShownSeriesState(items([false, true, false]))).toStrictEqual({
-			visibleCount: 1,
-			soleShownSeriesIndex: 2,
-		});
+		const state = getVisibleSeriesState(items([false, true, false]), '');
+
+		expect(state.visibleCount).toBe(1);
+		expect(state.onlyVisibleSeriesIndex).toBe(2);
 	});
 
 	it('reports nothing shown', () => {
-		expect(getShownSeriesState(items([false, false]))).toStrictEqual({
-			visibleCount: 0,
-			soleShownSeriesIndex: null,
-		});
+		const state = getVisibleSeriesState(items([false, false]), '');
+
+		expect(state.visibleCount).toBe(0);
+		expect(state.onlyVisibleSeriesIndex).toBeNull();
+	});
+
+	it('reports every series shown', () => {
+		expect(
+			getVisibleSeriesState(items([true, true]), '').areAllSeriesVisible,
+		).toBe(true);
+	});
+
+	it('counts only the series the search listed', () => {
+		const state = getVisibleSeriesState(items([true, true, false]), 'series-1');
+
+		expect(state.listedItems.map((item) => item.label)).toStrictEqual([
+			'series-1',
+		]);
+		expect(state.visibleCount).toBe(1);
+	});
+
+	it('reads isolation off every series, not the listed ones', () => {
+		const state = getVisibleSeriesState(items([false, true, false]), 'series-2');
+
+		expect(state.listedItems).toHaveLength(1);
+		expect(state.onlyVisibleSeriesIndex).toBe(2);
 	});
 });
 

frontend/src/lib/uPlotV2/components/Legend/constants.ts

@@ -21,5 +21,9 @@ export const LEGEND_ROW_HEIGHT = 28;
 export const LEGEND_ROW_GAP = 2;
 export const LEGEND_MAX_BOTTOM_ROWS = 2;
 
+/** Must match `.inlineToolbar`'s height and margin-bottom, or it eats a row. */
+export const LEGEND_TOOLBAR_HEIGHT = 24;
+export const LEGEND_TOOLBAR_GAP = 4;
+
 /** Hover delay before a row's full-name tooltip opens. */
 export const LEGEND_TOOLTIP_DELAY_MS = 500;

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

@@ -1,22 +1,12 @@
 import { LegendItem } from 'lib/uPlotV2/config/types';
 
-export interface ShownSeriesState {
+export interface LegendViewState {
+	listedItems: LegendItem[];
+	/** Listed items that are toggled on, against every series in the readout. */
 	visibleCount: number;
-	/** The series index when exactly one series is shown, else null. */
-	soleShownSeriesIndex: number | null;
-}
-
-/**
- * Driven by what is actually shown, never a remembered isolation: hiding series
- * one at a time down to a single one is the same state as "Only".
- */
-export function getShownSeriesState(items: LegendItem[]): ShownSeriesState {
-	const shown = items.filter((item) => item.show);
-
-	return {
-		visibleCount: shown.length,
-		soleShownSeriesIndex: shown.length === 1 ? shown[0].seriesIndex : null,
-	};
+	/** The series index when exactly one series is toggled on, else null. */
+	onlyVisibleSeriesIndex: number | null;
+	areAllSeriesVisible: boolean;
 }
 
 export function filterLegendItems(
@@ -32,3 +22,23 @@ export function filterLegendItems(
 		item.label?.toLowerCase().includes(normalisedQuery),
 	);
 }
+
+/**
+ * Isolation is driven by what is actually shown, never a remembered one: hiding
+ * series one at a time down to a single one is the same state as "Only". It is
+ * read off the whole series set, not off what the search left listed.
+ */
+export function getVisibleSeriesState(
+	items: LegendItem[],
+	query: string,
+): LegendViewState {
+	const visible = items.filter((item) => item.show);
+	const listedItems = filterLegendItems(items, query);
+
+	return {
+		listedItems,
+		visibleCount: listedItems.filter((item) => item.show).length,
+		onlyVisibleSeriesIndex: visible.length === 1 ? visible[0].seriesIndex : null,
+		areAllSeriesVisible: visible.length === items.length,
+	};
+}

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

@@ -73,9 +73,9 @@ function createTooltipContent(
 	};
 }
 
-function createUPlotInstance(cursorIdx: number | null): uPlot {
+function createUPlotInstance(cursorIdx: number | null, timestamp = 1): uPlot {
 	return {
-		data: [[1], []],
+		data: [[timestamp], []],
 		cursor: { idx: cursorIdx },
 		// The rest of the uPlot fields are not used by Tooltip
 	} as unknown as uPlot;
@@ -122,6 +122,19 @@ describe('Tooltip', () => {
 		expect(screen.getByText(expectedTitle)).toBeInTheDocument();
 	});
 
+	it('drops the date from the header title for a point on the current day', () => {
+		const todayTimestamp = dayjs().tz('UTC').startOf('hour').unix();
+		const uPlotInstance = createUPlotInstance(0, todayTimestamp);
+
+		renderTooltip({ uPlotInstance });
+
+		const expectedTitle = dayjs(todayTimestamp * 1000)
+			.tz('UTC')
+			.format(DATE_TIME_FORMATS.TIME_SECONDS);
+
+		expect(screen.getByText(expectedTitle)).toBeInTheDocument();
+	});
+
 	it('does not render header when showTooltipHeader is false', () => {
 		const uPlotInstance = createUPlotInstance(0);
 

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

@@ -1,11 +1,10 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import dayjs from 'dayjs';
 import { Pin } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 import type uPlot from 'uplot';
+import { formatTimestampOmittingTodaysDate } from 'utils/timeUtils';
 
 import { TooltipContentItem } from '../../../types';
 import TooltipItem from '../TooltipItem/TooltipItem';
@@ -19,6 +18,7 @@ interface TooltipHeaderProps {
 	isPinned: boolean;
 	activeItem: TooltipContentItem | null;
 	headerRowClassName?: string;
+	/** Overrides the default, which drops the date part for points on the current day. */
 	dateFormat?: string;
 }
 
@@ -29,7 +29,7 @@ export default function TooltipHeader({
 	isPinned,
 	activeItem,
 	headerRowClassName,
-	dateFormat = DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS,
+	dateFormat,
 }: TooltipHeaderProps): JSX.Element {
 	const { timezone: userTimezone } = useTimezone();
 	const resolvedTimezone = timezone?.value ?? userTimezone.value;
@@ -46,9 +46,11 @@ export default function TooltipHeader({
 		if (timestamp == null) {
 			return null;
 		}
-		return dayjs(timestamp * 1000)
-			.tz(resolvedTimezone)
-			.format(dateFormat);
+		return formatTimestampOmittingTodaysDate(
+			timestamp * 1000,
+			resolvedTimezone,
+			dateFormat,
+		);
 	}, [
 		resolvedTimezone,
 		uPlotInstance.data,

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

@@ -145,6 +145,8 @@ export interface LegendProps {
 	/** Legend placement; always supplied by the container. */
 	position: LegendPosition;
 	averageLegendWidth?: number;
+	/** Set by the chart layout, which reserves the height for it. */
+	showSearch?: boolean;
 	/** Series index highlighted by the chart cursor. */
 	focusedSeriesIndex: number | null;
 	onAction: OnLegendAction;
@@ -158,6 +160,7 @@ export interface UPlotLegendProps {
 	position?: LegendPosition;
 	config: UPlotConfigBuilder;
 	averageLegendWidth?: number;
+	showSearch?: boolean;
 }
 
 export interface TooltipContentItem {

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

@@ -265,7 +265,7 @@ function getPathBuilder({
 	drawStyle,
 	lineInterpolation,
 	barAlignment = BarAlignment.Center,
-	barWidthFactor = 0.6,
+	barWidthFactor = 0.85,
 	barMaxWidth = 200,
 	stepInterval,
 }: {

frontend/src/lib/uPlotV2/config/__tests__/UPlotSeriesBuilder.test.ts

@@ -297,7 +297,7 @@ describe('UPlotSeriesBuilder', () => {
 		);
 
 		const config = builder.getConfig();
-		expect(config.stroke).toBe('#E64A3C');
+		expect(config.stroke).toBe('#AD42E0');
 	});
 
 	it('passes through pointsFilter when provided', () => {

frontend/src/lib/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useMemo, useRef } from 'react';
-import ChartLayout from 'lib/visualization/layout/ChartLayout/ChartLayout';
+import ChartLayout, {
+	LegendLayout,
+} from 'lib/visualization/layout/ChartLayout/ChartLayout';
 import UPlotLegend from 'lib/uPlotV2/components/Legend/UPlotLegend';
 import {
 	LegendPosition,
@@ -58,7 +60,7 @@ export default function ChartWrapper({
 	);
 
 	const legendComponent = useCallback(
-		(averageLegendWidth: number): React.ReactNode => {
+		({ averageLegendWidth, showSearch }: LegendLayout): React.ReactNode => {
 			if (!showLegend) {
 				return null;
 			}
@@ -67,6 +69,7 @@ export default function ChartWrapper({
 					config={config}
 					position={legendConfig.position}
 					averageLegendWidth={averageLegendWidth}
+					showSearch={showSearch}
 				/>
 			);
 		},

frontend/src/lib/visualization/charts/Pie/Pie.tsx

@@ -68,17 +68,23 @@ export default function Pie({
 
 	// Reuse the uPlot chart/legend split so the donut + legend get the same area
 	// allocation (right column, or up-to-two bottom rows) as every other panel.
-	const { width, height, legendWidth, legendHeight, averageLegendWidth } =
-		useMemo(
-			() =>
-				calculateChartDimensions({
-					containerWidth,
-					containerHeight,
-					legendConfig: { position },
-					seriesLabels: data.map((slice) => slice.label),
-				}),
-			[containerWidth, containerHeight, position, data],
-		);
+	const {
+		width,
+		height,
+		legendWidth,
+		legendHeight,
+		averageLegendWidth,
+		showLegendSearch,
+	} = useMemo(
+		() =>
+			calculateChartDimensions({
+				containerWidth,
+				containerHeight,
+				legendConfig: { position },
+				seriesLabels: data.map((slice) => slice.label),
+			}),
+		[containerWidth, containerHeight, position, data],
+	);
 
 	// Donut geometry derived from the allocated chart box, sized to leave room
 	// for the external leader labels (see getDonutGeometry).
@@ -224,6 +230,7 @@ export default function Pie({
 					items={legendItems}
 					position={position}
 					averageLegendWidth={averageLegendWidth}
+					showSearch={showLegendSearch}
 					focusedSeriesIndex={focusedSeriesIndex}
 					onAction={onLegendAction}
 				/>

frontend/src/lib/visualization/charts/__tests__/utils.test.ts

@@ -25,6 +25,7 @@ describe('calculateChartDimensions', () => {
 			legendWidth: 0,
 			legendHeight: 0,
 			averageLegendWidth: 0,
+			showLegendSearch: false,
 		});
 	});
 
@@ -106,10 +107,10 @@ describe('calculateChartDimensions', () => {
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(40),
 		});
-		// Two 28px rows + the 2px row gap + 12px bottom padding — no room for a
-		// clipped third row, and none left over.
-		expect(dims.legendHeight).toBe(70);
-		expect(dims.height).toBe(430);
+		// Two 28px rows + 2px gap + 12px padding, plus the 24px search row + 4px.
+		expect(dims.showLegendSearch).toBe(true);
+		expect(dims.legendHeight).toBe(98);
+		expect(dims.height).toBe(402);
 	});
 
 	it('BOTTOM: items one past a row still reserve two rows', () => {
@@ -123,6 +124,50 @@ describe('calculateChartDimensions', () => {
 		expect(dims.legendHeight).toBe(70);
 	});
 
+	it('BOTTOM: no search row while every item is already on screen', () => {
+		// 1000px fits 4 per row, so 8 items fill both reserved rows exactly.
+		const dims = calculateChartDimensions({
+			containerWidth: 1000,
+			containerHeight: 500,
+			legendConfig: { position: LegendPosition.BOTTOM },
+			seriesLabels: labels(8),
+		});
+		expect(dims.showLegendSearch).toBe(false);
+		expect(dims.legendHeight).toBe(70);
+	});
+
+	it('BOTTOM: a search row once the grid overflows the reserved rows', () => {
+		const dims = calculateChartDimensions({
+			containerWidth: 1000,
+			containerHeight: 500,
+			legendConfig: { position: LegendPosition.BOTTOM },
+			seriesLabels: labels(9),
+		});
+		expect(dims.showLegendSearch).toBe(true);
+		expect(dims.legendHeight).toBe(98);
+	});
+
+	it('BOTTOM: no search row when it would push the legend past a short panel', () => {
+		const dims = calculateChartDimensions({
+			containerWidth: 1000,
+			containerHeight: 120,
+			legendConfig: { position: LegendPosition.BOTTOM },
+			seriesLabels: labels(40),
+		});
+		expect(dims.showLegendSearch).toBe(false);
+		expect(dims.legendHeight).toBe(40);
+	});
+
+	it('RIGHT: always carries its chrome; the column has the height for it', () => {
+		const dims = calculateChartDimensions({
+			containerWidth: 1000,
+			containerHeight: 500,
+			legendConfig: { position: LegendPosition.RIGHT },
+			seriesLabels: labels(40),
+		});
+		expect(dims.showLegendSearch).toBe(true);
+	});
+
 	it('BOTTOM: reserves the rows the grid actually lays out, not the rows a bare width estimate allows', () => {
 		// The item width alone suggests three fit on one row; the grid's per-item
 		// padding and column gap leave room for two.

frontend/src/lib/visualization/charts/utils.ts

@@ -2,6 +2,8 @@ import {
 	LEGEND_MAX_BOTTOM_ROWS,
 	MIN_LEGEND_ITEM_WIDTH,
 	LEGEND_COLUMN_GAP,
+	LEGEND_TOOLBAR_GAP,
+	LEGEND_TOOLBAR_HEIGHT,
 	LEGEND_ITEM_EXTRA_WIDTH,
 	LEGEND_ROW_GAP,
 	LEGEND_ROW_HEIGHT,
@@ -15,6 +17,8 @@ export interface ChartDimensions {
 	legendWidth: number;
 	legendHeight: number;
 	averageLegendWidth: number;
+	/** For a BOTTOM legend that row's height is inside `legendHeight`. */
+	showLegendSearch: boolean;
 }
 
 const AVG_CHAR_WIDTH = 8;
@@ -76,6 +80,8 @@ export function calculateAverageLegendWidth(legends: string[]): number {
  *   - `legendHeight` is exactly those rows plus the wrapper's bottom padding, so
  *     the rectangle never clips a row or reserves space for half of one. Two
  *     rows that would take half a short panel fall back to one row.
+ *   - A grid overflowing those rows also gets a search row, whose height is
+ *     part of `legendHeight`.
  *   - Chart height is `containerHeight - legendHeight`, never below 0.
  * - `legendsPerSet` is the number of legend items that fit horizontally, based on the same text-width approximation.
  *
@@ -101,6 +107,7 @@ export function calculateChartDimensions({
 			legendWidth: 0,
 			legendHeight: 0,
 			averageLegendWidth: 0,
+			showLegendSearch: false,
 		};
 	}
 
@@ -140,6 +147,7 @@ export function calculateChartDimensions({
 			legendHeight: containerHeight,
 			// Single vertical list on the right.
 			averageLegendWidth: rightLegendWidth,
+			showLegendSearch: legendItemCount > 0,
 		};
 	}
 
@@ -158,18 +166,25 @@ export function calculateChartDimensions({
 		),
 	);
 
-	// The wrapper's bottom padding is inside this height (border-box).
-	const heightForRows = (rowCount: number): number =>
+	// The wrapper's bottom padding and the search row are inside this height.
+	const heightForRows = (rowCount: number, withToolbar: boolean): number =>
 		rowCount * LEGEND_ROW_HEIGHT +
 		(rowCount - 1) * LEGEND_ROW_GAP +
-		LEGEND_PADDING;
+		LEGEND_PADDING +
+		(withToolbar ? LEGEND_TOOLBAR_HEIGHT + LEGEND_TOOLBAR_GAP : 0);
+
+	const shortPanelBudget = containerHeight * MAX_SHORT_PANEL_LEGEND_RATIO;
+	const gridRowCount = Math.ceil(legendItemCount / legendItemsPerRow);
+
+	// Only once rows overflow — below that every series is already on screen —
+	// and only while the row it costs leaves the legend inside the panel's share.
+	const showLegendSearch =
+		gridRowCount > LEGEND_MAX_BOTTOM_ROWS &&
+		heightForRows(1, true) <= shortPanelBudget;
 
 	const neededRowCount = Math.max(
 		1,
-		Math.min(
-			LEGEND_MAX_BOTTOM_ROWS,
-			Math.ceil(legendItemCount / legendItemsPerRow),
-		),
+		Math.min(LEGEND_MAX_BOTTOM_ROWS, gridRowCount),
 	);
 
 	// Without this, short grid panels hand most of their area to the legend and
@@ -177,11 +192,11 @@ export function calculateChartDimensions({
 	// row's items are clipped rather than removed, so they are scroll-only here.
 	const legendRowCount =
 		neededRowCount > 1 &&
-		heightForRows(neededRowCount) > containerHeight * MAX_SHORT_PANEL_LEGEND_RATIO
+		heightForRows(neededRowCount, showLegendSearch) > shortPanelBudget
 			? 1
 			: neededRowCount;
 
-	const bottomLegendHeight = heightForRows(legendRowCount);
+	const bottomLegendHeight = heightForRows(legendRowCount, showLegendSearch);
 
 	return {
 		width: containerWidth,
@@ -189,5 +204,6 @@ export function calculateChartDimensions({
 		legendWidth: containerWidth,
 		legendHeight: bottomLegendHeight,
 		averageLegendWidth: legendItemWidth,
+		showLegendSearch,
 	};
 }

frontend/src/lib/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -7,9 +7,14 @@ import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 
 import 'lib/visualization/layout/ChartLayout/ChartLayout.styles.scss';
 
+export interface LegendLayout {
+	averageLegendWidth: number;
+	showSearch: boolean;
+}
+
 export interface ChartLayoutProps {
 	showLegend?: boolean;
-	legendComponent: (legendPerSet: number) => React.ReactNode;
+	legendComponent: (layout: LegendLayout) => React.ReactNode;
 	children: (props: {
 		chartWidth: number;
 		chartHeight: number;
@@ -40,6 +45,7 @@ export default function ChartLayout({
 					legendWidth: 0,
 					legendHeight: 0,
 					averageLegendWidth: MAX_LEGEND_WIDTH,
+					showLegendSearch: false,
 				};
 			}
 			const legendItemsMap = config.getLegendItems();
@@ -81,7 +87,10 @@ export default function ChartLayout({
 							width: chartDimensions.legendWidth,
 						}}
 					>
-						{legendComponent(chartDimensions.averageLegendWidth)}
+						{legendComponent({
+							averageLegendWidth: chartDimensions.averageLegendWidth,
+							showSearch: chartDimensions.showLegendSearch,
+						})}
 					</div>
 				)}
 			</div>

frontend/src/pages/AllErrors/AllErrors.styles.scss

@@ -1,11 +1,4 @@
 .all-errors-page {
-	display: flex;
-	height: 100%;
-	.all-errors-quick-filter-section {
-		width: 0%;
-		flex-shrink: 0;
-	}
-
 	.all-errors-right-section {
 		.right-toolbar-actions-container {
 			display: flex;
@@ -18,14 +11,4 @@
 	.ant-tabs {
 		margin: 0 8px;
 	}
-
-	&.filter-visible {
-		.all-errors-quick-filter-section {
-			width: 260px;
-		}
-
-		.all-errors-right-section {
-			width: calc(100% - 260px);
-		}
-	}
 }

frontend/src/pages/AllErrors/index.tsx

@@ -5,13 +5,11 @@ import { Filter } from '@signozhq/icons';
 import { Button, Tooltip } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import RouteTab from 'components/RouteTab';
-import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import ResourceAttributesFilterV2 from 'container/ResourceAttributeFilterV2/ResourceAttributesFilterV2';
@@ -59,63 +57,52 @@ function AllErrors(): JSX.Element {
 	const quickFilterFieldApis = useSignalFieldApis();
 
 	return (
-		<div className={cx('all-errors-page', showFilters ? 'filter-visible' : '')}>
-			{showFilters && (
-				<section className={cx('all-errors-quick-filter-section')}>
-					<QuickFilters
-						className="qf-exceptions"
-						source={QuickFiltersSource.EXCEPTIONS}
-						signal={SignalType.EXCEPTIONS}
-						handleFilterVisibilityChange={handleFilterVisibilityChange}
-						useFieldApis={quickFilterFieldApis}
-					/>
-				</section>
-			)}
-			<section
-				className={cx(
-					'all-errors-right-section',
-					showFilters ? 'filter-visible' : '',
-				)}
-			>
-				<TypicalOverlayScrollbar>
-					<>
-						<Toolbar
-							showAutoRefresh={false}
-							leftActions={
-								!showFilters ? (
-									<Tooltip title="Show Filters">
-										<Button onClick={handleFilterVisibilityChange} className="filter-btn">
-											<Filter size="md" />
-										</Button>
-									</Tooltip>
-								) : undefined
-							}
-							rightActions={
-								<div className="right-toolbar-actions-container">
-									<RightToolbarActions
-										onStageRunQuery={handleRunQuery}
-										isLoadingQueries={isLoadingQueries}
-										handleCancelQuery={handleCancelQuery}
-									/>
-									<HeaderRightSection
-										enableAnnouncements={false}
-										enableShare
-										enableFeedback
-									/>
-								</div>
-							}
+		<QuickFiltersLayout
+			className="all-errors-page"
+			contentClassName="all-errors-right-section"
+			showFilters={showFilters}
+			quickFilterProps={{
+				className: 'qf-exceptions',
+				source: QuickFiltersSource.EXCEPTIONS,
+				signal: SignalType.EXCEPTIONS,
+				handleFilterVisibilityChange,
+				useFieldApis: quickFilterFieldApis,
+			}}
+		>
+			<Toolbar
+				showAutoRefresh={false}
+				leftActions={
+					!showFilters ? (
+						<Tooltip title="Show Filters">
+							<Button onClick={handleFilterVisibilityChange} className="filter-btn">
+								<Filter size="md" />
+							</Button>
+						</Tooltip>
+					) : undefined
+				}
+				rightActions={
+					<div className="right-toolbar-actions-container">
+						<RightToolbarActions
+							onStageRunQuery={handleRunQuery}
+							isLoadingQueries={isLoadingQueries}
+							handleCancelQuery={handleCancelQuery}
 						/>
-						<ResourceAttributesFilterV2 />
-						<RouteTab
-							routes={routes}
-							activeKey={pathname}
-							history={history}
-							showRightSection={false}
+						<HeaderRightSection
+							enableAnnouncements={false}
+							enableShare
+							enableFeedback
 						/>
-					</>
-				</TypicalOverlayScrollbar>
-			</section>
-		</div>
+					</div>
+				}
+			/>
+			<ResourceAttributesFilterV2 />
+			<RouteTab
+				routes={routes}
+				activeKey={pathname}
+				history={history}
+				showRightSection={false}
+			/>
+		</QuickFiltersLayout>
 	);
 }
 

frontend/src/pages/AllErrors/stories/AllErrors.stories.tsx

@@ -98,17 +98,30 @@ export const QuickFiltersSettings: Story = {
 	play: openQuickFiltersSettings,
 };
 
+const dirtyQuickFiltersSettings = async (): Promise<void> => {
+	await openQuickFiltersSettings();
+
+	// One Remove per added filter; the first row's is the one clicked.
+	const [removeFilter] = await screen.findAllByRole('button', {
+		name: 'Remove',
+	});
+
+	await userEvent.click(removeFilter);
+	await screen.findByRole('button', { name: 'Save changes' });
+};
+
 /** Settings with an unsaved filter removal and the fixed action footer. */
 export const QuickFiltersSettingsDirty: Story = {
-	play: async (): Promise<void> => {
-		await openQuickFiltersSettings();
-
-		// One Remove per added filter; the first row's is the one clicked.
-		const [removeFilter] = await screen.findAllByRole('button', {
-			name: 'Remove',
-		});
-
-		await userEvent.click(removeFilter);
-		await screen.findByRole('button', { name: 'Save changes' });
-	},
+	play: dirtyQuickFiltersSettings,
+};
+
+/**
+ * The same panel with a banner above the shell. The banner takes 48px off the
+ * layout, so this is the case where the footer used to be pushed off screen:
+ * the panel is sized from the filters pane rather than the viewport, which
+ * keeps Save changes reachable.
+ */
+export const QuickFiltersSettingsWithBanner: Story = {
+	args: { banner: 'trial-expiry' },
+	play: dirtyQuickFiltersSettings,
 };

frontend/src/pages/ApiMonitoring/ApiMonitoringPage.styles.scss

@@ -1,11 +1,4 @@
 .api-monitoring-page {
-	flex: 1;
-	display: flex;
-
-	.ant-tabs {
-		flex: 1;
-	}
-
 	.ant-tabs-nav {
 		padding: 0 16px;
 		margin-bottom: 0px;
@@ -15,22 +8,6 @@
 		}
 	}
 
-	.ant-tabs-content-holder {
-		display: flex;
-
-		.ant-tabs-content {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-
-			.ant-tabs-tabpane {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-			}
-		}
-	}
-
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/ApiMonitoring/ApiMonitoringPage.tsx

@@ -13,9 +13,12 @@ function ApiMonitoringPage(): JSX.Element {
 	const routes: TabRoutes[] = [Explorer];
 
 	return (
-		<div className="api-monitoring-page">
-			<RouteTab routes={routes} activeKey={pathname} history={history} />
-		</div>
+		<RouteTab
+			className="api-monitoring-page"
+			routes={routes}
+			activeKey={pathname}
+			history={history}
+		/>
 	);
 }
 

frontend/src/pages/ApiMonitoring/stories/ApiMonitoringPage.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
@@ -59,6 +59,35 @@ export const PortDomain: Story = {
 /** The page fetches before it renders a filter, which outlasts the 1s default. */
 const untilLoaded = { timeout: 15_000 };
 
+const openQuickFiltersSettings = async (): Promise<void> => {
+	// The settings control renders disabled while its permission check is in
+	// flight and is swapped for the enabled one once the check answers, so it is
+	// looked up again on every attempt; a click on the disabled one is dropped in
+	// silence.
+	const control = await waitFor(() => {
+		const settings = screen.getByTestId('settings-icon-container');
+
+		expect(settings).toBeEnabled();
+
+		return settings;
+	}, untilLoaded);
+
+	await userEvent.click(control);
+	await screen.findByText('Edit quick filters', undefined, untilLoaded);
+};
+
+const dirtyQuickFiltersSettings = async (): Promise<void> => {
+	await openQuickFiltersSettings();
+
+	// One Remove per added filter; the first row's is the one clicked.
+	const [removeFilter] = await screen.findAllByRole('button', {
+		name: 'Remove',
+	});
+
+	await userEvent.click(removeFilter);
+	await screen.findByRole('button', { name: 'Save changes' });
+};
+
 /**
  * The quick-filter panel has no test id of its own, and it only mounts once the
  * workspace's filters have answered.
@@ -143,3 +172,24 @@ export const NoExternalCalls: Story = {
 export const Loading: Story = {
 	args: { dataState: 'loading' },
 };
+
+/** The editable quick-filter settings panel. */
+export const QuickFiltersSettings: Story = {
+	play: openQuickFiltersSettings,
+};
+
+/** Settings with an unsaved filter removal and the fixed action footer. */
+export const QuickFiltersSettingsDirty: Story = {
+	play: dirtyQuickFiltersSettings,
+};
+
+/**
+ * The same panel with a banner above the shell. The banner takes 48px off the
+ * layout, so this is the case where the footer used to be pushed off screen:
+ * the panel is sized from the filters pane rather than the viewport, which
+ * keeps Save changes reachable.
+ */
+export const QuickFiltersSettingsWithBanner: Story = {
+	args: { banner: 'trial-expiry' },
+	play: dirtyQuickFiltersSettings,
+};

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/hooks/usePanelTypeSwitch.ts

@@ -7,10 +7,8 @@ import type {
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	handleQueryChange,
-	type PartialPanelTypes,
-} from 'lib/query/panelQuery';
+import { handleQueryChange } from 'lib/query/panelQuery';
+import type { PartialPanelTypes } from 'lib/query/panelTypeDataSourceFormValuesMap';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { DashboardDetailEvents } from 'pages/DashboardPage/constants/events';
 import type {

frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss

@@ -1,13 +1,4 @@
 .infra-monitoring-module-container {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	.ant-tabs {
-		height: 100%;
-	}
-
 	.ant-tabs-nav {
 		padding: 0 8px;
 		margin-bottom: 0px;
@@ -17,22 +8,6 @@
 		}
 	}
 
-	.ant-tabs-content-holder {
-		display: flex;
-
-		.ant-tabs-content {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-
-			.ant-tabs-tabpane {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-			}
-		}
-	}
-
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoringPage.tsx

@@ -13,8 +13,11 @@ export default function InfrastructureMonitoringPage(): JSX.Element {
 	const routes: TabRoutes[] = [Hosts, Kubernetes];
 
 	return (
-		<div className="infra-monitoring-module-container">
-			<RouteTab routes={routes} activeKey={pathname} history={history} />
-		</div>
+		<RouteTab
+			className="infra-monitoring-module-container"
+			routes={routes}
+			activeKey={pathname}
+			history={history}
+		/>
 	);
 }

frontend/src/pages/LLMObservability/Explorer/stories/Explorer.stories.tsx

@@ -146,11 +146,39 @@ export const Failed: Story = {
 	parameters: { allowConsoleErrors: true },
 };
 
+const dirtyQuickFiltersSettings = async (): Promise<void> => {
+	await openQuickFiltersSettings();
+
+	// One Remove per added filter; the first row's is the one clicked.
+	const [removeFilter] = await screen.findAllByRole('button', {
+		name: 'Remove',
+	});
+
+	await userEvent.click(removeFilter);
+	await screen.findByRole('button', { name: 'Save changes' });
+};
+
 /** The editable quick-filter settings panel. */
 export const QuickFiltersSettings: Story = {
 	play: openQuickFiltersSettings,
 };
 
+/** Settings with an unsaved filter removal and the fixed action footer. */
+export const QuickFiltersSettingsDirty: Story = {
+	play: dirtyQuickFiltersSettings,
+};
+
+/**
+ * The same panel with a banner above the shell. The banner takes 48px off the
+ * layout, so this is the case where the footer used to be pushed off screen:
+ * the panel is sized from the filters pane rather than the viewport, which
+ * keeps Save changes reachable.
+ */
+export const QuickFiltersSettingsWithBanner: Story = {
+	args: { banner: 'trial-expiry' },
+	play: dirtyQuickFiltersSettings,
+};
+
 /** A quick-filter value selected against the LLM span query. */
 export const QuickFilterSelected: Story = {
 	play: async ({ canvasElement }): Promise<void> => {

frontend/src/pages/LogsModulePage/LogsModulePage.styles.scss

@@ -1,16 +1,4 @@
 .logs-module-container {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-
-	.ant-tabs {
-		flex: 1;
-		min-height: 0;
-		display: flex;
-		flex-direction: column;
-	}
-
 	.ant-tabs-nav {
 		padding: 0 16px;
 		margin-bottom: 0px;
@@ -20,25 +8,6 @@
 		}
 	}
 
-	.ant-tabs-content-holder {
-		display: flex;
-		min-height: 0;
-
-		.ant-tabs-content {
-			flex: 1;
-			min-height: 0;
-			display: flex;
-			flex-direction: column;
-
-			.ant-tabs-tabpane {
-				flex: 1;
-				min-height: 0;
-				display: flex;
-				flex-direction: column;
-			}
-		}
-	}
-
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/LogsModulePage/LogsModulePage.tsx

@@ -13,8 +13,11 @@ export default function LogsModulePage(): JSX.Element {
 	const routes: TabRoutes[] = [logsExplorer, logsPipelines, logSaveView];
 
 	return (
-		<div className="logs-module-container">
-			<RouteTab routes={routes} activeKey={pathname} history={history} />
-		</div>
+		<RouteTab
+			className="logs-module-container"
+			routes={routes}
+			activeKey={pathname}
+			history={history}
+		/>
 	);
 }

frontend/src/pages/LogsModulePage/stories/LogsModulePage.stories.tsx

@@ -166,18 +166,31 @@ export const QuickFiltersSettings: Story = {
 	play: openQuickFiltersSettings,
 };
 
+const dirtyQuickFiltersSettings = async (): Promise<void> => {
+	await openQuickFiltersSettings();
+	// One Remove per added filter; the first row's is the one clicked.
+	const [removeFilter] = await screen.findAllByRole('button', {
+		name: 'Remove',
+	});
+
+	await userEvent.click(removeFilter);
+	await screen.findByRole('button', { name: 'Save changes' });
+};
+
 /** Settings with an unsaved filter removal and the fixed action footer. */
 export const QuickFiltersSettingsDirty: Story = {
-	play: async (): Promise<void> => {
-		await openQuickFiltersSettings();
-		// One Remove per added filter; the first row's is the one clicked.
-		const [removeFilter] = await screen.findAllByRole('button', {
-			name: 'Remove',
-		});
+	play: dirtyQuickFiltersSettings,
+};
 
-		await userEvent.click(removeFilter);
-		await screen.findByRole('button', { name: 'Save changes' });
-	},
+/**
+ * The same panel with a banner above the shell. The banner takes 48px off the
+ * layout, so this is the case where the footer used to be pushed off screen:
+ * the panel is sized from the filters pane rather than the viewport, which
+ * keeps Save changes reachable.
+ */
+export const QuickFiltersSettingsWithBanner: Story = {
+	args: { banner: 'trial-expiry' },
+	play: dirtyQuickFiltersSettings,
 };
 
 /**

frontend/src/pages/MessagingQueues/MessagingQueuesMainPage.styles.scss

@@ -1,13 +1,4 @@
 .messaging-queues-module-container {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	.ant-tabs {
-		height: 100%;
-	}
-
 	.ant-tabs-nav {
 		padding: 0 8px;
 		margin-bottom: 0px;
@@ -17,22 +8,6 @@
 		}
 	}
 
-	.ant-tabs-content-holder {
-		display: flex;
-
-		.ant-tabs-content {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-
-			.ant-tabs-tabpane {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-			}
-		}
-	}
-
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/MessagingQueues/MessagingQueuesMainPage.tsx

@@ -68,8 +68,11 @@ export default function MessagingQueuesMainPage(): JSX.Element {
 	];
 
 	return (
-		<div className="messaging-queues-module-container">
-			<RouteTab routes={routes} activeKey={pathname} history={history} />
-		</div>
+		<RouteTab
+			className="messaging-queues-module-container"
+			routes={routes}
+			activeKey={pathname}
+			history={history}
+		/>
 	);
 }

frontend/src/pages/MeterExplorer/MeterExplorerPage.tsx

@@ -14,14 +14,13 @@ function MeterExplorerPage(): JSX.Element {
 	const routes: TabRoutes[] = [Meter, Explorer, Views];
 
 	return (
-		<div className="meter-explorer-page">
-			<RouteTab
-				routes={routes}
-				activeKey={pathname}
-				history={history}
-				defaultActiveKey={ROUTES.METER}
-			/>
-		</div>
+		<RouteTab
+			className="meter-explorer-page"
+			routes={routes}
+			activeKey={pathname}
+			history={history}
+			defaultActiveKey={ROUTES.METER}
+		/>
 	);
 }
 

frontend/src/pages/MeterExplorer/stories/MeterExplorer.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, screen, userEvent, waitFor } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
@@ -18,6 +19,7 @@ const pageStory = storyMocks(meterMocks, { layout: 'app' });
  */
 const meta = {
 	title: 'Pages/Metering/Cost Meter',
+	tags: ['play'],
 	component: MeterExplorerPage,
 	...pageStory,
 	parameters: { ...pageStory.parameters },
@@ -27,6 +29,38 @@ export default meta;
 
 type Story = StoryObj<MeterArgs>;
 
+/** The page fetches before it renders its filters, which outlasts the 1s default. */
+const untilLoaded = { timeout: 15_000 };
+
+const openQuickFiltersSettings = async (): Promise<void> => {
+	// The settings control renders disabled while its permission check is in
+	// flight and is swapped for the enabled one once the check answers, so it is
+	// looked up again on every attempt; a click on the disabled one is dropped in
+	// silence.
+	const control = await waitFor(() => {
+		const settings = screen.getByTestId('settings-icon-container');
+
+		expect(settings).toBeEnabled();
+
+		return settings;
+	}, untilLoaded);
+
+	await userEvent.click(control);
+	await screen.findByText('Edit quick filters', undefined, untilLoaded);
+};
+
+const dirtyQuickFiltersSettings = async (): Promise<void> => {
+	await openQuickFiltersSettings();
+
+	// One Remove per added filter; the first row's is the one clicked.
+	const [removeFilter] = await screen.findAllByRole('button', {
+		name: 'Remove',
+	});
+
+	await userEvent.click(removeFilter);
+	await screen.findByRole('button', { name: 'Save changes' });
+};
+
 /**
  * The Meter tab over the last day: what the workspace ingested in total, then
  * the hourly count and size of log records, of spans, and the metric datapoints
@@ -88,3 +122,26 @@ export const ExplorerWithoutQuickFilters: Story = {
 export const ViewsEmpty: Story = {
 	args: { tab: 'views', savedViews: 0 },
 };
+
+/** The editable quick-filter settings panel, which lives on the Explorer tab. */
+export const QuickFiltersSettings: Story = {
+	args: { tab: 'explorer' },
+	play: openQuickFiltersSettings,
+};
+
+/** Settings with an unsaved filter removal and the fixed action footer. */
+export const QuickFiltersSettingsDirty: Story = {
+	args: { tab: 'explorer' },
+	play: dirtyQuickFiltersSettings,
+};
+
+/**
+ * The same panel with a banner above the shell. The banner takes 48px off the
+ * layout, so this is the case where the footer used to be pushed off screen:
+ * the panel is sized from the filters pane rather than the viewport, which
+ * keeps Save changes reachable.
+ */
+export const QuickFiltersSettingsWithBanner: Story = {
+	args: { tab: 'explorer', banner: 'trial-expiry' },
+	play: dirtyQuickFiltersSettings,
+};

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss

@@ -1,13 +1,4 @@
 .metrics-explorer-page {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	.ant-tabs {
-		height: 100%;
-	}
-
 	.ant-tabs-nav {
 		padding-left: 16px;
 		margin-bottom: 0px;
@@ -18,20 +9,7 @@
 	}
 
 	.ant-tabs-content-holder {
-		display: flex;
 		padding: 16px;
-
-		.ant-tabs-content {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-
-			.ant-tabs-tabpane {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-			}
-		}
 	}
 
 	.tab-item {

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.tsx

@@ -42,9 +42,12 @@ function MetricsExplorerPage(): JSX.Element {
 	useShareBuilderUrl({ defaultValue: defaultQuery });
 
 	return (
-		<div className="metrics-explorer-page">
-			<RouteTab routes={routes} activeKey={pathname} history={history} />
-		</div>
+		<RouteTab
+			className="metrics-explorer-page"
+			routes={routes}
+			activeKey={pathname}
+			history={history}
+		/>
 	);
 }
 

frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss

@@ -65,8 +65,6 @@
 }
 
 .trace-explorer-page {
-	display: flex;
-
 	// Meant to fix the query builder colors
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);
@@ -75,32 +73,8 @@
 	--input-hover-border-color: var(--internal-ant-border-color-hover);
 	--input-focus-border-color: var(--internal-ant-border-color-hover);
 
-	.filter {
-		width: 260px;
-		height: 100%;
-		min-height: 100vh;
-
-		border-right: 0px;
-		border: 1px solid var(--l1-border);
-		background-color: var(--l1-background);
-
-		> .ant-card-body {
-			padding: 0;
-			width: 258px;
-		}
-	}
-
 	.trace-explorer {
-		width: 100%;
 		background: var(--l1-background);
-
-		> .ant-card-body {
-			padding: 0;
-		}
-
 		border-color: var(--l1-border);
 	}
-	.trace-explorer.filters-expanded {
-		width: calc(100% - 260px);
-	}
 }

frontend/src/pages/TracesExplorer/index.tsx

@@ -2,12 +2,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
-import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFilters from 'components/QuickFilters/QuickFilters';
+import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -261,23 +259,20 @@ function TracesExplorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<div className="trace-explorer-page">
-				<Card className="filter" hidden={!isOpen}>
-					<QuickFilters
-						className="qf-traces-explorer"
-						source={QuickFiltersSource.TRACES_EXPLORER}
-						signal={SignalType.TRACES}
-						handleFilterVisibilityChange={(): void => {
-							setOpen(!isOpen);
-						}}
-						useFieldApis={quickFilterFieldApis}
-					/>
-				</Card>
-				<div
-					className={cx('trace-explorer', {
-						'filters-expanded': isOpen,
-					})}
-				>
+			<QuickFiltersLayout
+				className="trace-explorer-page"
+				showFilters={isOpen}
+				quickFilterProps={{
+					className: 'qf-traces-explorer',
+					source: QuickFiltersSource.TRACES_EXPLORER,
+					signal: SignalType.TRACES,
+					handleFilterVisibilityChange: (): void => {
+						setOpen(!isOpen);
+					},
+					useFieldApis: quickFilterFieldApis,
+				}}
+			>
+				<div className="trace-explorer">
 					<div className="trace-explorer-header">
 						<Toolbar
 							showAutoRefresh
@@ -369,7 +364,7 @@ function TracesExplorer(): JSX.Element {
 						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				</div>
-			</div>
+			</QuickFiltersLayout>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/pages/TracesModulePage/TracesModulePage.tsx

@@ -25,16 +25,15 @@ function TracesModulePage(): JSX.Element {
 	};
 
 	return (
-		<div className="traces-module-container">
-			<RouteTab
-				routes={routes}
-				activeKey={
-					pathname.includes(ROUTES.TRACES_FUNNELS) ? ROUTES.TRACES_FUNNELS : pathname
-				}
-				history={history}
-				onChangeHandler={handleTabChange}
-			/>
-		</div>
+		<RouteTab
+			className="traces-module-container"
+			routes={routes}
+			activeKey={
+				pathname.includes(ROUTES.TRACES_FUNNELS) ? ROUTES.TRACES_FUNNELS : pathname
+			}
+			history={history}
+			onChangeHandler={handleTabChange}
+		/>
 	);
 }
 

frontend/src/pages/TracesModulePage/stories/TracesModulePage.stories.tsx

@@ -116,16 +116,29 @@ export const QuickFiltersSettings: Story = {
 	play: openQuickFiltersSettings,
 };
 
+const dirtyQuickFiltersSettings = async (): Promise<void> => {
+	await openQuickFiltersSettings();
+	// One Remove per added filter; the first row's is the one clicked.
+	const [removeFilter] = await screen.findAllByRole('button', {
+		name: 'Remove',
+	});
+
+	await userEvent.click(removeFilter);
+	await screen.findByRole('button', { name: 'Save changes' });
+};
+
 /** Settings with an unsaved filter removal and the fixed action footer. */
 export const QuickFiltersSettingsDirty: Story = {
-	play: async (): Promise<void> => {
-		await openQuickFiltersSettings();
-		// One Remove per added filter; the first row's is the one clicked.
-		const [removeFilter] = await screen.findAllByRole('button', {
-			name: 'Remove',
-		});
-
-		await userEvent.click(removeFilter);
-		await screen.findByRole('button', { name: 'Save changes' });
-	},
+	play: dirtyQuickFiltersSettings,
+};
+
+/**
+ * The same panel with a banner above the shell. The banner takes 48px off the
+ * layout, so this is the case where the footer used to be pushed off screen:
+ * the panel is sized from the filters pane rather than the viewport, which
+ * keeps Save changes reachable.
+ */
+export const QuickFiltersSettingsWithBanner: Story = {
+	args: { banner: 'trial-expiry' },
+	play: dirtyQuickFiltersSettings,
 };

frontend/src/providers/QueryBuilder.tsx

@@ -32,7 +32,7 @@ import ROUTES from 'constants/routes';
 import {
 	panelTypeDataSourceFormValuesMap,
 	PartialPanelTypes,
-} from 'lib/query/panelQuery';
+} from 'lib/query/panelTypeDataSourceFormValuesMap';
 import { OptionsQuery } from 'container/OptionsMenu/types';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
@@ -767,12 +767,11 @@ export function QueryBuilderProvider({
 							queryItem.dataSource
 						].builder.queryData;
 
-					// `dataSource` travels with the panel type's fields, but is appended to a
-					// copy: `propsRequired` is the list held in
-					// `panelTypeDataSourceFormValuesMap`, and pushing onto it grew that
-					// module-level array by one entry on every call.
+					// `dataSource` travels with the panel type's fields, but on a copy:
+					// `propsRequired` is the list the map holds, and pushing onto it grew
+					// that array by one entry on every call.
 					if (propsRequired) {
-						[...propsRequired, 'dataSource'].forEach((p: any) => {
+						[...propsRequired, 'dataSource'].forEach((p) => {
 							set(queryItem, p, get(newQueryItem, p));
 						});
 					}

frontend/src/utils/__tests__/timeUtils.test.ts

@@ -0,0 +1,36 @@
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import dayjs from 'dayjs';
+
+import { formatTimestampOmittingTodaysDate } from '../timeUtils';
+
+describe('formatTimestampOmittingTodaysDate', () => {
+	const timezone = 'Asia/Kolkata';
+
+	it('drops the date for a point on the current day', () => {
+		const now = dayjs().tz(timezone);
+
+		expect(formatTimestampOmittingTodaysDate(now.valueOf(), timezone)).toBe(
+			now.format(DATE_TIME_FORMATS.TIME_SECONDS),
+		);
+	});
+
+	it('keeps the date for a point on any other day', () => {
+		const yesterday = dayjs().tz(timezone).subtract(1, 'day');
+
+		expect(formatTimestampOmittingTodaysDate(yesterday.valueOf(), timezone)).toBe(
+			yesterday.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS),
+		);
+	});
+
+	it('honours an explicit format over the day check', () => {
+		const now = dayjs().tz(timezone);
+
+		expect(
+			formatTimestampOmittingTodaysDate(
+				now.valueOf(),
+				timezone,
+				DATE_TIME_FORMATS.ISO_DATETIME_SECONDS,
+			),
+		).toBe(now.format(DATE_TIME_FORMATS.ISO_DATETIME_SECONDS));
+	});
+});

frontend/src/utils/timeUtils.ts

@@ -342,3 +342,22 @@ export const getMs = (value: string): string =>
 			})
 			.format('SSS'),
 	).toFixed(2);
+
+/** `overrideFormat`, when given, wins over the same-day check. */
+export const formatTimestampOmittingTodaysDate = (
+	timestampMs: number,
+	timezone: string,
+	overrideFormat?: string,
+): string => {
+	const time = dayjs(timestampMs).tz(timezone);
+
+	if (overrideFormat) {
+		return time.format(overrideFormat);
+	}
+
+	return time.format(
+		time.isSame(dayjs().tz(timezone), 'day')
+			? DATE_TIME_FORMATS.TIME_SECONDS
+			: DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS,
+	);
+};

pkg/apiserver/signozapiserver/ruler.go

@@ -15,10 +15,26 @@ func (provider *provider) addRulerRoutes(router *mux.Router) error {
 		ID:                  "ListRules",
 		Tags:                []string{"rules"},
 		Summary:             "List alert rules",
-		Description:         "This endpoint lists all alert rules with their current evaluation state",
+		Description:         "This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.",
 		Response:            make([]*ruletypes.Rule, 0),
 		ResponseContentType: "application/json",
 		SuccessStatusCode:   http.StatusOK,
+		Deprecated:          true,
+		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+	})).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v3/rules", handler.New(provider.authzMiddleware.ViewAccess(provider.rulerHandler.ListRulesV3), handler.OpenAPIDef{
+		ID:                  "ListRulesV3",
+		Tags:                []string{"rules"},
+		Summary:             "List alert rules (v3)",
+		Description:         "Returns a page of alert rules with their current evaluation state, trimmed to the fields the list page renders. Supports a filter DSL (`query`), a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). In the filter DSL, a non-reserved key is matched as a rule label directly (`team = infra`); a key that collides with a reserved keyword matches either interpretation (negative operators exclude both), and `labels.<key>` targets only the label. The response also carries the org's label pairs and the reserved filter keys for building filter suggestions.",
+		RequestQuery:        new(ruletypes.ListRulesParams),
+		Response:            new(ruletypes.ListableRules),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusBadRequest},
 		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
 	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err

pkg/modules/dashboard/impldashboard/fs/definitions/ai-o11y-overview.json

@@ -1,5 +1,5 @@
 {
-  "version": 2,
+  "version": 3,
   "definition": {
     "schemaVersion": "v6",
     "name": "signoz---ai-o11y-overview",
@@ -437,7 +437,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -489,7 +489,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -722,7 +722,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -782,7 +782,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -850,7 +850,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -868,7 +868,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -886,7 +886,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -904,7 +904,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -961,7 +961,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -979,7 +979,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -997,7 +997,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -1015,7 +1015,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -1076,7 +1076,7 @@
                             "stepInterval": 0,
                             "disabled": true,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -1175,7 +1175,7 @@
                             "stepInterval": 0,
                             "disabled": true,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -1192,7 +1192,7 @@
                             "stepInterval": 0,
                             "disabled": true,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -1248,7 +1248,7 @@
                     "spec": {
                       "queries": [
                         {
-                          "type": "builder_query",
+                          "type": "builder_ai_query",
                           "spec": {
                             "name": "A",
                             "signal": "traces",
@@ -1282,7 +1282,7 @@
                           }
                         },
                         {
-                          "type": "builder_query",
+                          "type": "builder_ai_query",
                           "spec": {
                             "name": "B",
                             "signal": "traces",
@@ -1353,7 +1353,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -2075,7 +2075,7 @@
                             "stepInterval": 0,
                             "disabled": false,
                             "filter": {
-                              "expression": "gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
+                              "expression": "gen_ai.request.model EXISTS AND gen_ai.request.model IN $model AND gen_ai.provider.name IN $provider AND deployment.environment IN $environment AND service.name IN $service_name"
                             },
                             "aggregations": [
                               {
@@ -2724,7 +2724,7 @@
                     "spec": {
                       "queries": [
                         {
-                          "type": "builder_query",
+                          "type": "builder_ai_query",
                           "spec": {
                             "name": "A",
                             "signal": "traces",

pkg/modules/spanmapper/implspanmapper/fs/definitions/gen_ai.agent.json

@@ -1,5 +1,5 @@
 {
-  "version": 1,
+  "version": 2,
   "definition": {
     "name": "gen_ai.agent",
     "condition": {
@@ -68,7 +68,7 @@
             {
               "key": "final_result",
               "context": "attribute",
-              "operation": "copy",
+              "operation": "move",
               "priority": 10
             }
           ]

pkg/modules/spanmapper/implspanmapper/fs/definitions/gen_ai.llm.json

@@ -1,5 +1,5 @@
 {
-  "version": 2,
+  "version": 3,
   "definition": {
     "name": "gen_ai.llm",
     "condition": {
@@ -250,19 +250,19 @@
             {
               "key": "gen_ai.prompt",
               "context": "attribute",
-              "operation": "copy",
+              "operation": "move",
               "priority": 30
             },
             {
               "key": "ai.prompt.messages",
               "context": "attribute",
-              "operation": "copy",
+              "operation": "move",
               "priority": 20
             },
             {
               "key": "input.value",
               "context": "attribute",
-              "operation": "copy",
+              "operation": "move",
               "priority": 10
             }
           ]
@@ -276,25 +276,25 @@
             {
               "key": "gen_ai.completion",
               "context": "attribute",
-              "operation": "copy",
+              "operation": "move",
               "priority": 30
             },
             {
               "key": "ai.response.toolCalls",
               "context": "attribute",
-              "operation": "copy",
+              "operation": "move",
               "priority": 25
             },
             {
               "key": "ai.response.text",
               "context": "attribute",
-              "operation": "copy",
+              "operation": "move",
               "priority": 20
             },
             {
               "key": "output.value",
               "context": "attribute",
-              "operation": "copy",
+              "operation": "move",
               "priority": 10
             }
           ]

pkg/query-service/rules/filterquery.go

@@ -0,0 +1,20 @@
+package rules
+
+import (
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/parser/filterquery/sqlcompiler"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
+)
+
+// Compile wraps compiler errors in the rules list filter error code.
+func CompileListFilter(query string, formatter sqlstore.SQLFormatter) (*sqlcompiler.Compiled, error) {
+	compiled, errs := sqlcompiler.Compile(query, formatter, ruleFieldResolver{})
+	if len(errs) > 0 {
+		return nil, errors.NewInvalidInputf(ruletypes.ErrCodeRuleListFilterInvalid,
+			"invalid filter query: %s", strings.Join(errs, "; "))
+	}
+	return compiled, nil
+}

pkg/query-service/rules/filterquery_resolver.go

@@ -0,0 +1,196 @@
+package rules
+
+import (
+	"fmt"
+	"slices"
+	"strings"
+
+	grammar "github.com/SigNoz/signoz/pkg/parser/filterquery/grammar"
+	"github.com/SigNoz/signoz/pkg/parser/filterquery/sqlcompiler"
+	qbtypesv5 "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
+)
+
+const (
+	ruleDataColumn  = "rule.data"
+	ruleLabelsField = "labels"
+	nameJSONPath    = "$.alert"
+	descriptionPath = "$.description"
+	labelsJSONPath  = "$.labels"
+	alertTypePath   = "$.alertType"
+	ruleTypePath    = "$.ruleType"
+)
+
+// ruleFieldResolver maps rule list DSL keys; a non-reserved key is a case-sensitive label lookup.
+type ruleFieldResolver struct{}
+
+func (r ruleFieldResolver) ResolveComparison(v *sqlcompiler.Visitor, rawKey string, operation qbtypesv5.FilterOperator, ctx *grammar.ComparisonContext) string {
+	key := strings.ToLower(rawKey)
+
+	// labels.<key> is the explicit way to target only the label on a reserved-key collision.
+	if strings.HasPrefix(key, ruletypes.DSLLabelsKeyPrefix) {
+		labelKey := rawKey[len(ruletypes.DSLLabelsKeyPrefix):]
+		if labelKey == "" {
+			v.AddError("labels filter is missing a key, use labels.<key>")
+			return ""
+		}
+		if _, allowed := ruletypes.LabelsKeyOps[operation]; !allowed {
+			v.AddError("operator %s is not allowed on a labels.<key> filter", sqlcompiler.OperationName(operation))
+			return ""
+		}
+		return r.labelComparison(v, ctx, operation, labelKey)
+	}
+
+	allowedOperations, isReserved := ruletypes.ReservedOps[ruletypes.DSLKey(key)]
+	_, labelAllowed := ruletypes.LabelsKeyOps[operation]
+
+	if !isReserved {
+		if !labelAllowed {
+			v.AddError("operator %s is not allowed on the label filter %q", sqlcompiler.OperationName(operation), rawKey)
+			return ""
+		}
+		return r.labelComparison(v, ctx, operation, rawKey)
+	}
+
+	_, reservedAllowed := allowedOperations[operation]
+	// reserved severity is itself the severity-label lookup; an identical spelling would duplicate the predicate
+	if ruletypes.DSLKey(key) == ruletypes.DSLKeySeverity && rawKey == string(ruletypes.DSLKeySeverity) {
+		labelAllowed = false
+	}
+
+	switch {
+	case reservedAllowed && labelAllowed:
+		reservedPredicate := r.resolveReservedKey(v, ctx, operation, ruletypes.DSLKey(key))
+		labelPredicate := r.labelComparison(v, ctx, operation, rawKey)
+		if reservedPredicate == "" || labelPredicate == "" {
+			return ""
+		}
+		// the key matches both the reserved field and a same-named label; a negative term must exclude both
+		if operation.IsNegativeOperator() {
+			return v.Sb.And(reservedPredicate, labelPredicate)
+		}
+		return v.Sb.Or(reservedPredicate, labelPredicate)
+	case reservedAllowed:
+		return r.resolveReservedKey(v, ctx, operation, ruletypes.DSLKey(key))
+	case labelAllowed:
+		return r.labelComparison(v, ctx, operation, rawKey)
+	default:
+		v.AddError("operator %s is not allowed for key %q", sqlcompiler.OperationName(operation), key)
+		return ""
+	}
+}
+
+func (r ruleFieldResolver) resolveReservedKey(v *sqlcompiler.Visitor, ctx *grammar.ComparisonContext, operation qbtypesv5.FilterOperator, key ruletypes.DSLKey) string {
+	switch key {
+	case ruletypes.DSLKeyName:
+		columnExpression := string(v.Formatter.JSONExtractString(ruleDataColumn, nameJSONPath))
+		return v.BuildStringOperation(v.Sb, ctx, operation, columnExpression, string(key))
+	case ruletypes.DSLKeySeverity:
+		// severity is an alias for labels.severity, sharing its missing-label semantics.
+		return r.labelComparison(v, ctx, operation, "severity")
+	case ruletypes.DSLKeyCreatedBy:
+		return v.BuildStringOperation(v.Sb, ctx, operation, "rule.created_by", string(key))
+	case ruletypes.DSLKeyUpdatedBy:
+		return v.BuildStringOperation(v.Sb, ctx, operation, "rule.updated_by", string(key))
+	case ruletypes.DSLKeyCreatedAt:
+		return v.BuildTimestampComparison(ctx, operation, "rule.created_at")
+	case ruletypes.DSLKeyUpdatedAt:
+		return v.BuildTimestampComparison(ctx, operation, "rule.updated_at")
+	case ruletypes.DSLKeyAlertType:
+		return r.enumComparison(v, ctx, operation, key, alertTypePath, alertTypeValues)
+	case ruletypes.DSLKeyRuleType:
+		return r.enumComparison(v, ctx, operation, key, ruleTypePath, ruleTypeValues)
+	}
+	v.AddError("no handler for reserved key %q", key)
+	return ""
+}
+
+// A missing label evaluates as the empty string for every value operator; EXISTS/NOT EXISTS test the raw extraction.
+func (ruleFieldResolver) labelComparison(v *sqlcompiler.Visitor, ctx *grammar.ComparisonContext, operation qbtypesv5.FilterOperator, labelKey string) string {
+	columnExpression := string(v.Formatter.JSONExtractMapValue(ruleDataColumn, ruleLabelsField, labelKey))
+
+	switch operation {
+	case qbtypesv5.FilterOperatorExists:
+		return fmt.Sprintf("%s IS NOT NULL", columnExpression)
+	case qbtypesv5.FilterOperatorNotExists:
+		return fmt.Sprintf("%s IS NULL", columnExpression)
+	}
+
+	keyForError := ruletypes.DSLLabelsKeyPrefix + labelKey
+	columnExpression = fmt.Sprintf("COALESCE(%s, '')", columnExpression)
+	return v.BuildStringOperation(v.Sb, ctx, operation, columnExpression, keyForError)
+}
+
+func (ruleFieldResolver) enumComparison(v *sqlcompiler.Visitor, ctx *grammar.ComparisonContext, operation qbtypesv5.FilterOperator, key ruletypes.DSLKey, jsonPath string, allowedValues []string) string {
+	columnExpression := string(v.Formatter.JSONExtractString(ruleDataColumn, jsonPath))
+
+	var values []string
+	switch operation {
+	case qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual:
+		value, ok := v.ExtractSingleStringValue(ctx, string(key))
+		if !ok {
+			return ""
+		}
+		values = []string{value}
+	case qbtypesv5.FilterOperatorIn, qbtypesv5.FilterOperatorNotIn:
+		list, ok := v.ExtractStringValueList(ctx, string(key))
+		if !ok {
+			return ""
+		}
+		values = list
+	default:
+		v.AddError("operator %s on %q is not implemented", sqlcompiler.OperationName(operation), key)
+		return ""
+	}
+
+	for _, value := range values {
+		if !slices.Contains(allowedValues, value) {
+			v.AddError("invalid value %q for %q, expected one of: %s", value, key, strings.Join(allowedValues, ", "))
+			return ""
+		}
+	}
+
+	arguments := make([]any, len(values))
+	for i, s := range values {
+		arguments[i] = s
+	}
+	switch operation {
+	case qbtypesv5.FilterOperatorEqual:
+		return v.Sb.Equal(columnExpression, arguments[0])
+	case qbtypesv5.FilterOperatorNotEqual:
+		return v.Sb.NotEqual(columnExpression, arguments[0])
+	case qbtypesv5.FilterOperatorNotIn:
+		return v.Sb.NotIn(columnExpression, arguments...)
+	default:
+		return v.Sb.In(columnExpression, arguments...)
+	}
+}
+
+// ResolveFreeText searches name, description and the raw labels JSON (which also matches label keys).
+func (ruleFieldResolver) ResolveFreeText(v *sqlcompiler.Visitor, value string) string {
+	nameColumn := string(v.Formatter.JSONExtractString(ruleDataColumn, nameJSONPath))
+	descriptionColumn := string(v.Formatter.JSONExtractString(ruleDataColumn, descriptionPath))
+	labelsColumn := string(v.Formatter.JSONExtractString(ruleDataColumn, labelsJSONPath))
+
+	return v.Sb.Or(
+		v.BuildFreeTextContains(v.Sb, nameColumn, value),
+		v.BuildFreeTextContains(v.Sb, descriptionColumn, value),
+		v.BuildFreeTextContains(v.Sb, labelsColumn, value),
+	)
+}
+
+var alertTypeValues = func() []string {
+	values := make([]string, 0, 4)
+	for _, value := range (ruletypes.AlertType("")).Enum() {
+		values = append(values, string(value.(ruletypes.AlertType)))
+	}
+	return values
+}()
+
+var ruleTypeValues = func() []string {
+	values := make([]string, 0, 3)
+	for _, value := range (ruletypes.RuleType{}).Enum() {
+		values = append(values, value.(ruletypes.RuleType).StringValue())
+	}
+	return values
+}()

pkg/query-service/rules/filterquery_test.go

@@ -0,0 +1,488 @@
+package rules
+
+import (
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/DATA-DOG/go-sqlmock"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstoretest"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
+)
+
+type compileCase struct {
+	subtestName              string
+	dslQueryToCompile        string
+	emptyQueryExpected       bool
+	expectedSQL              string
+	expectedArgs             []any
+	expectedErrShouldContain string
+}
+
+func runCompileCases(t *testing.T, cases []compileCase) {
+	t.Helper()
+	for _, c := range cases {
+		t.Run(c.subtestName, func(t *testing.T) {
+			out, err := CompileListFilter(c.dslQueryToCompile, formatter(t))
+
+			if c.expectedErrShouldContain != "" {
+				require.Error(t, err)
+				assert.Contains(t, strings.ToLower(err.Error()), strings.ToLower(c.expectedErrShouldContain))
+				return
+			}
+
+			require.NoError(t, err)
+			if c.emptyQueryExpected {
+				assert.True(t, out.IsEmpty())
+				return
+			}
+			require.NotNil(t, out)
+
+			if c.expectedSQL != "" {
+				assert.Equal(t, normalizeSQL(c.expectedSQL), normalizeSQL(out.SQL))
+			}
+			if c.expectedArgs != nil {
+				require.Len(t, out.Args, len(c.expectedArgs))
+				for i, want := range c.expectedArgs {
+					// Equal instants can differ in *Location, so compare via .Equal() instead of DeepEqual.
+					if wantT, ok := want.(time.Time); ok {
+						gotT, ok := out.Args[i].(time.Time)
+						require.True(t, ok, "arg[%d]: want time.Time, got %T", i, out.Args[i])
+						assert.True(t, wantT.Equal(gotT), "arg[%d]: want %s, got %s", i, wantT, gotT)
+						continue
+					}
+					assert.Equal(t, want, out.Args[i], "arg[%d]", i)
+				}
+			}
+		})
+	}
+}
+
+func TestCompileEmpty(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{subtestName: "EmptyQuery_Nil", dslQueryToCompile: "", emptyQueryExpected: true},
+		{subtestName: "WhitespaceQuery_Nil", dslQueryToCompile: "   ", emptyQueryExpected: true},
+	})
+}
+
+func TestCompileName(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "NameEquals_MatchesReservedOrLabel",
+			dslQueryToCompile: "name = 'payment latency'",
+			expectedSQL:       `(json_extract("rule"."data", '$.alert') = ? OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') = ?)`,
+			expectedArgs:      []any{"payment latency", "payment latency"},
+		},
+		{
+			subtestName:       "NameContains_EscapesWildcardsBothSides",
+			dslQueryToCompile: "name CONTAINS '50%'",
+			expectedSQL:       `(json_extract("rule"."data", '$.alert') LIKE ? ESCAPE '\' OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') LIKE ? ESCAPE '\')`,
+			expectedArgs:      []any{`%50\%%`, `%50\%%`},
+		},
+		{
+			subtestName:       "NameILike",
+			dslQueryToCompile: "name ILIKE 'Prod%'",
+			expectedSQL:       `(lower(json_extract("rule"."data", '$.alert')) LIKE LOWER(?) ESCAPE '\' OR lower(COALESCE(json_extract("rule"."data", '$.labels."name"'), '')) LIKE LOWER(?) ESCAPE '\')`,
+			expectedArgs:      []any{"Prod%", "Prod%"},
+		},
+		{
+			subtestName:       "NameInList",
+			dslQueryToCompile: "name IN ['a', 'b']",
+			expectedSQL:       `(json_extract("rule"."data", '$.alert') IN (?, ?) OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') IN (?, ?))`,
+			expectedArgs:      []any{"a", "b", "a", "b"},
+		},
+		{
+			subtestName:       "NameNotEquals_ExcludesBoth",
+			dslQueryToCompile: "name != 'x'",
+			expectedSQL:       `(json_extract("rule"."data", '$.alert') <> ? AND COALESCE(json_extract("rule"."data", '$.labels."name"'), '') <> ?)`,
+			expectedArgs:      []any{"x", "x"},
+		},
+		{
+			subtestName:       "NameExists_LabelOnly",
+			dslQueryToCompile: "name EXISTS",
+			expectedSQL:       `json_extract("rule"."data", '$.labels."name"') IS NOT NULL`,
+		},
+		{
+			subtestName:              "RangeOperatorOnName_Rejected",
+			dslQueryToCompile:        "name > 'x'",
+			expectedErrShouldContain: `operator > is not allowed for key "name"`,
+		},
+		{
+			subtestName:              "RegexpOnName_Rejected",
+			dslQueryToCompile:        "name REGEXP 'x.*'",
+			expectedErrShouldContain: `operator REGEXP is not allowed for key "name"`,
+		},
+	})
+}
+
+func TestCompileSeverityAndLabels(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "SeverityEquals_TargetsLabelsMap",
+			dslQueryToCompile: "severity = 'critical'",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') = ?`,
+			expectedArgs:      []any{"critical"},
+		},
+		{
+			subtestName:       "SeverityNotEquals_MissingLabelAsEmptyString",
+			dslQueryToCompile: "severity != 'critical'",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') <> ?`,
+			expectedArgs:      []any{"critical"},
+		},
+		{
+			subtestName:       "SeverityNotEqualsEmpty_ExcludesRulesWithoutSeverity",
+			dslQueryToCompile: "severity != ''",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') <> ?`,
+			expectedArgs:      []any{""},
+		},
+		{
+			subtestName:       "SeverityExists_ThroughAlias",
+			dslQueryToCompile: "severity EXISTS",
+			expectedSQL:       `json_extract("rule"."data", '$.labels."severity"') IS NOT NULL`,
+		},
+		{
+			subtestName:       "SeverityNotExists_ThroughAlias",
+			dslQueryToCompile: "severity NOT EXISTS",
+			expectedSQL:       `json_extract("rule"."data", '$.labels."severity"') IS NULL`,
+		},
+		{
+			subtestName:       "LabelEquals",
+			dslQueryToCompile: "labels.team = 'infra'",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."team"'), '') = ?`,
+			expectedArgs:      []any{"infra"},
+		},
+		{
+			subtestName:       "DottedLabelKey_OneMapEntry",
+			dslQueryToCompile: "labels.k8s.cluster = 'prod-1'",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."k8s.cluster"'), '') = ?`,
+			expectedArgs:      []any{"prod-1"},
+		},
+		{
+			subtestName:       "LabelKey_CaseSensitive",
+			dslQueryToCompile: "labels.Team = 'infra'",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."Team"'), '') = ?`,
+			expectedArgs:      []any{"infra"},
+		},
+		{
+			subtestName:       "LabelExists",
+			dslQueryToCompile: "labels.team EXISTS",
+			expectedSQL:       `json_extract("rule"."data", '$.labels."team"') IS NOT NULL`,
+		},
+		{
+			subtestName:       "LabelNotExists",
+			dslQueryToCompile: "labels.team NOT EXISTS",
+			expectedSQL:       `json_extract("rule"."data", '$.labels."team"') IS NULL`,
+		},
+		{
+			subtestName:       "LabelNotContains_IncludesLabelLessRules",
+			dslQueryToCompile: "labels.team NOT CONTAINS 'infra'",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."team"'), '') NOT LIKE ? ESCAPE '\'`,
+			expectedArgs:      []any{"%infra%"},
+		},
+		{
+			subtestName:       "LabelNotIn_IncludesLabelLessRules",
+			dslQueryToCompile: "labels.team NOT IN ['a', 'b']",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."team"'), '') NOT IN (?, ?)`,
+			expectedArgs:      []any{"a", "b"},
+		},
+	})
+}
+
+func TestCompileEnums(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "AlertTypeEquals_MatchesEnumOrLabel",
+			dslQueryToCompile: "alert_type = 'LOGS_BASED_ALERT'",
+			expectedSQL:       `(json_extract("rule"."data", '$.alertType') = ? OR COALESCE(json_extract("rule"."data", '$.labels."alert_type"'), '') = ?)`,
+			expectedArgs:      []any{"LOGS_BASED_ALERT", "LOGS_BASED_ALERT"},
+		},
+		{
+			subtestName:       "RuleTypeInList",
+			dslQueryToCompile: "rule_type IN ['threshold_rule', 'promql_rule']",
+			expectedSQL:       `(json_extract("rule"."data", '$.ruleType') IN (?, ?) OR COALESCE(json_extract("rule"."data", '$.labels."rule_type"'), '') IN (?, ?))`,
+			expectedArgs:      []any{"threshold_rule", "promql_rule", "threshold_rule", "promql_rule"},
+		},
+		{
+			subtestName:              "InvalidAlertTypeValue_Rejected",
+			dslQueryToCompile:        "alert_type = 'bogus'",
+			expectedErrShouldContain: `invalid value "bogus" for "alert_type"`,
+		},
+		{
+			subtestName:       "ContainsOnRuleType_LabelOnly",
+			dslQueryToCompile: "rule_type CONTAINS 'thresh'",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."rule_type"'), '') LIKE ? ESCAPE '\'`,
+			expectedArgs:      []any{"%thresh%"},
+		},
+	})
+}
+
+func TestCompileAuditColumns(t *testing.T) {
+	createdAt, err := time.Parse(time.RFC3339, "2026-01-02T15:04:05Z")
+	require.NoError(t, err)
+	updatedFrom, err := time.Parse(time.RFC3339, "2026-02-01T00:00:00Z")
+	require.NoError(t, err)
+	updatedTo, err := time.Parse(time.RFC3339, "2026-03-01T00:00:00Z")
+	require.NoError(t, err)
+
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "CreatedByEquals_MatchesColumnOrLabel",
+			dslQueryToCompile: "created_by = 'nikhil@signoz.io'",
+			expectedSQL:       `(rule.created_by = ? OR COALESCE(json_extract("rule"."data", '$.labels."created_by"'), '') = ?)`,
+			expectedArgs:      []any{"nikhil@signoz.io", "nikhil@signoz.io"},
+		},
+		{
+			subtestName:       "CreatedAtRange",
+			dslQueryToCompile: "created_at >= '2026-01-02T15:04:05Z'",
+			expectedSQL:       `rule.created_at >= ?`,
+			expectedArgs:      []any{createdAt},
+		},
+		{
+			subtestName:       "UpdatedAtBetween",
+			dslQueryToCompile: "updated_at BETWEEN '2026-02-01T00:00:00Z' AND '2026-03-01T00:00:00Z'",
+			expectedSQL:       `rule.updated_at BETWEEN ? AND ?`,
+			expectedArgs:      []any{updatedFrom, updatedTo},
+		},
+		{
+			subtestName:              "NonTimestampOnCreatedAt_Rejected",
+			dslQueryToCompile:        "created_at >= 'yesterday'",
+			expectedErrShouldContain: "invalid RFC3339 timestamp",
+		},
+	})
+}
+
+func TestCompileFreeText(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "BareWord_SearchesNameDescriptionLabels",
+			dslQueryToCompile: "payment",
+			expectedSQL: `(lower(COALESCE(json_extract("rule"."data", '$.alert'), '')) LIKE LOWER(?) ESCAPE '\' ` +
+				`OR lower(COALESCE(json_extract("rule"."data", '$.description'), '')) LIKE LOWER(?) ESCAPE '\' ` +
+				`OR lower(COALESCE(json_extract("rule"."data", '$.labels'), '')) LIKE LOWER(?) ESCAPE '\')`,
+			expectedArgs: []any{"%payment%", "%payment%", "%payment%"},
+		},
+	})
+}
+
+func TestCompileComposition(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "AndOfLabelAndColumn",
+			dslQueryToCompile: "labels.team = 'infra' AND created_by = 'x'",
+			expectedSQL: `(COALESCE(json_extract("rule"."data", '$.labels."team"'), '') = ? ` +
+				`AND (rule.created_by = ? OR COALESCE(json_extract("rule"."data", '$.labels."created_by"'), '') = ?))`,
+			expectedArgs: []any{"infra", "x", "x"},
+		},
+		{
+			subtestName:       "Not_WrapsInnerPredicate",
+			dslQueryToCompile: "NOT (name = 'x')",
+			expectedSQL:       `NOT ((json_extract("rule"."data", '$.alert') = ? OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') = ?))`,
+			expectedArgs:      []any{"x", "x"},
+		},
+		{
+			subtestName:       "OrOfNameAndSeverity",
+			dslQueryToCompile: "name CONTAINS 'pay' OR severity = 'critical'",
+			expectedSQL: `((json_extract("rule"."data", '$.alert') LIKE ? ESCAPE '\' OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') LIKE ? ESCAPE '\') ` +
+				`OR COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') = ?)`,
+			expectedArgs: []any{"%pay%", "%pay%", "critical"},
+		},
+	})
+}
+
+func TestCompileComplexExamples(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName: "NameContains_LabelEquals_SeverityIn_CreatedByNotEquals",
+			dslQueryToCompile: `name CONTAINS 'latency' AND labels.team = 'payments' ` +
+				`AND severity IN ['critical', 'error'] AND created_by != 'ops@signoz.io'`,
+			expectedSQL: `((json_extract("rule"."data", '$.alert') LIKE ? ESCAPE '\' OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') LIKE ? ESCAPE '\') ` +
+				`AND COALESCE(json_extract("rule"."data", '$.labels."team"'), '') = ? ` +
+				`AND COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') IN (?, ?) ` +
+				`AND (rule.created_by <> ? AND COALESCE(json_extract("rule"."data", '$.labels."created_by"'), '') <> ?))`,
+			expectedArgs: []any{"%latency%", "%latency%", "payments", "critical", "error", "ops@signoz.io", "ops@signoz.io"},
+		},
+		{
+			subtestName: "NestedOrAnd_WithParens",
+			dslQueryToCompile: `(labels.env IN ['prod', 'staging'] OR name LIKE '%prod%') ` +
+				`AND (severity = 'critical' OR labels.team EXISTS)`,
+			expectedSQL: `((COALESCE(json_extract("rule"."data", '$.labels."env"'), '') IN (?, ?) ` +
+				`OR (json_extract("rule"."data", '$.alert') LIKE ? ESCAPE '\' OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') LIKE ? ESCAPE '\')) ` +
+				`AND (COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') = ? ` +
+				`OR json_extract("rule"."data", '$.labels."team"') IS NOT NULL))`,
+			expectedArgs: []any{"prod", "staging", "%prod%", "%prod%", "critical"},
+		},
+		{
+			subtestName:       "NotOverGroup_AndedWithEnum",
+			dslQueryToCompile: `NOT (labels.team = 'infra' OR name CONTAINS 'cpu') AND alert_type = 'METRIC_BASED_ALERT'`,
+			expectedSQL: `(NOT ((COALESCE(json_extract("rule"."data", '$.labels."team"'), '') = ? ` +
+				`OR (json_extract("rule"."data", '$.alert') LIKE ? ESCAPE '\' OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') LIKE ? ESCAPE '\'))) ` +
+				`AND (json_extract("rule"."data", '$.alertType') = ? OR COALESCE(json_extract("rule"."data", '$.labels."alert_type"'), '') = ?))`,
+			expectedArgs: []any{"infra", "%cpu%", "%cpu%", "METRIC_BASED_ALERT", "METRIC_BASED_ALERT"},
+		},
+		{
+			subtestName: "FreeText_ThreeLevelNesting_Timestamp",
+			dslQueryToCompile: `prod AND (name ILIKE '%pay%' ` +
+				`OR (labels.team != 'infra' AND updated_at > '2026-01-02T15:04:05Z'))`,
+			expectedSQL: `((lower(COALESCE(json_extract("rule"."data", '$.alert'), '')) LIKE LOWER(?) ESCAPE '\' ` +
+				`OR lower(COALESCE(json_extract("rule"."data", '$.description'), '')) LIKE LOWER(?) ESCAPE '\' ` +
+				`OR lower(COALESCE(json_extract("rule"."data", '$.labels'), '')) LIKE LOWER(?) ESCAPE '\') ` +
+				`AND ((lower(json_extract("rule"."data", '$.alert')) LIKE LOWER(?) ESCAPE '\' ` +
+				`OR lower(COALESCE(json_extract("rule"."data", '$.labels."name"'), '')) LIKE LOWER(?) ESCAPE '\') ` +
+				`OR (COALESCE(json_extract("rule"."data", '$.labels."team"'), '') <> ? AND rule.updated_at > ?)))`,
+			expectedArgs: []any{"%prod%", "%prod%", "%prod%", "%pay%", "%pay%", "infra",
+				time.Date(2026, 1, 2, 15, 4, 5, 0, time.UTC)},
+		},
+	})
+}
+
+func TestCompileBareLabelKeys(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "BareKey_LabelMatch",
+			dslQueryToCompile: "team = 'infra'",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."team"'), '') = ?`,
+			expectedArgs:      []any{"infra"},
+		},
+		{
+			subtestName:       "BareKey_CaseSensitive",
+			dslQueryToCompile: "Team CONTAINS 'inf'",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."Team"'), '') LIKE ? ESCAPE '\'`,
+			expectedArgs:      []any{"%inf%"},
+		},
+		{
+			subtestName:       "BareKeyExists",
+			dslQueryToCompile: "env EXISTS",
+			expectedSQL:       `json_extract("rule"."data", '$.labels."env"') IS NOT NULL`,
+		},
+		{
+			subtestName:       "State_LabelLookupNotRuleState",
+			dslQueryToCompile: "state = 'firing'",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."state"'), '') = ?`,
+			expectedArgs:      []any{"firing"},
+		},
+	})
+}
+
+func TestCompileReservedLabelCollisions(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "UppercaseReservedKey_MatchesReservedOrExactCaseLabel",
+			dslQueryToCompile: "NAME = 'x'",
+			expectedSQL:       `(json_extract("rule"."data", '$.alert') = ? OR COALESCE(json_extract("rule"."data", '$.labels."NAME"'), '') = ?)`,
+			expectedArgs:      []any{"x", "x"},
+		},
+		{
+			subtestName:       "SeverityExactSpelling_SinglePredicate",
+			dslQueryToCompile: "severity = 'critical'",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') = ?`,
+			expectedArgs:      []any{"critical"},
+		},
+		{
+			subtestName:       "SeverityDifferentCase_MatchesBothLabelSpellings",
+			dslQueryToCompile: "Severity = 'critical'",
+			expectedSQL: `(COALESCE(json_extract("rule"."data", '$.labels."severity"'), '') = ? ` +
+				`OR COALESCE(json_extract("rule"."data", '$.labels."Severity"'), '') = ?)`,
+			expectedArgs: []any{"critical", "critical"},
+		},
+		{
+			subtestName:       "RangeOperator_ReservedOnly",
+			dslQueryToCompile: "created_at >= '2026-01-02T15:04:05Z'",
+			expectedSQL:       `rule.created_at >= ?`,
+			expectedArgs:      []any{time.Date(2026, 1, 2, 15, 4, 5, 0, time.UTC)},
+		},
+		{
+			subtestName:       "LabelsPrefix_LabelOnlyOnCollision",
+			dslQueryToCompile: "labels.name = 'x'",
+			expectedSQL:       `COALESCE(json_extract("rule"."data", '$.labels."name"'), '') = ?`,
+			expectedArgs:      []any{"x"},
+		},
+		{
+			subtestName:       "NotIn_ExcludesBoth",
+			dslQueryToCompile: "created_by NOT IN ['a', 'b']",
+			expectedSQL: `(rule.created_by NOT IN (?, ?) ` +
+				`AND COALESCE(json_extract("rule"."data", '$.labels."created_by"'), '') NOT IN (?, ?))`,
+			expectedArgs: []any{"a", "b", "a", "b"},
+		},
+	})
+}
+
+func TestCompileErrors(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:              "RangeOperatorOnBareLabelKey_Rejected",
+			dslQueryToCompile:        "team > 'infra'",
+			expectedErrShouldContain: `operator > is not allowed on the label filter "team"`,
+		},
+		{
+			subtestName:              "SyntaxError_SurfacesPosition",
+			dslQueryToCompile:        "created_by ==== (((",
+			expectedErrShouldContain: "syntax error",
+		},
+		{
+			subtestName:              "LikeDanglingEscape_Rejected",
+			dslQueryToCompile:        `name LIKE 'prod\\'`,
+			expectedErrShouldContain: "must not end with an unescaped backslash",
+		},
+		{
+			subtestName:              "ILikeDanglingEscape_Rejected",
+			dslQueryToCompile:        `name ILIKE '%\\'`,
+			expectedErrShouldContain: "must not end with an unescaped backslash",
+		},
+		{
+			subtestName:              "LabelLikeDanglingEscape_Rejected",
+			dslQueryToCompile:        `labels.team NOT LIKE 'infra\\'`,
+			expectedErrShouldContain: "must not end with an unescaped backslash",
+		},
+	})
+}
+
+func TestCompileTrailingLiteralBackslash(t *testing.T) {
+	runCompileCases(t, []compileCase{
+		{
+			subtestName:       "EscapedTrailingBackslash_Compiles",
+			dslQueryToCompile: `name LIKE '%\\\\'`,
+			expectedSQL:       `(json_extract("rule"."data", '$.alert') LIKE ? ESCAPE '\' OR COALESCE(json_extract("rule"."data", '$.labels."name"'), '') LIKE ? ESCAPE '\')`,
+			expectedArgs:      []any{`%\\`, `%\\`},
+		},
+	})
+}
+
+// Guards that every ruletypes.ReservedOps key has a case in resolveReservedKey.
+func TestCompileReservedKeysAllHandled(t *testing.T) {
+	sampleQueries := map[ruletypes.DSLKey]string{
+		ruletypes.DSLKeyName:      "name = 'x'",
+		ruletypes.DSLKeySeverity:  "severity = 'critical'",
+		ruletypes.DSLKeyCreatedBy: "created_by = 'x'",
+		ruletypes.DSLKeyUpdatedBy: "updated_by = 'x'",
+		ruletypes.DSLKeyCreatedAt: "created_at >= '2026-01-02T15:04:05Z'",
+		ruletypes.DSLKeyUpdatedAt: "updated_at >= '2026-01-02T15:04:05Z'",
+		ruletypes.DSLKeyAlertType: "alert_type = 'METRIC_BASED_ALERT'",
+		ruletypes.DSLKeyRuleType:  "rule_type = 'threshold_rule'",
+	}
+
+	for key := range ruletypes.ReservedOps {
+		query, ok := sampleQueries[key]
+		require.True(t, ok, "no sample query for reserved key %q, add one", key)
+
+		out, err := CompileListFilter(query, formatter(t))
+		require.NoError(t, err, "reserved key %q failed to compile", key)
+		assert.False(t, out.IsEmpty(), "reserved key %q compiled to empty SQL", key)
+	}
+}
+
+func formatter(t *testing.T) sqlstore.SQLFormatter {
+	t.Helper()
+	p := sqlstoretest.New(sqlstore.Config{Provider: "sqlite"}, sqlmock.QueryMatcherEqual)
+	return p.Formatter()
+}
+
+func normalizeSQL(s string) string {
+	s = strings.Join(strings.Fields(s), " ")
+	s = strings.ReplaceAll(s, "( ", "(")
+	s = strings.ReplaceAll(s, " )", ")")
+	return s
+}

pkg/query-service/rules/manager.go

@@ -851,6 +851,8 @@ func (m *Manager) ListRuleStates(ctx context.Context) (*ruletypes.GettableRules,
 	// initiate response object
 	resp := make([]*ruletypes.GettableRule, 0)
 
+	stateByRuleID := m.snapshotRuleStates()
+
 	for _, s := range storedRules {
 
 		ruleResponse := ruletypes.GettableRule{}
@@ -863,11 +865,11 @@ func (m *Manager) ListRuleStates(ctx context.Context) (*ruletypes.GettableRules,
 		ruleResponse.Id = s.ID.StringValue()
 
 		// fetch state of rule from memory
-		if rm, ok := m.rules[ruleResponse.Id]; !ok {
+		if state, ok := stateByRuleID[ruleResponse.Id]; !ok {
 			ruleResponse.State = ruletypes.StateDisabled
 			ruleResponse.Disabled = true
 		} else {
-			ruleResponse.State = rm.State()
+			ruleResponse.State = state
 		}
 		ruleResponse.CreatedAt = s.CreatedAt
 		ruleResponse.CreatedBy = &s.CreatedBy
@@ -879,6 +881,71 @@ func (m *Manager) ListRuleStates(ctx context.Context) (*ruletypes.GettableRules,
 	return &ruletypes.GettableRules{Rules: resp}, nil
 }
 
+// ListRules' total counts what is pageable after corrupt-row drops and the states filter.
+func (m *Manager) ListRules(ctx context.Context, params *ruletypes.ListRulesParams) (*ruletypes.ListableRules, error) {
+	// validated here too, not just in the handler: non-API callers reach the manager directly
+	if err := params.Validate(); err != nil {
+		return nil, err
+	}
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	states, err := params.GetAlertStates()
+	if err != nil {
+		return nil, err
+	}
+	stateFilter := make(map[ruletypes.AlertState]struct{}, len(states))
+	for _, state := range states {
+		stateFilter[state] = struct{}{}
+	}
+
+	compiled, err := CompileListFilter(params.Query, m.sqlstore.Formatter())
+	if err != nil {
+		return nil, err
+	}
+
+	storedRules, err := m.ruleStore.GetStoredRulesMatching(ctx, claims.OrgID, compiled.SQL, compiled.Args)
+	if err != nil {
+		return nil, err
+	}
+
+	stateByRuleID := m.snapshotRuleStates()
+
+	listableRules, errByRuleID := ruletypes.NewListableRulesFromStorableRules(storedRules, stateByRuleID, stateFilter)
+	for ruleID, err := range errByRuleID {
+		m.logger.ErrorContext(ctx, "failed to unmarshal rule from db", slog.String("rule.id", ruleID), errors.Attr(err))
+	}
+
+	total := int64(len(listableRules))
+	ruletypes.SortListableRules(listableRules, params.Sort, params.Order)
+
+	start := min(params.Offset, len(listableRules))
+	end := min(start+params.Limit, len(listableRules))
+	currentPageRules := listableRules[start:end]
+
+	rawLabels, err := m.ruleStore.GetStoredRuleLabels(ctx, claims.OrgID)
+	if err != nil {
+		return nil, err
+	}
+	labelPairs := ruletypes.NewLabelPairsFromRawJSON(rawLabels, ruletypes.MaxListLabelPairs)
+
+	return ruletypes.NewListableRules(currentPageRules, total, labelPairs), nil
+}
+
+func (m *Manager) snapshotRuleStates() map[string]ruletypes.AlertState {
+	m.mtx.RLock()
+	defer m.mtx.RUnlock()
+
+	states := make(map[string]ruletypes.AlertState, len(m.rules))
+	for id, rule := range m.rules {
+		states[id] = rule.State()
+	}
+	return states
+}
+
 func (m *Manager) GetRule(ctx context.Context, id valuer.UUID) (*ruletypes.GettableRule, error) {
 	claims, err := authtypes.ClaimsFromContext(ctx)
 	if err != nil {

pkg/query-service/rules/manager_test.go

@@ -20,6 +20,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/telemetrystore/telemetrystoretest"
 	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
 	"github.com/SigNoz/signoz/pkg/types/metrictypes"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/mock"
@@ -28,6 +29,17 @@ import (
 	cmock "github.com/SigNoz/clickhouse-go-mock"
 )
 
+func TestManager_ListRules_ValidatesParams(t *testing.T) {
+	m, err := NewManager(&ManagerOptions{})
+	require.NoError(t, err)
+
+	_, err = m.ListRules(context.Background(), &ruletypes.ListRulesParams{Limit: -1})
+	require.ErrorContains(t, err, "invalid limit")
+
+	_, err = m.ListRules(context.Background(), &ruletypes.ListRulesParams{States: []string{"bogus"}})
+	require.ErrorContains(t, err, `invalid state "bogus"`)
+}
+
 func TestManager_TestNotification_SendUnmatched_ThresholdRule(t *testing.T) {
 	target := 10.0
 	recovery := 5.0

pkg/ruler/handler.go

@@ -4,6 +4,7 @@ import "net/http"
 
 type Handler interface {
 	ListRules(http.ResponseWriter, *http.Request)
+	ListRulesV3(http.ResponseWriter, *http.Request)
 	GetRuleByID(http.ResponseWriter, *http.Request)
 	CreateRule(http.ResponseWriter, *http.Request)
 	UpdateRuleByID(http.ResponseWriter, *http.Request)

pkg/ruler/ruler.go

@@ -17,6 +17,9 @@ type Ruler interface {
 	// ListRuleStates returns all rules with their current evaluation state.
 	ListRuleStates(ctx context.Context) (*ruletypes.GettableRules, error)
 
+	// ListRules returns a filtered, sorted page of rules with state, plus label pairs and reserved filter keys.
+	ListRules(ctx context.Context, params *ruletypes.ListRulesParams) (*ruletypes.ListableRules, error)
+
 	// GetRule returns a single rule by ID.
 	GetRule(ctx context.Context, id valuer.UUID) (*ruletypes.GettableRule, error)
 

pkg/ruler/rulestore/rulestoretest/rule.go

@@ -64,6 +64,16 @@ func (m *MockSQLRuleStore) GetStoredRules(ctx context.Context, orgID string) ([]
 	return m.ruleStore.GetStoredRules(ctx, orgID)
 }
 
+// GetStoredRulesMatching implements ruletypes.RuleStore - delegates to underlying ruleStore to trigger SQL.
+func (m *MockSQLRuleStore) GetStoredRulesMatching(ctx context.Context, orgID string, filterSQL string, filterArgs []any) ([]*ruletypes.StorableRule, error) {
+	return m.ruleStore.GetStoredRulesMatching(ctx, orgID, filterSQL, filterArgs)
+}
+
+// GetStoredRuleLabels implements ruletypes.RuleStore - delegates to underlying ruleStore to trigger SQL.
+func (m *MockSQLRuleStore) GetStoredRuleLabels(ctx context.Context, orgID string) ([]string, error) {
+	return m.ruleStore.GetStoredRuleLabels(ctx, orgID)
+}
+
 // GetStoredRulesByMetricName implements ruletypes.RuleStore - delegates to underlying ruleStore.
 func (m *MockSQLRuleStore) GetStoredRulesByMetricName(ctx context.Context, orgID string, metricName string) ([]ruletypes.RuleAlert, error) {
 	return m.ruleStore.GetStoredRulesByMetricName(ctx, orgID, metricName)

pkg/ruler/rulestore/sqlrulestore/rule.go

@@ -3,6 +3,7 @@ package sqlrulestore
 import (
 	"context"
 	"encoding/json"
+	"fmt"
 	"log/slog"
 	"slices"
 
@@ -89,6 +90,41 @@ func (r *rule) DeleteRule(ctx context.Context, orgID valuer.UUID, id valuer.UUID
 	return nil
 }
 
+func (r *rule) GetStoredRulesMatching(ctx context.Context, orgID string, filterSQL string, filterArgs []any) ([]*ruletypes.StorableRule, error) {
+	rules := make([]*ruletypes.StorableRule, 0)
+	q := r.sqlstore.
+		BunDB().
+		NewSelect().
+		Model(&rules).
+		Where("org_id = ?", orgID)
+	if filterSQL != "" {
+		q = q.Where(filterSQL, filterArgs...)
+	}
+	if err := q.Scan(ctx); err != nil {
+		return nil, err
+	}
+
+	return rules, nil
+}
+
+func (r *rule) GetStoredRuleLabels(ctx context.Context, orgID string) ([]string, error) {
+	labelsExpression := string(r.sqlstore.Formatter().JSONExtractString("rule.data", "$.labels"))
+
+	labels := make([]string, 0)
+	err := r.sqlstore.
+		BunDB().
+		NewSelect().
+		Model((*ruletypes.StorableRule)(nil)).
+		ColumnExpr(fmt.Sprintf("COALESCE(%s, '')", labelsExpression)).
+		Where("org_id = ?", orgID).
+		Scan(ctx, &labels)
+	if err != nil {
+		return nil, err
+	}
+
+	return labels, nil
+}
+
 func (r *rule) GetStoredRules(ctx context.Context, orgID string) ([]*ruletypes.StorableRule, error) {
 	rules := make([]*ruletypes.StorableRule, 0)
 	err := r.sqlstore.

pkg/ruler/signozruler/handler.go

@@ -43,6 +43,29 @@ func (handler *handler) ListRules(rw http.ResponseWriter, req *http.Request) {
 	render.Success(rw, http.StatusOK, view)
 }
 
+func (handler *handler) ListRulesV3(rw http.ResponseWriter, req *http.Request) {
+	ctx, cancel := context.WithTimeout(req.Context(), 30*time.Second)
+	defer cancel()
+
+	params := new(ruletypes.ListRulesParams)
+	if err := binding.Query.BindQuery(req.URL.Query(), params); err != nil {
+		render.Error(rw, err)
+		return
+	}
+	if err := params.Validate(); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	listableRules, err := handler.ruler.ListRules(ctx, params)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, listableRules)
+}
+
 func (handler *handler) GetRuleByID(rw http.ResponseWriter, req *http.Request) {
 	ctx, cancel := context.WithTimeout(req.Context(), 30*time.Second)
 	defer cancel()

pkg/ruler/signozruler/provider.go

@@ -116,6 +116,10 @@ func (provider *provider) ListRuleStates(ctx context.Context) (*ruletypes.Gettab
 	return provider.manager.ListRuleStates(ctx)
 }
 
+func (provider *provider) ListRules(ctx context.Context, params *ruletypes.ListRulesParams) (*ruletypes.ListableRules, error) {
+	return provider.manager.ListRules(ctx, params)
+}
+
 func (provider *provider) GetRule(ctx context.Context, id valuer.UUID) (*ruletypes.GettableRule, error) {
 	return provider.manager.GetRule(ctx, id)
 }

pkg/signoz/provider.go

@@ -256,6 +256,7 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewAddSpanMapperOriginFactory(sqlstore, sqlschema),
 		sqlmigration.NewAddCloudIntegrationTuplesFactory(sqlstore),
 		sqlmigration.NewAddNotificationChannelTuplesFactory(sqlstore),
+		sqlmigration.NewAddAIObservabilityQuickFiltersFactory(sqlstore),
 	)
 }
 

pkg/sqlmigration/130_add_ai_observability_quick_filters.go

@@ -0,0 +1,91 @@
+package sqlmigration
+
+import (
+	"context"
+	"time"
+
+	"github.com/uptrace/bun"
+	"github.com/uptrace/bun/migrate"
+
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type storableAIObservabilityQuickFilter struct {
+	bun.BaseModel `bun:"table:quick_filter"`
+
+	ID        valuer.UUID `bun:"id,pk,type:text"`
+	OrgID     string      `bun:"org_id,type:text,notnull"`
+	Filter    string      `bun:"filter,type:text,notnull"`
+	Source    string      `bun:"source,type:text,notnull"`
+	CreatedAt time.Time   `bun:"created_at"`
+	UpdatedAt time.Time   `bun:"updated_at"`
+}
+
+type addAIObservabilityQuickFilters struct{}
+
+func NewAddAIObservabilityQuickFiltersFactory(sqlstore sqlstore.SQLStore) factory.ProviderFactory[SQLMigration, Config] {
+	return factory.NewProviderFactory(factory.MustNewName("add_ai_o11y_quick_filters"), func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
+		return &addAIObservabilityQuickFilters{}, nil
+	})
+}
+
+func (migration *addAIObservabilityQuickFilters) Register(migrations *migrate.Migrations) error {
+	return migrations.Register(migration.Up, migration.Down)
+}
+
+func (migration *addAIObservabilityQuickFilters) Up(ctx context.Context, db *bun.DB) error {
+	filters := []telemetryFieldKeyOutput{
+		{Name: "deployment.environment", FieldContext: "resource", FieldDataType: "string"},
+		{Name: "gen_ai.operation.name", FieldContext: "attribute", FieldDataType: "string"},
+		{Name: "gen_ai.provider.name", FieldContext: "attribute", FieldDataType: "string"},
+		{Name: "gen_ai.request.model", FieldContext: "attribute", FieldDataType: "string"},
+		{Name: "service.name", FieldContext: "resource", FieldDataType: "string"},
+		{Name: "gen_ai.tool.name", FieldContext: "attribute", FieldDataType: "string"},
+		{Name: "gen_ai.agent.name", FieldContext: "attribute", FieldDataType: "string"},
+	}
+
+	filterJSON, err := marshalUnescaped(filters)
+	if err != nil {
+		return err
+	}
+
+	tx, err := db.BeginTx(ctx, nil)
+	if err != nil {
+		return err
+	}
+	defer func() { _ = tx.Rollback() }()
+
+	var orgIDs []string
+	if err := tx.NewSelect().Table("organizations").Column("id").Scan(ctx, &orgIDs); err != nil {
+		return err
+	}
+
+	if len(orgIDs) == 0 {
+		return tx.Commit()
+	}
+
+	now := time.Now()
+	rows := make([]*storableAIObservabilityQuickFilter, 0, len(orgIDs))
+	for _, orgID := range orgIDs {
+		rows = append(rows, &storableAIObservabilityQuickFilter{
+			ID:        valuer.GenerateUUID(),
+			OrgID:     orgID,
+			Filter:    string(filterJSON),
+			Source:    "ai_observability",
+			CreatedAt: now,
+			UpdatedAt: now,
+		})
+	}
+
+	if _, err := tx.NewInsert().Model(&rows).On("CONFLICT (org_id, source) DO NOTHING").Exec(ctx); err != nil {
+		return err
+	}
+
+	return tx.Commit()
+}
+
+func (migration *addAIObservabilityQuickFilters) Down(context.Context, *bun.DB) error {
+	return nil
+}

pkg/sqlstore/sqlitesqlstore/formatter.go

@@ -1,6 +1,7 @@
 package sqlitesqlstore
 
 import (
+	"fmt"
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/sqlstore"
@@ -25,6 +26,12 @@ func (f *formatter) JSONExtractString(column, path string) []byte {
 	return sql
 }
 
+func (f *formatter) JSONExtractMapValue(column, mapField, key string) []byte {
+	// Quote the key as one path segment; a double quote in it is inexpressible in sqlite JSON paths.
+	escapedKey := strings.NewReplacer(`\`, `\\`).Replace(key)
+	return f.JSONExtractString(column, fmt.Sprintf(`$.%s."%s"`, mapField, escapedKey))
+}
+
 func (f *formatter) JSONType(column, path string) []byte {
 	var sql []byte
 	sql = append(sql, "json_type("...)

pkg/sqlstore/sqlitesqlstore/formatter_test.go

@@ -55,6 +55,60 @@ func TestJSONExtractString(t *testing.T) {
 	}
 }
 
+func TestJSONExtractMapValue(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		mapField string
+		key      string
+		expected string
+	}{
+		{
+			name:     "PlainKey",
+			column:   "data",
+			mapField: "labels",
+			key:      "team",
+			expected: `json_extract("data", '$.labels."team"')`,
+		},
+		{
+			name:     "DottedKey_OneMapEntry",
+			column:   "data",
+			mapField: "labels",
+			key:      "k8s.cluster",
+			expected: `json_extract("data", '$.labels."k8s.cluster"')`,
+		},
+		{
+			name:     "BackslashInKey_Escaped",
+			column:   "data",
+			mapField: "labels",
+			key:      `a\b`,
+			expected: `json_extract("data", '$.labels."a\\b"')`,
+		},
+		{
+			name:     "SingleQuoteInKey_Doubled",
+			column:   "data",
+			mapField: "labels",
+			key:      "o'brien",
+			expected: `json_extract("data", '$.labels."o''brien"')`,
+		},
+		{
+			name:     "QualifiedColumn",
+			column:   "rule.data",
+			mapField: "labels",
+			key:      "severity",
+			expected: `json_extract("rule"."data", '$.labels."severity"')`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(sqlitedialect.New())
+			got := string(f.JSONExtractMapValue(tt.column, tt.mapField, tt.key))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
 func TestJSONType(t *testing.T) {
 	tests := []struct {
 		name     string

pkg/sqlstore/sqlstore.go

@@ -114,6 +114,9 @@ type SQLFormatter interface {
 	// JSONKeys return extracted key from json as well as alias to be used for select and where clause
 	JSONKeys(column, path, alias string) ([]byte, []byte)
 
+	// JSONExtractMapValue extracts one key's value from a JSON object field; dots in the key are not path nesting.
+	JSONExtractMapValue(column, mapField, key string) []byte
+
 	// TextToJsonColumn converts a text column to JSON type
 	TextToJsonColumn(column string) []byte
 

pkg/sqlstore/sqlstoretest/formatter.go

@@ -1,6 +1,7 @@
 package sqlstoretest
 
 import (
+	"fmt"
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/sqlstore"
@@ -25,6 +26,11 @@ func (f *formatter) JSONExtractString(column, path string) []byte {
 	return sql
 }
 
+func (f *formatter) JSONExtractMapValue(column, mapField, key string) []byte {
+	escapedKey := strings.NewReplacer(`\`, `\\`).Replace(key)
+	return f.JSONExtractString(column, fmt.Sprintf(`$.%s."%s"`, mapField, escapedKey))
+}
+
 func (f *formatter) JSONType(column, path string) []byte {
 	var sql []byte
 	sql = append(sql, "json_type("...)

pkg/sqlstore/sqlstoretest/formatter_test.go

@@ -0,0 +1,62 @@
+package sqlstoretest
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/uptrace/bun/dialect/sqlitedialect"
+)
+
+func TestJSONExtractMapValue(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		mapField string
+		key      string
+		expected string
+	}{
+		{
+			name:     "PlainKey",
+			column:   "data",
+			mapField: "labels",
+			key:      "team",
+			expected: `json_extract("data", '$.labels."team"')`,
+		},
+		{
+			name:     "DottedKey_OneMapEntry",
+			column:   "data",
+			mapField: "labels",
+			key:      "k8s.cluster",
+			expected: `json_extract("data", '$.labels."k8s.cluster"')`,
+		},
+		{
+			name:     "BackslashInKey_Escaped",
+			column:   "data",
+			mapField: "labels",
+			key:      `a\b`,
+			expected: `json_extract("data", '$.labels."a\\b"')`,
+		},
+		{
+			name:     "SingleQuoteInKey_Doubled",
+			column:   "data",
+			mapField: "labels",
+			key:      "o'brien",
+			expected: `json_extract("data", '$.labels."o''brien"')`,
+		},
+		{
+			name:     "QualifiedColumn",
+			column:   "rule.data",
+			mapField: "labels",
+			key:      "severity",
+			expected: `json_extract("rule"."data", '$.labels."severity"')`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(sqlitedialect.New())
+			got := string(f.JSONExtractMapValue(tt.column, tt.mapField, tt.key))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}

pkg/types/ruletypes/alert_state.go

@@ -38,3 +38,18 @@ var alertStateSeverity = map[AlertState]int{
 func (a AlertState) Severity() int {
 	return alertStateSeverity[a]
 }
+
+// Display priority for list sorting, worst first from a user's view; deliberately
+// NOT Severity(), which ranks disabled/nodata above firing for overall-state computation.
+var alertStateDisplayRank = map[AlertState]int{
+	StateFiring:     5,
+	StateNoData:     4,
+	StatePending:    3,
+	StateRecovering: 2,
+	StateInactive:   1,
+	StateDisabled:   0,
+}
+
+func (a AlertState) DisplayRank() int {
+	return alertStateDisplayRank[a]
+}

pkg/types/ruletypes/alert_state_test.go

@@ -0,0 +1,21 @@
+package ruletypes
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+)
+
+// Both rankings must stay exhaustive: a new AlertState needs an entry in each.
+func TestAlertStateRankingsAreExhaustive(t *testing.T) {
+	states := AlertState{}.Enum()
+
+	assert.Len(t, alertStateSeverity, len(states))
+	assert.Len(t, alertStateDisplayRank, len(states))
+
+	for _, s := range states {
+		state := s.(AlertState)
+		assert.Contains(t, alertStateSeverity, state, "missing severity for state %q", state)
+		assert.Contains(t, alertStateDisplayRank, state, "missing display rank for state %q", state)
+	}
+}

pkg/types/ruletypes/list.go

@@ -0,0 +1,129 @@
+package ruletypes
+
+import (
+	"slices"
+	"unicode/utf8"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+const (
+	DefaultListLimit = 20
+	MaxListLimit     = 200
+	MaxListQueryLen  = 1024
+)
+
+var ErrCodeRuleListInvalid = errors.MustNewCode("rule_list_invalid")
+
+type ListSort struct{ valuer.String }
+
+var (
+	ListSortUpdatedAt = ListSort{valuer.NewString("updated_at")}
+	ListSortCreatedAt = ListSort{valuer.NewString("created_at")}
+	ListSortName      = ListSort{valuer.NewString("name")}
+	ListSortState     = ListSort{valuer.NewString("state")}
+	ListSortSeverity  = ListSort{valuer.NewString("severity")}
+)
+
+func (ListSort) Enum() []any {
+	return []any{ListSortUpdatedAt, ListSortCreatedAt, ListSortName, ListSortState, ListSortSeverity}
+}
+
+func (s ListSort) IsValid() bool {
+	return slices.ContainsFunc(s.Enum(), func(v any) bool { return v == s })
+}
+
+type ListOrder struct{ valuer.String }
+
+var (
+	ListOrderAsc  = ListOrder{valuer.NewString("asc")}
+	ListOrderDesc = ListOrder{valuer.NewString("desc")}
+)
+
+func (ListOrder) Enum() []any {
+	return []any{ListOrderAsc, ListOrderDesc}
+}
+
+func (o ListOrder) IsValid() bool {
+	return slices.ContainsFunc(o.Enum(), func(v any) bool { return v == o })
+}
+
+type ListRulesParams struct {
+	Query string `query:"query"`
+	// gin cannot bind a slice of valuer enums; AlertStates converts these.
+	States []string  `query:"states"`
+	Sort   ListSort  `query:"sort"`
+	Order  ListOrder `query:"order"`
+	Limit  int       `query:"limit"`
+	Offset int       `query:"offset"`
+}
+
+// Validate normalizes in place; an over-max limit is clamped, not rejected.
+func (p *ListRulesParams) Validate() error {
+	if n := utf8.RuneCountInString(p.Query); n > MaxListQueryLen {
+		return errors.NewInvalidInputf(ErrCodeRuleListInvalid,
+			"query cannot be longer than %d characters, got %d", MaxListQueryLen, n)
+	}
+
+	if p.Sort.IsZero() {
+		p.Sort = ListSortUpdatedAt
+	} else if !p.Sort.IsValid() {
+		return errors.NewInvalidInputf(ErrCodeRuleListInvalid,
+			"invalid sort %q, expected one of: `updated_at`, `created_at`, `name`, `state`, `severity`", p.Sort)
+	}
+
+	if p.Order.IsZero() {
+		p.Order = ListOrderDesc
+	} else if !p.Order.IsValid() {
+		return errors.NewInvalidInputf(ErrCodeRuleListInvalid,
+			"invalid order %q, expected `asc` or `desc`", p.Order)
+	}
+
+	if p.Limit == 0 {
+		p.Limit = DefaultListLimit
+	} else if p.Limit < 0 {
+		return errors.NewInvalidInputf(ErrCodeRuleListInvalid,
+			"invalid limit %d, must be a positive integer", p.Limit)
+	} else if p.Limit > MaxListLimit {
+		p.Limit = MaxListLimit
+	}
+
+	if p.Offset < 0 {
+		return errors.NewInvalidInputf(ErrCodeRuleListInvalid,
+			"invalid offset %d, must be a non-negative integer", p.Offset)
+	}
+
+	if _, err := p.GetAlertStates(); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+// GetAlertStates parses States; empty means no state filtering.
+func (p *ListRulesParams) GetAlertStates() ([]AlertState, error) {
+	if len(p.States) == 0 {
+		return nil, nil
+	}
+
+	states := make([]AlertState, 0, len(p.States))
+	for _, raw := range p.States {
+		state, err := parseAlertState(raw)
+		if err != nil {
+			return nil, err
+		}
+		states = append(states, state)
+	}
+
+	return states, nil
+}
+
+func parseAlertState(raw string) (AlertState, error) {
+	state := AlertState{valuer.NewString(raw)}
+	if !slices.Contains(state.Enum(), any(state)) {
+		return AlertState{}, errors.NewInvalidInputf(ErrCodeRuleListInvalid,
+			"invalid state %q, expected one of: `firing`, `pending`, `recovering`, `inactive`, `nodata`, `disabled`", raw)
+	}
+	return state, nil
+}

pkg/types/ruletypes/list_filter.go

@@ -0,0 +1,100 @@
+package ruletypes
+
+import (
+	"slices"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	qbtypesv5 "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+)
+
+var ErrCodeRuleListFilterInvalid = errors.MustNewCode("rule_list_filter_invalid")
+
+// DSLKey is a reserved (column-level) key in the rule list filter DSL.
+type DSLKey string
+
+const (
+	DSLKeyName      DSLKey = "name"
+	DSLKeySeverity  DSLKey = "severity"
+	DSLKeyCreatedBy DSLKey = "created_by"
+	DSLKeyUpdatedBy DSLKey = "updated_by"
+	DSLKeyCreatedAt DSLKey = "created_at"
+	DSLKeyUpdatedAt DSLKey = "updated_at"
+	DSLKeyAlertType DSLKey = "alert_type"
+	DSLKeyRuleType  DSLKey = "rule_type"
+
+	// Label keys under this prefix are matched exactly (case-sensitive).
+	DSLLabelsKeyPrefix = "labels."
+
+	// Advertised in reservedKeywords; not itself a filterable key.
+	DSLKeyLabelsPlaceholder DSLKey = "labels.<key>"
+)
+
+func ReservedFilterKeys() []DSLKey {
+	keys := make([]DSLKey, 0, len(ReservedOps)+1)
+	for key := range ReservedOps {
+		keys = append(keys, key)
+	}
+	keys = append(keys, DSLKeyLabelsPlaceholder)
+	slices.SortFunc(keys, func(a, b DSLKey) int {
+		return strings.Compare(string(a), string(b))
+	})
+	return keys
+}
+
+// ReservedOps lists the operators each reserved DSL key accepts; `labels.<key>` terms use LabelsKeyOps.
+var ReservedOps = map[DSLKey]map[qbtypesv5.FilterOperator]struct{}{
+	DSLKeyName: stringSearchOps(),
+	// severity aliases labels.severity, so it takes the labels operator set.
+	DSLKeySeverity:  LabelsKeyOps,
+	DSLKeyCreatedBy: stringSearchOps(),
+	DSLKeyUpdatedBy: stringSearchOps(),
+	DSLKeyCreatedAt: numericRangeOps(),
+	DSLKeyUpdatedAt: numericRangeOps(),
+	DSLKeyAlertType: enumOps(),
+	DSLKeyRuleType:  enumOps(),
+}
+
+// LabelsKeyOps operators target the label's value; EXISTS/NOT EXISTS test its presence.
+var LabelsKeyOps = opsSet(
+	qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual,
+	qbtypesv5.FilterOperatorLike, qbtypesv5.FilterOperatorNotLike,
+	qbtypesv5.FilterOperatorILike, qbtypesv5.FilterOperatorNotILike,
+	qbtypesv5.FilterOperatorContains, qbtypesv5.FilterOperatorNotContains,
+	qbtypesv5.FilterOperatorIn, qbtypesv5.FilterOperatorNotIn,
+	qbtypesv5.FilterOperatorExists, qbtypesv5.FilterOperatorNotExists,
+)
+
+func stringSearchOps() map[qbtypesv5.FilterOperator]struct{} {
+	return opsSet(
+		qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual,
+		qbtypesv5.FilterOperatorLike, qbtypesv5.FilterOperatorNotLike,
+		qbtypesv5.FilterOperatorILike, qbtypesv5.FilterOperatorNotILike,
+		qbtypesv5.FilterOperatorContains, qbtypesv5.FilterOperatorNotContains,
+		qbtypesv5.FilterOperatorIn, qbtypesv5.FilterOperatorNotIn,
+	)
+}
+
+func numericRangeOps() map[qbtypesv5.FilterOperator]struct{} {
+	return opsSet(
+		qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual,
+		qbtypesv5.FilterOperatorLessThan, qbtypesv5.FilterOperatorLessThanOrEq,
+		qbtypesv5.FilterOperatorGreaterThan, qbtypesv5.FilterOperatorGreaterThanOrEq,
+		qbtypesv5.FilterOperatorBetween, qbtypesv5.FilterOperatorNotBetween,
+	)
+}
+
+func enumOps() map[qbtypesv5.FilterOperator]struct{} {
+	return opsSet(
+		qbtypesv5.FilterOperatorEqual, qbtypesv5.FilterOperatorNotEqual,
+		qbtypesv5.FilterOperatorIn, qbtypesv5.FilterOperatorNotIn,
+	)
+}
+
+func opsSet(ops ...qbtypesv5.FilterOperator) map[qbtypesv5.FilterOperator]struct{} {
+	m := make(map[qbtypesv5.FilterOperator]struct{}, len(ops))
+	for _, op := range ops {
+		m[op] = struct{}{}
+	}
+	return m
+}