fix(api): send array query params as repeated keys

#### Description

- Alert rules list now uses the server-side `/api/v3/rules` endpoint.
Filtering, sorting and pagination happen on the backend instead of the
client.
- The search bar takes the filter DSL (`name`, `severity`, `alert_type`,
`rule_type`, `created_by`, `labels.<key>`, …) with autocomplete. Invalid
queries show the backend's error inline.
- New saved views rail: built-in views (My alert rules, All, Firing,
Disabled) plus org-shared custom views backed by `/api/v2/rule_views`.
- Search bar, filter zone and views rail come from the shared
`components/ListFilter` and `components/ListViews`.

#### Issues closed by this PR

Closes: https://github.com/SigNoz/pulse-pod/issues/594

#### Screenshots / Screen Recordings

[Visual diff](https://claude.ai/artifact/944j4x95qf1Ybh1pEw8uNt) against
#13372, dark and light: 138 pairs, 86 changed, 22 new, 2 removed, 28
identical. The `alert-rules` tag holds this PR's changes; Dashboards
List pairs are within the measured noise floor.

#### Additional Information

- Depends on #13372; review after it merges.

frontend/src/api/generatedAPIInstance.ts

@@ -11,6 +11,8 @@ import axios, { AxiosError, AxiosRequestConfig } from 'axios';
 // generated API Instance
 const generatedAPIAxiosInstance = axios.create({
 	baseURL: ENVIRONMENT.baseURL,
+	// The backend binds repeated keys (`states=a&states=b`); axios' default sends `states[]=`.
+	paramsSerializer: { indexes: null },
 });
 
 let generatedAPIQueryKeyHeaderContext: Record<string, unknown> | undefined;

frontend/src/components/ListFilter/dsl/rulesDslSuggestions.test.ts

@@ -0,0 +1,69 @@
+import { RULES_DSL_GRAMMAR } from 'container/ListAlertRules/list.config';
+
+import { getSuggestions } from './dslSuggestions';
+import type { SuggestionSource } from './types';
+
+const source: SuggestionSource = {
+	reservedKeys: [
+		'alert_type',
+		'created_at',
+		'created_by',
+		'labels.<key>',
+		'name',
+		'rule_type',
+		'severity',
+		'updated_at',
+		'updated_by',
+	],
+	dynamicKeys: ['labels.team', 'labels.env'],
+	valuesByKey: { 'labels.team': ['infra'], 'labels.severity': ['critical'] },
+	creatorEmails: ['alice@x.io'],
+	currentUserEmail: 'me@x.io',
+};
+
+const suggest = (q: string): ReturnType<typeof getSuggestions>['items'] =>
+	getSuggestions(q, q.length, source, RULES_DSL_GRAMMAR).items;
+const labels = (q: string): string[] => suggest(q).map((i) => i.label);
+
+describe('getSuggestions — rules grammar', () => {
+	it('orders reserved keys, hides labels.<key> and appends label keys', () => {
+		expect(labels('')).toStrictEqual([
+			'name',
+			'severity',
+			'alert_type',
+			'rule_type',
+			'created_by',
+			'updated_by',
+			'created_at',
+			'updated_at',
+			'labels.team',
+			'labels.env',
+		]);
+		expect(suggest('labels.t').map((i) => i.detail)).toStrictEqual(['label']);
+	});
+
+	it('restricts enum keys to = != IN NOT IN and suggests their values', () => {
+		expect(labels('rule_type ')).toStrictEqual([
+			'rule_type =',
+			'rule_type !=',
+			'rule_type IN',
+			'rule_type NOT IN',
+		]);
+		expect(labels('rule_type = ')).toStrictEqual([
+			'threshold_rule',
+			'promql_rule',
+			'anomaly_rule',
+		]);
+		expect(labels("alert_type = 'LOGS")).toStrictEqual(['LOGS_BASED_ALERT']);
+	});
+
+	it('gives severity and labels.* the label operators and values', () => {
+		expect(labels('severity ')).toContain('severity EXISTS');
+		expect(labels('severity = ')).toStrictEqual(['critical']);
+		expect(labels('labels.team = ')).toStrictEqual(['infra']);
+	});
+
+	it('suggests user emails for updated_by', () => {
+		expect(labels('updated_by = ')).toStrictEqual(['me@x.io (me)', 'alice@x.io']);
+	});
+});

frontend/src/components/ListViews/ListCommandHeader/ListCommandHeader.tsx

@@ -8,6 +8,8 @@ interface Props {
 	count: number;
 	isModified: boolean;
 	action?: ReactNode;
+	// Ids: `${testIdPrefix}-list-heading`.
+	testIdPrefix?: string;
 }
 
 function ListCommandHeader({
@@ -15,11 +17,17 @@ function ListCommandHeader({
 	count,
 	isModified,
 	action,
+	testIdPrefix,
 }: Props): JSX.Element {
 	return (
 		<div className={styles.commandHeader}>
 			<div className={styles.headingBlock}>
-				<Typography.Title className={styles.title}>{label}</Typography.Title>
+				<Typography.Title
+					className={styles.title}
+					testId={testIdPrefix && `${testIdPrefix}-list-heading`}
+				>
+					{label}
+				</Typography.Title>
 				{isModified && <span className={styles.dirtyDot} title="Unsaved changes" />}
 				<span className={styles.countPill}>{count}</span>
 			</div>

frontend/src/constants/localStorage.ts

@@ -45,6 +45,7 @@ export enum LOCALSTORAGE {
 	ACTIVE_SIGNOZ_INSTANCE_URL = 'ACTIVE_SIGNOZ_INSTANCE_URL',
 	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
+	ALERT_RULES_LIST_VIEWS = 'ALERT_RULES_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
 }

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.module.scss

@@ -172,6 +172,9 @@
 }
 
 .infoLinkContainer {
+	display: flex;
+	align-items: center;
+
 	svg {
 		color: var(--primary);
 	}

frontend/src/container/ListAlertRules/AlertsEmptyState/InfoLinkText.tsx

@@ -1,5 +1,4 @@
 import { ArrowRight, CirclePlay } from '@signozhq/icons';
-import { Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { openInNewTab } from 'utils/navigation';
 
@@ -21,7 +20,8 @@ function InfoLinkText({
 	onClick,
 }: InfoLinkTextProps): JSX.Element {
 	return (
-		<Flex
+		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+		<div
 			onClick={(): void => {
 				onClick();
 				openInNewTab(link);
@@ -33,7 +33,7 @@ function InfoLinkText({
 			{rightIconVisible && (
 				<ArrowRight size={16} style={{ transform: 'rotate(315deg)' }} />
 			)}
-		</Flex>
+		</div>
 	);
 }
 

frontend/src/container/ListAlertRules/ListAlertRules.module.scss

@@ -1,46 +1,30 @@
-.container {
+.layout {
 	display: flex;
-	flex-direction: column;
-	gap: 1rem;
+	align-items: stretch;
 	flex: 1;
 	min-height: 400px;
+	width: 100%;
 }
 
-.header {
-	position: relative;
-	z-index: 10;
-	display: flex;
-	justify-content: flex-end;
-	gap: 1rem;
-	flex-shrink: 0;
-	padding: 0 var(--spacing-8);
-}
-
-.refreshRow {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.filtersRow {
-	position: relative;
-	z-index: 10;
-	display: flex;
-	align-items: center;
-	gap: 1rem;
-	flex-shrink: 0;
-	padding: 0 var(--spacing-8);
-
-	--combobox-trigger-height: 2rem;
-}
-
-.searchInput {
-	min-width: 250px;
-}
-
-.filterSelect {
-	min-width: 300px;
+.main {
 	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	background: var(--l1-background);
+}
+
+.headerZone {
+	position: relative;
+	z-index: 10;
+	display: flex;
+	flex-direction: column;
+	flex-shrink: 0;
+	gap: 14px;
+	padding: 20px 24px;
+	background: var(--l2-background);
+	border-bottom: 1px solid var(--l2-border);
 }
 
 .tableContainer {
@@ -77,10 +61,6 @@
 	--badge-cursor: pointer;
 }
 
-.searchIcon {
-	color: var(--l2-foreground);
-}
-
 .actionsColumn {
 	display: flex;
 	justify-content: flex-end;

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.empty.test.tsx

@@ -1,10 +1,14 @@
 import { safeNavigateMock } from '__tests__/safeNavigateMock';
 import userEvent from '@testing-library/user-event';
 import ROUTES from 'constants/routes';
-import { alertRulesFixture } from 'mocks-server/__mockdata__/alert_rules';
+import {
+	alertRulesFixture,
+	listRulesV3Response,
+} from 'mocks-server/__mockdata__/alert_rules';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { screen } from 'tests/test-utils';
+import { getCurrentNuqsSearchParams } from 'tests/nuqs-helpers';
+import { screen, waitFor } from 'tests/test-utils';
 
 import { renderListAlertRules } from './_helpers';
 
@@ -17,8 +21,11 @@ describe('ListAlertRules — empty states', () => {
 		const user = userEvent.setup({ delay: null });
 
 		server.use(
-			rest.get('http://localhost/api/v2/rules', (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: [], status: 'success' })),
+			rest.get('http://localhost/api/v3/rules', (req, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json(listRulesV3Response([], req.url.searchParams)),
+				),
 			),
 		);
 
@@ -42,14 +49,14 @@ describe('ListAlertRules — empty states', () => {
 
 		let callCount = 0;
 		server.use(
-			rest.get('http://localhost/api/v2/rules', (_, res, ctx) => {
+			rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
 				callCount += 1;
 				if (callCount === 1) {
 					return res(ctx.status(500), ctx.json({ status: 'error' }));
 				}
 				return res(
 					ctx.status(200),
-					ctx.json({ data: alertRulesFixture, status: 'success' }),
+					ctx.json(listRulesV3Response(alertRulesFixture, req.url.searchParams)),
 				);
 			}),
 		);
@@ -64,18 +71,29 @@ describe('ListAlertRules — empty states', () => {
 		expect(rule).toBeInTheDocument();
 	});
 
-	it('renders NoResultsEmptyState when search yields no match; Clear Search resets', async () => {
+	it('renders NoResultsEmptyState when the query matches nothing; Clear Search resets it', async () => {
 		const user = userEvent.setup({ delay: null });
 
-		renderListAlertRules();
+		server.use(
+			rest.get('http://localhost/api/v3/rules', (req, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json(
+						listRulesV3Response(
+							req.url.searchParams.has('query') ? [] : alertRulesFixture,
+							req.url.searchParams,
+						),
+					),
+				),
+			),
+		);
 
-		await screen.findByText('High CPU Alert');
-
-		const searchInput = screen.getByTestId('list-alerts-search-input');
-		await user.clear(searchInput);
-		await user.type(searchInput, 'totally-not-found');
+		renderListAlertRules({
+			initialRoute: `/?query=${encodeURIComponent("name = 'missing'")}`,
+		});
 
 		await screen.findByTestId('no-results-empty-state');
+		expect(screen.queryByText('No Alert rules yet.')).not.toBeInTheDocument();
 		expect(screen.getByTestId('no-results-title')).toHaveTextContent(
 			'No matching alert rules',
 		);
@@ -85,7 +103,28 @@ describe('ListAlertRules — empty states', () => {
 
 		await user.click(screen.getByTestId('no-results-clear-button'));
 
-		const rule = await screen.findByText('High CPU Alert');
-		expect(rule).toBeInTheDocument();
+		await expect(
+			screen.findByText('High CPU Alert'),
+		).resolves.toBeInTheDocument();
+		await waitFor(() => {
+			expect(getCurrentNuqsSearchParams().has('query')).toBe(false);
+		});
+	});
+
+	it('renders NoResultsEmptyState when the states filter matches nothing; Clear Search resets it', async () => {
+		const user = userEvent.setup({ delay: null });
+
+		renderListAlertRules({ initialRoute: '/?states=nodata' });
+
+		await screen.findByTestId('no-results-empty-state');
+
+		await user.click(screen.getByTestId('no-results-clear-button'));
+
+		await expect(
+			screen.findByText('High CPU Alert'),
+		).resolves.toBeInTheDocument();
+		await waitFor(() => {
+			expect(getCurrentNuqsSearchParams().has('states')).toBe(false);
+		});
 	});
 });

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.list.test.tsx

@@ -101,17 +101,18 @@ describe('ListAlertRules — list rendering', () => {
 		);
 	});
 
-	it('renders header controls (search, columns, new alert)', async () => {
+	it('renders header controls (search, states, columns, new alert)', async () => {
 		renderListAlertRules();
 
 		await waitFor(() =>
 			expect(screen.getByTestId('alert-row-rule-1-name')).toBeInTheDocument(),
 		);
 
-		expect(screen.getByTestId('list-alerts-search-input')).toBeInTheDocument();
+		expect(screen.getByTestId('alert-rules-list-search')).toBeInTheDocument();
 		expect(
-			screen.getByPlaceholderText('Search by Alert Name, Severity and Labels'),
+			screen.getByTestId('alert-rules-list-search-submit'),
 		).toBeInTheDocument();
+		expect(screen.getByTestId('alert-rules-filter-states')).toBeInTheDocument();
 		expect(screen.getByTestId('alert-columns-button')).toBeInTheDocument();
 		expect(
 			screen.getByTestId('list-alerts-new-alert-button'),

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.pagination.test.tsx

@@ -1,5 +1,8 @@
 import userEvent from '@testing-library/user-event';
-import { alertRulesPaginationFixture } from 'mocks-server/__mockdata__/alert_rules';
+import {
+	alertRulesPaginationFixture,
+	listRulesV3Response,
+} from 'mocks-server/__mockdata__/alert_rules';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { screen, waitFor } from 'tests/test-utils';
@@ -8,31 +11,38 @@ import { getCurrentNuqsQueryString } from 'tests/nuqs-helpers';
 import { renderListAlertRules } from './_helpers';
 
 describe('ListAlertRules — pagination', () => {
+	let requests: URLSearchParams[];
+
 	beforeEach(() => {
 		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+		requests = [];
 		server.use(
-			rest.get('http://localhost/api/v2/rules', (_, res, ctx) =>
-				res(
+			rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
+				requests.push(req.url.searchParams);
+				return res(
 					ctx.status(200),
-					ctx.json({ data: alertRulesPaginationFixture, status: 'success' }),
-				),
-			),
+					ctx.json(
+						listRulesV3Response(alertRulesPaginationFixture, req.url.searchParams),
+					),
+				);
+			}),
 		);
 	});
 
-	it('shows first 10 rows on page 1 (default limit)', async () => {
+	it('requests the first page with the default limit and renders it', async () => {
 		renderListAlertRules();
 
 		await screen.findByText('Pag Rule 0');
 
+		expect(requests[0].get('limit')).toBe('10');
+		expect(requests[0].get('offset')).toBe('0');
 		for (let i = 0; i < 10; i += 1) {
 			expect(screen.getByText(`Pag Rule ${i}`)).toBeInTheDocument();
 		}
 		expect(screen.queryByText('Pag Rule 10')).not.toBeInTheDocument();
-		expect(screen.queryByText('Pag Rule 14')).not.toBeInTheDocument();
 	});
 
-	it('shows total count when showTotalCount is enabled', async () => {
+	it('shows the total count from the API response', async () => {
 		renderListAlertRules();
 
 		await screen.findByText('Pag Rule 0');
@@ -42,14 +52,13 @@ describe('ListAlertRules — pagination', () => {
 		expect(totalCount.textContent).toContain('of 15');
 	});
 
-	it('navigates to page 2 and shows remaining rows', async () => {
+	it('navigates to page 2 by requesting the next offset', async () => {
 		const user = userEvent.setup({ delay: null });
 		renderListAlertRules();
 
 		await screen.findByText('Pag Rule 0');
 
-		const nextBtn = screen.getByLabelText('Go to next page');
-		await user.click(nextBtn);
+		await user.click(screen.getByLabelText('Go to next page'));
 
 		await waitFor(() => {
 			expect(screen.getByText('Pag Rule 10')).toBeInTheDocument();
@@ -57,8 +66,20 @@ describe('ListAlertRules — pagination', () => {
 			expect(screen.queryByText('Pag Rule 0')).not.toBeInTheDocument();
 		});
 
+		const lastRequest = requests[requests.length - 1];
+		expect(lastRequest.get('limit')).toBe('10');
+		expect(lastRequest.get('offset')).toBe('10');
 		await waitFor(() => {
 			expect(getCurrentNuqsQueryString()).toContain('page=2');
 		});
 	});
+
+	it('requests the page from the URL on load', async () => {
+		renderListAlertRules({ initialRoute: '/?page=2' });
+
+		await screen.findByText('Pag Rule 10');
+
+		expect(requests[0].get('offset')).toBe('10');
+		expect(screen.queryByText('Pag Rule 0')).not.toBeInTheDocument();
+	});
 });

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.rowClick.test.tsx

@@ -9,7 +9,7 @@ describe('ListAlertRules — row click navigation', () => {
 		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
 	});
 
-	it('clicking a row calls safeNavigate to alerts/overview with composite query + ruleId', async () => {
+	it('clicking a row calls safeNavigate to alerts/overview with ruleId', async () => {
 		const user = userEvent.setup({ delay: null });
 		renderListAlertRules();
 
@@ -26,8 +26,7 @@ describe('ListAlertRules — row click navigation', () => {
 		const [url] = safeNavigateMock.mock.calls[0];
 		expect(url).toContain('/alerts/overview?');
 		expect(url).toContain('ruleId=rule-1');
-		expect(url).toContain('panelTypes=graph');
-		expect(url).toContain('compositeQuery=');
+		expect(url).not.toContain('compositeQuery=');
 	});
 
 	it('ctrl+click on a row navigates with newTab option', async () => {

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.search.test.tsx

@@ -1,99 +1,217 @@
-import userEvent from '@testing-library/user-event';
-import { screen, waitFor } from 'tests/test-utils';
-import { getCurrentNuqsQueryString } from 'tests/nuqs-helpers';
+import {
+	alertRulesFixture,
+	listRulesV3Response,
+} from 'mocks-server/__mockdata__/alert_rules';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { screen, userEvent, waitFor, within } from 'tests/test-utils';
+import {
+	getCurrentNuqsQueryString,
+	getCurrentNuqsSearchParams,
+} from 'tests/nuqs-helpers';
 
-import { renderListAlertRules } from './_helpers';
+import {
+	getSearchDraft,
+	renderListAlertRules,
+	runSearchQuery,
+	setSearchDraft,
+} from './_helpers';
 
-function getSearchInput(): HTMLInputElement {
-	return screen.getByTestId('list-alerts-search-input') as HTMLInputElement;
+const QUERY = "name CONTAINS 'CPU'";
+
+function lastRequest(requests: URLSearchParams[]): URLSearchParams {
+	return requests[requests.length - 1];
 }
 
 describe('ListAlertRules — search', () => {
+	let requests: URLSearchParams[];
+
 	beforeEach(() => {
 		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+		requests = [];
+		server.use(
+			rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
+				requests.push(req.url.searchParams);
+				return res(
+					ctx.status(200),
+					ctx.json(listRulesV3Response(alertRulesFixture, req.url.searchParams)),
+				);
+			}),
+		);
 	});
 
-	it('filters rows by alert name with debounce', async () => {
+	it('sends the draft query only when Run is clicked', async () => {
 		const user = userEvent.setup({ delay: null });
 		renderListAlertRules();
 
 		await screen.findByText('High CPU Alert');
 
-		await user.clear(getSearchInput());
-		await user.type(getSearchInput(), 'CPU');
+		setSearchDraft(QUERY);
+
+		await expect(
+			screen.findByTestId('alert-rules-list-search-dirty'),
+		).resolves.toBeInTheDocument();
+		expect(requests.some((r) => r.has('query'))).toBe(false);
+		expect(getCurrentNuqsSearchParams().has('query')).toBe(false);
+
+		await user.click(screen.getByTestId('alert-rules-list-search-submit'));
 
 		await waitFor(() => {
-			expect(screen.getByText('High CPU Alert')).toBeInTheDocument();
-			expect(screen.queryByText('Memory Pending Alert')).not.toBeInTheDocument();
+			expect(lastRequest(requests).get('query')).toBe(QUERY);
 		});
+		await waitFor(() => {
+			expect(getCurrentNuqsSearchParams().get('query')).toBe(QUERY);
+		});
+		expect(
+			screen.queryByTestId('alert-rules-list-search-dirty'),
+		).not.toBeInTheDocument();
 	});
 
-	it('filters rows by label values (severity)', async () => {
+	it('runs the draft on Mod-Enter', async () => {
 		const user = userEvent.setup({ delay: null });
 		renderListAlertRules();
 
 		await screen.findByText('High CPU Alert');
 
-		await user.clear(getSearchInput());
-		await user.type(getSearchInput(), 'warning');
+		setSearchDraft(QUERY);
+		const content = screen
+			.getByTestId('alert-rules-list-search')
+			.querySelector<HTMLElement>('.cm-content');
+		if (!content) {
+			throw new Error('Editor content not found');
+		}
+		content.focus();
+		await user.keyboard('{Control>}{Enter}{/Control}');
 
 		await waitFor(() => {
-			expect(screen.getByText('Memory Pending Alert')).toBeInTheDocument();
-			expect(screen.queryByText('High CPU Alert')).not.toBeInTheDocument();
+			expect(getCurrentNuqsSearchParams().get('query')).toBe(QUERY);
 		});
 	});
 
-	it('restores all rows when search is cleared', async () => {
+	it('trims the submitted query', async () => {
 		const user = userEvent.setup({ delay: null });
 		renderListAlertRules();
 
 		await screen.findByText('High CPU Alert');
 
-		await user.clear(getSearchInput());
-		await user.type(getSearchInput(), 'CPU');
+		await runSearchQuery(user, `  ${QUERY}  `);
 
 		await waitFor(() => {
-			expect(screen.queryByText('Memory Pending Alert')).not.toBeInTheDocument();
-		});
-
-		await user.clear(getSearchInput());
-
-		await waitFor(() => {
-			expect(screen.getByText('High CPU Alert')).toBeInTheDocument();
-			expect(screen.getByText('Memory Pending Alert')).toBeInTheDocument();
-			expect(screen.getByText('Healthy Alert')).toBeInTheDocument();
+			expect(getCurrentNuqsSearchParams().get('query')).toBe(QUERY);
 		});
+		expect(lastRequest(requests).get('query')).toBe(QUERY);
 	});
 
-	it('shows no-results state when no match', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
+	it('loads the query from the URL into the editor and the request', async () => {
+		renderListAlertRules({
+			initialRoute: `/?query=${encodeURIComponent(QUERY)}`,
+		});
 
 		await screen.findByText('High CPU Alert');
 
-		await user.clear(getSearchInput());
-		await user.type(getSearchInput(), 'zzzzzz-no-match');
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-results-empty-state')).toBeInTheDocument();
-			expect(screen.getByTestId('no-results-title')).toHaveTextContent(
-				'No matching alert rules',
-			);
-		});
+		expect(getSearchDraft()).toBe(QUERY);
+		expect(requests[0].get('query')).toBe(QUERY);
 	});
 
-	it('resets page to 1 when search debounce fires', async () => {
+	it('resets page to 1 when a query is run', async () => {
 		const user = userEvent.setup({ delay: null });
 		renderListAlertRules({ initialRoute: '/?page=2' });
 
-		// Page 2 of the 4-rule fixture has no rows; we only need the search input
-		// to be mounted, which happens before data is fetched.
-		const input = await screen.findByTestId('list-alerts-search-input');
-		await user.clear(input);
-		await user.type(input, 'CPU');
+		await screen.findByTestId('alert-rules-list-search');
+		await runSearchQuery(user, QUERY);
 
 		await waitFor(() => {
-			expect(getCurrentNuqsQueryString()).not.toContain('page=2');
+			expect(getCurrentNuqsSearchParams().get('query')).toBe(QUERY);
+		});
+		expect(getCurrentNuqsQueryString()).not.toContain('page=2');
+		await waitFor(() => {
+			expect(lastRequest(requests).get('offset')).toBe('0');
 		});
 	});
+
+	it('sends each selected state as a repeated states= param', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules();
+
+		await screen.findByText('High CPU Alert');
+
+		await user.click(screen.getByTestId('alert-rules-filter-states'));
+		await user.click(await screen.findByRole('option', { name: 'Firing' }));
+		await user.click(await screen.findByRole('option', { name: 'Disabled' }));
+
+		await waitFor(() => {
+			expect(lastRequest(requests).getAll('states')).toStrictEqual([
+				'firing',
+				'disabled',
+			]);
+		});
+		expect(lastRequest(requests).has('states[]')).toBe(false);
+		await waitFor(() => {
+			expect(getCurrentNuqsSearchParams().get('states')).toBe('firing,disabled');
+		});
+	});
+
+	it('Clear empties the query and the states', async () => {
+		const user = userEvent.setup({ delay: null });
+		renderListAlertRules({
+			initialRoute: `/?query=${encodeURIComponent(QUERY)}&states=firing`,
+		});
+
+		await screen.findByText('High CPU Alert');
+		expect(lastRequest(requests).get('query')).toBe(QUERY);
+
+		await user.click(screen.getByTestId('alert-rules-filter-clear'));
+
+		await waitFor(() => {
+			const params = getCurrentNuqsSearchParams();
+			expect(params.has('query')).toBe(false);
+			expect(params.has('states')).toBe(false);
+		});
+		await waitFor(() => {
+			const last = lastRequest(requests);
+			expect(last.has('query')).toBe(false);
+			expect(last.has('states')).toBe(false);
+		});
+		expect(getSearchDraft()).toBe('');
+		expect(
+			screen.queryByTestId('alert-rules-filter-clear'),
+		).not.toBeInTheDocument();
+	});
+
+	it.each(['rule_list_filter_invalid', 'rule_list_invalid'])(
+		'shows the backend message and no-results state for %s',
+		async (code) => {
+			const user = userEvent.setup({ delay: null });
+			server.use(
+				rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
+					if (req.url.searchParams.has('query')) {
+						return res(
+							ctx.status(400),
+							ctx.json({ error: { code, message: 'unknown field "nme"' } }),
+						);
+					}
+					return res(
+						ctx.status(200),
+						ctx.json(listRulesV3Response(alertRulesFixture, req.url.searchParams)),
+					);
+				}),
+			);
+
+			renderListAlertRules();
+
+			await screen.findByText('High CPU Alert');
+
+			await runSearchQuery(user, "nme = 'x'");
+
+			await expect(
+				screen.findByTestId('alert-rules-query-error'),
+			).resolves.toHaveTextContent('unknown field "nme"');
+			const empty = screen.getByTestId('no-results-empty-state');
+			expect(within(empty).getByTestId('no-results-subtitle')).toHaveTextContent(
+				'The filter query is invalid. Fix it or clear the search.',
+			);
+			expect(screen.queryByTestId('error-empty-state')).not.toBeInTheDocument();
+			expect(screen.queryByText('High CPU Alert')).not.toBeInTheDocument();
+		},
+	);
 });

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.utils.test.ts

@@ -1,14 +1,19 @@
 import { logEventMock } from '__tests__/logEventMock';
-import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	RuletypesListOrderDTO,
+	RuletypesListSortDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import type { SortState } from 'components/TanStackTableView/types';
 
-import type { AlertRule } from '../types';
+import type { AlertRule, RuleListFilter } from '../types';
 import {
 	ALERT_ACTIONS,
 	alertActionLogEvent,
-	filterRulesByFilters,
-	getAlertSortValue,
-	sortRules,
+	DEFAULT_RULE_LIST_FILTER,
+	isDefaultRuleListFilter,
+	isSameRuleListFilter,
+	toListSort,
+	toOrderBy,
 } from '../utils';
 
 const baseRule = {
@@ -27,159 +32,116 @@ const makeRule = (overrides: Partial<AlertRule>): AlertRule => ({
 	...overrides,
 });
 
-describe('getAlertSortValue', () => {
-	it('returns state for "state"', () => {
-		expect(
-			getAlertSortValue(
-				makeRule({ state: RuletypesAlertStateDTO.firing }),
-				'state',
-			),
-		).toBe('firing');
+describe('toListSort', () => {
+	it('returns the default sort when orderBy is null', () => {
+		expect(toListSort(null)).toStrictEqual({
+			sort: RuletypesListSortDTO.updated_at,
+			order: RuletypesListOrderDTO.desc,
+		});
 	});
 
-	it('returns alert name for "name"', () => {
-		expect(getAlertSortValue(makeRule({ alert: 'My Rule' }), 'name')).toBe(
-			'My Rule',
-		);
+	it('returns the default sort for an unknown column', () => {
+		expect(toListSort({ columnName: 'labels', order: 'asc' })).toStrictEqual({
+			sort: RuletypesListSortDTO.updated_at,
+			order: RuletypesListOrderDTO.desc,
+		});
 	});
 
-	it('returns severity label for "severity"', () => {
-		expect(
-			getAlertSortValue(
-				makeRule({ labels: { severity: 'critical' } }),
-				'severity',
-			),
-		).toBe('critical');
+	it.each([
+		['state', RuletypesListSortDTO.state],
+		['name', RuletypesListSortDTO.name],
+		['severity', RuletypesListSortDTO.severity],
+		['createdAt', RuletypesListSortDTO.created_at],
+		['updatedAt', RuletypesListSortDTO.updated_at],
+	])('maps column "%s" to sort "%s"', (columnName, sort) => {
+		expect(toListSort({ columnName, order: 'asc' })).toStrictEqual({
+			sort,
+			order: RuletypesListOrderDTO.asc,
+		});
 	});
 
-	it('returns createdAt as ms', () => {
-		const rule = makeRule({ createdAt: '2023-10-15T10:00:00Z' });
-		const result = getAlertSortValue(rule, 'createdAt');
-		expect(result).toBe(new Date('2023-10-15T10:00:00Z').getTime());
-	});
-
-	it('returns updatedAt as ms', () => {
-		const rule = makeRule({ updatedAt: '2023-10-19T10:00:00Z' });
-		const result = getAlertSortValue(rule, 'updatedAt');
-		expect(result).toBe(new Date('2023-10-19T10:00:00Z').getTime());
-	});
-
-	it('returns 0 when createdAt missing', () => {
-		expect(
-			getAlertSortValue(makeRule({ createdAt: undefined }), 'createdAt'),
-		).toBe(0);
-	});
-
-	it('returns empty for unknown column', () => {
-		expect(getAlertSortValue(baseRule, 'xxx')).toBe('');
-	});
-
-	it('returns empty for missing fields', () => {
-		expect(
-			getAlertSortValue(
-				makeRule({ state: undefined, labels: undefined }),
-				'state',
-			),
-		).toBe('');
-		expect(
-			getAlertSortValue(
-				makeRule({ state: undefined, labels: undefined }),
-				'severity',
-			),
-		).toBe('');
+	it('maps desc order', () => {
+		expect(toListSort({ columnName: 'name', order: 'desc' })).toStrictEqual({
+			sort: RuletypesListSortDTO.name,
+			order: RuletypesListOrderDTO.desc,
+		});
 	});
 });
 
-describe('sortRules', () => {
-	const r1 = makeRule({ id: '1', alert: 'A' });
-	const r2 = makeRule({ id: '2', alert: 'B' });
-	const r3 = makeRule({ id: '3', alert: 'C' });
-
-	it('sorts ascending by name', () => {
-		const order: SortState = { columnName: 'name', order: 'asc' };
-		const result = sortRules([r3, r1, r2], order);
-		expect(result.map((r) => r.alert)).toStrictEqual(['A', 'B', 'C']);
+describe('toOrderBy', () => {
+	it('returns null for the default sort', () => {
+		expect(
+			toOrderBy(RuletypesListSortDTO.updated_at, RuletypesListOrderDTO.desc),
+		).toBeNull();
 	});
 
-	it('sorts descending by name', () => {
-		const order: SortState = { columnName: 'name', order: 'desc' };
-		const result = sortRules([r1, r2, r3], order);
-		expect(result.map((r) => r.alert)).toStrictEqual(['C', 'B', 'A']);
+	it('returns the column for a non-default sort', () => {
+		expect(
+			toOrderBy(RuletypesListSortDTO.created_at, RuletypesListOrderDTO.asc),
+		).toStrictEqual<SortState>({ columnName: 'createdAt', order: 'asc' });
+		expect(
+			toOrderBy(RuletypesListSortDTO.updated_at, RuletypesListOrderDTO.asc),
+		).toStrictEqual<SortState>({ columnName: 'updatedAt', order: 'asc' });
 	});
 
-	it('returns unsorted when orderBy is null', () => {
-		const result = sortRules([r3, r1, r2], null);
-		expect(result.map((r) => r.alert)).toStrictEqual(['C', 'A', 'B']);
+	it('round-trips with toListSort', () => {
+		const orderBy: SortState = { columnName: 'severity', order: 'desc' };
+		const { sort, order } = toListSort(orderBy);
+		expect(toOrderBy(sort, order)).toStrictEqual(orderBy);
 	});
 });
 
-describe('filterRulesByFilters', () => {
-	const r1 = makeRule({
-		id: '1',
-		alert: 'R1',
-		state: RuletypesAlertStateDTO.firing,
-		labels: { severity: 'critical' },
-	});
-	const r2 = makeRule({
-		id: '2',
-		alert: 'R2',
-		state: RuletypesAlertStateDTO.inactive,
-		labels: { severity: 'warning' },
-	});
-	const r3 = makeRule({
-		id: '3',
-		alert: 'R3',
-		state: RuletypesAlertStateDTO.firing,
-		labels: { severity: 'warning' },
-	});
-	const rules = [r1, r2, r3];
+describe('isSameRuleListFilter', () => {
+	const filter: RuleListFilter = {
+		query: "severity = 'critical'",
+		states: ['firing', 'pending'],
+		sort: RuletypesListSortDTO.name,
+		order: RuletypesListOrderDTO.asc,
+	};
 
-	it('returns input when filters empty', () => {
-		expect(filterRulesByFilters(rules, [])).toStrictEqual(rules);
+	it('ignores surrounding whitespace in the query', () => {
+		expect(
+			isSameRuleListFilter(filter, { ...filter, query: `  ${filter.query} ` }),
+		).toBe(true);
 	});
 
-	it('filters by state', () => {
-		const result = filterRulesByFilters(rules, ['state:firing']);
-		expect(result.map((r) => r.id)).toStrictEqual(['1', '3']);
+	it('ignores states order', () => {
+		expect(
+			isSameRuleListFilter(filter, { ...filter, states: ['pending', 'firing'] }),
+		).toBe(true);
 	});
 
-	it('filters by severity', () => {
-		const result = filterRulesByFilters(rules, ['severity:warning']);
-		expect(result.map((r) => r.id)).toStrictEqual(['2', '3']);
+	it.each<[string, Partial<RuleListFilter>]>([
+		['query', { query: "severity = 'warning'" }],
+		['states', { states: ['firing'] }],
+		['sort', { sort: RuletypesListSortDTO.state }],
+		['order', { order: RuletypesListOrderDTO.desc }],
+	])('detects a different %s', (_, change) => {
+		expect(isSameRuleListFilter(filter, { ...filter, ...change })).toBe(false);
+	});
+});
+
+describe('isDefaultRuleListFilter', () => {
+	it('is true for DEFAULT_RULE_LIST_FILTER', () => {
+		expect(isDefaultRuleListFilter(DEFAULT_RULE_LIST_FILTER)).toBe(true);
 	});
 
-	it('combines state AND severity', () => {
-		const result = filterRulesByFilters(rules, [
-			'state:firing',
-			'severity:warning',
-		]);
-		expect(result.map((r) => r.id)).toStrictEqual(['3']);
+	it('is true for a whitespace-only query', () => {
+		expect(
+			isDefaultRuleListFilter({ ...DEFAULT_RULE_LIST_FILTER, query: '  ' }),
+		).toBe(true);
 	});
 
-	it('OR within same key (state)', () => {
-		const result = filterRulesByFilters(rules, [
-			'state:firing',
-			'state:inactive',
-		]);
-		expect(result.map((r) => r.id)).toStrictEqual(['1', '2', '3']);
-	});
-
-	it('matches values case-insensitively', () => {
-		const result = filterRulesByFilters(rules, ['state:FIRING']);
-		expect(result.map((r) => r.id)).toStrictEqual(['1', '3']);
-	});
-
-	it('ignores prefixes with wrong case (state: is required lowercase)', () => {
-		const result = filterRulesByFilters(rules, ['STATE:FIRING']);
-		expect(result).toStrictEqual(rules);
-	});
-
-	it('returns empty when no rule matches', () => {
-		expect(filterRulesByFilters(rules, ['state:nonexistent'])).toStrictEqual([]);
-	});
-
-	it('ignores unknown prefix', () => {
-		expect(filterRulesByFilters(rules, ['foo:bar'])).toStrictEqual(rules);
+	it('is false once any field differs', () => {
+		expect(
+			isDefaultRuleListFilter({ ...DEFAULT_RULE_LIST_FILTER, states: ['firing'] }),
+		).toBe(false);
+		expect(
+			isDefaultRuleListFilter({
+				...DEFAULT_RULE_LIST_FILTER,
+				sort: RuletypesListSortDTO.name,
+			}),
+		).toBe(false);
 	});
 });
 

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.views.test.tsx

@@ -0,0 +1,567 @@
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { useAlertRuleViewsStore } from 'container/ListAlertRules/useAlertRuleViewsStore';
+import {
+	alertRulesFixture,
+	listRulesV3Response,
+	ruleViewsFixture,
+} from 'mocks-server/__mockdata__/alert_rules';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { getCurrentNuqsSearchParams } from 'tests/nuqs-helpers';
+import {
+	getAppContextMock,
+	screen,
+	userEvent,
+	waitFor,
+	within,
+} from 'tests/test-utils';
+
+import { renderListAlertRules, runSearchQuery } from './_helpers';
+
+// jsdom has no layout, and Floating UI's getComputedStyle walk over every
+// popover ancestor costs ~1 s per open here, enough to time out under load.
+jest.mock('@floating-ui/dom', () => ({
+	...jest.requireActual('@floating-ui/dom'),
+	autoUpdate: (): (() => void) => (): void => {},
+	computePosition: (
+		_reference: unknown,
+		_floating: unknown,
+		{ placement = 'bottom', strategy = 'absolute' } = {},
+	): Promise<unknown> =>
+		Promise.resolve({ x: 0, y: 0, placement, strategy, middlewareData: {} }),
+}));
+
+const VIEW_1_ORDER_BY = JSON.stringify({ columnName: 'name', order: 'asc' });
+const VIEW_1_QUERY = "severity = 'critical'";
+
+type Body = Record<string, unknown>;
+type User = ReturnType<typeof userEvent.setup>;
+
+function captureRulesRequests(): URLSearchParams[] {
+	const requests: URLSearchParams[] = [];
+	server.use(
+		rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
+			requests.push(req.url.searchParams);
+			return res(
+				ctx.status(200),
+				ctx.json(listRulesV3Response(alertRulesFixture, req.url.searchParams)),
+			);
+		}),
+	);
+	return requests;
+}
+
+function captureViewWrites(): {
+	posts: Body[];
+	puts: { id: string; body: Body }[];
+	deletes: string[];
+} {
+	const captured = {
+		posts: [] as Body[],
+		puts: [] as { id: string; body: Body }[],
+		deletes: [] as string[],
+	};
+	server.use(
+		rest.post('http://localhost/api/v2/rule_views', async (req, res, ctx) => {
+			const body = (await req.json()) as Body;
+			captured.posts.push(body);
+			return res(
+				ctx.status(201),
+				ctx.json({
+					data: { ...body, id: 'new-view-id', orgId: 'org-1' },
+					status: 'success',
+				}),
+			);
+		}),
+		rest.put('http://localhost/api/v2/rule_views/:id', async (req, res, ctx) => {
+			const body = (await req.json()) as Body;
+			const id = req.params.id as string;
+			captured.puts.push({ id, body });
+			return res(
+				ctx.status(200),
+				ctx.json({ data: { ...body, id, orgId: 'org-1' }, status: 'success' }),
+			);
+		}),
+		rest.delete('http://localhost/api/v2/rule_views/:id', (req, res, ctx) => {
+			captured.deletes.push(req.params.id as string);
+			return res(ctx.status(204));
+		}),
+	);
+	return captured;
+}
+
+function lastRequest(requests: URLSearchParams[]): URLSearchParams {
+	return requests[requests.length - 1];
+}
+
+function urlParam(key: string): string | null {
+	return getCurrentNuqsSearchParams().get(key);
+}
+
+// The linked-view restore writes the URL a tick after the views render.
+function urlSettled(): Promise<void> {
+	return new Promise((resolve) => {
+		setTimeout(resolve, 0);
+	});
+}
+
+function viewItem(id: string): HTMLElement {
+	return screen.getByTestId(`alert-rules-view-${id}`);
+}
+
+function activeHeading(): HTMLElement {
+	return screen.getByTestId('alert-rules-list-heading');
+}
+
+async function selectView(user: User, id: string): Promise<void> {
+	await user.click(await screen.findByTestId(`alert-rules-view-${id}`));
+	await waitFor(() => expect(urlParam('view')).toBe(id));
+}
+
+// A role query walks the whole table; the antd confirm's button is found by text.
+function findConfirmDelete(): Promise<HTMLElement> {
+	return screen.findByText('Delete', {
+		selector: '.ant-modal-confirm button span',
+	});
+}
+
+describe('ListAlertRules — saved views rail', () => {
+	beforeEach(() => {
+		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
+		localStorage.removeItem(LOCALSTORAGE.ALERT_RULES_LIST_VIEWS);
+		useAlertRuleViewsStore.setState({ railCollapsed: false });
+	});
+
+	describe('builtin views', () => {
+		it('renders the builtin views with All active by default', async () => {
+			renderListAlertRules();
+
+			await screen.findByText('High CPU Alert');
+			expect(viewItem('mine')).toHaveTextContent('My alert rules');
+			expect(viewItem('all')).toHaveTextContent('All alert rules');
+			expect(viewItem('firing')).toHaveTextContent('Firing');
+			expect(viewItem('disabled')).toHaveTextContent('Disabled');
+			expect(activeHeading()).toHaveTextContent('All alert rules');
+			expect(
+				screen.queryByTestId('alert-rules-view-save-as-new'),
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId('alert-rules-view-reset'),
+			).not.toBeInTheDocument();
+		});
+
+		it.each([
+			['firing', 'Firing'],
+			['disabled', 'Disabled'],
+		])('%s sends states=%s', async (id, label) => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			const requests = captureRulesRequests();
+			renderListAlertRules();
+			await screen.findByText('High CPU Alert');
+
+			await selectView(user, id);
+
+			await waitFor(() => {
+				expect(lastRequest(requests).getAll('states')).toStrictEqual([id]);
+			});
+			expect(lastRequest(requests).has('query')).toBe(false);
+			expect(urlParam('states')).toBe(id);
+			expect(activeHeading()).toHaveTextContent(label);
+			expect(
+				screen.queryByTestId('alert-rules-view-save-as-new'),
+			).not.toBeInTheDocument();
+		});
+
+		it('My alert rules filters by the current user as creator', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			const requests = captureRulesRequests();
+			const { email } = getAppContextMock('ADMIN').user;
+			renderListAlertRules();
+			await screen.findByText('High CPU Alert');
+
+			await selectView(user, 'mine');
+
+			const expected = `created_by = '${email}'`;
+			await waitFor(() => {
+				expect(lastRequest(requests).get('query')).toBe(expected);
+			});
+			expect(lastRequest(requests).has('states')).toBe(false);
+			expect(urlParam('query')).toBe(expected);
+			expect(activeHeading()).toHaveTextContent('My alert rules');
+		});
+
+		it('editing a builtin view filter offers save as new view, which POSTs', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			const captured = captureViewWrites();
+			renderListAlertRules();
+			await screen.findByText('High CPU Alert');
+
+			await runSearchQuery(user, 'foo');
+
+			await user.click(await screen.findByTestId('alert-rules-view-save-as-new'));
+			expect(
+				screen.queryByTestId('alert-rules-view-save-changes'),
+			).not.toBeInTheDocument();
+			await user.type(
+				await screen.findByTestId('save-alert-rule-view-name'),
+				'Foo alerts',
+			);
+			await user.click(screen.getByTestId('save-alert-rule-view-confirm'));
+
+			await waitFor(() => expect(captured.posts).toHaveLength(1));
+			expect(captured.posts[0]).toStrictEqual({
+				name: 'Foo alerts',
+				data: {
+					version: 'v1',
+					query: 'foo',
+					states: [],
+					sort: 'updated_at',
+					order: 'desc',
+				},
+			});
+			await waitFor(() => expect(urlParam('view')).toBe('new-view-id'));
+		});
+	});
+
+	describe('saved views', () => {
+		it('lists saved views and applies the selected one', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			const requests = captureRulesRequests();
+			renderListAlertRules({ initialRoute: '/?page=2' });
+
+			await expect(
+				screen.findByTestId('alert-rules-view-view-1'),
+			).resolves.toHaveTextContent('Critical firing');
+			expect(viewItem('view-2')).toHaveTextContent('Infra team');
+
+			await selectView(user, 'view-1');
+
+			await waitFor(() => {
+				expect(urlParam('query')).toBe(VIEW_1_QUERY);
+				expect(urlParam('states')).toBe('firing');
+				expect(urlParam('orderBy')).toBe(VIEW_1_ORDER_BY);
+			});
+			expect(urlParam('page')).not.toBe('2');
+			await waitFor(() => {
+				const last = lastRequest(requests);
+				expect(last.get('query')).toBe(VIEW_1_QUERY);
+				expect(last.getAll('states')).toStrictEqual(['firing']);
+				expect(last.get('sort')).toBe('name');
+				expect(last.get('order')).toBe('asc');
+				expect(last.get('offset')).toBe('0');
+			});
+			expect(activeHeading()).toHaveTextContent('Critical firing');
+			expect(
+				screen.queryByTestId('alert-rules-view-save-changes'),
+			).not.toBeInTheDocument();
+		});
+
+		it('shows the unsaved-changes panel after editing an applied view filter', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			renderListAlertRules();
+			await selectView(user, 'view-1');
+
+			await runSearchQuery(user, 'foo');
+
+			await screen.findByTestId('alert-rules-view-save-changes');
+			expect(screen.getByTestId('alert-rules-view-save-as')).toBeInTheDocument();
+			expect(screen.getByTestId('alert-rules-view-reset')).toBeInTheDocument();
+			expect(
+				within(viewItem('view-1')).getByTitle('Unsaved changes'),
+			).toBeInTheDocument();
+		});
+
+		it('Save PUTs the full current filter and the unchanged name', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			const captured = captureViewWrites();
+			renderListAlertRules();
+			await selectView(user, 'view-1');
+			await runSearchQuery(user, 'foo');
+
+			await user.click(await screen.findByTestId('alert-rules-view-save-changes'));
+
+			await waitFor(() => expect(captured.puts).toHaveLength(1));
+			expect(captured.puts[0]).toStrictEqual({
+				id: 'view-1',
+				body: {
+					name: 'Critical firing',
+					data: {
+						version: 'v1',
+						query: 'foo',
+						states: ['firing'],
+						sort: 'name',
+						order: 'asc',
+					},
+				},
+			});
+			await waitFor(() =>
+				expect(
+					screen.queryByTestId('alert-rules-view-save-changes'),
+				).not.toBeInTheDocument(),
+			);
+		});
+
+		it('Save as POSTs a new view and activates it', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			const captured = captureViewWrites();
+			renderListAlertRules();
+			await selectView(user, 'view-1');
+			await runSearchQuery(user, 'foo');
+
+			await user.click(await screen.findByTestId('alert-rules-view-save-as'));
+			await user.type(
+				await screen.findByTestId('save-alert-rule-view-name'),
+				'My view',
+			);
+			await user.click(screen.getByTestId('save-alert-rule-view-confirm'));
+
+			await waitFor(() => expect(captured.posts).toHaveLength(1));
+			expect(captured.posts[0]).toStrictEqual({
+				name: 'My view',
+				data: {
+					version: 'v1',
+					query: 'foo',
+					states: ['firing'],
+					sort: 'name',
+					order: 'asc',
+				},
+			});
+			await waitFor(() => expect(urlParam('view')).toBe('new-view-id'));
+			expect(captured.puts).toHaveLength(0);
+		});
+
+		it('caps a view name at 64 characters', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			const captured = captureViewWrites();
+			renderListAlertRules();
+			await screen.findByText('High CPU Alert');
+
+			await user.click(screen.getByLabelText('Save current filters as a view'));
+			const input = await screen.findByTestId('save-alert-rule-view-name');
+			await user.type(input, 'x'.repeat(70));
+
+			expect(input).toHaveValue('x'.repeat(64));
+			await user.click(screen.getByTestId('save-alert-rule-view-confirm'));
+
+			await waitFor(() => expect(captured.posts).toHaveLength(1));
+			expect(captured.posts[0]).toMatchObject({ name: 'x'.repeat(64) });
+		});
+
+		it('Reset restores the active view filter', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			renderListAlertRules();
+			await selectView(user, 'view-1');
+			await runSearchQuery(user, 'foo');
+			await waitFor(() => expect(urlParam('query')).toBe('foo'));
+
+			await user.click(await screen.findByTestId('alert-rules-view-reset'));
+
+			await waitFor(() => {
+				expect(urlParam('query')).toBe(VIEW_1_QUERY);
+			});
+			expect(urlParam('states')).toBe('firing');
+			expect(urlParam('orderBy')).toBe(VIEW_1_ORDER_BY);
+			expect(urlParam('view')).toBe('view-1');
+			expect(
+				screen.queryByTestId('alert-rules-view-reset'),
+			).not.toBeInTheDocument();
+		});
+
+		it('rename PUTs the new name and keeps the stored filter', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			const captured = captureViewWrites();
+			renderListAlertRules();
+			await selectView(user, 'view-2');
+			await runSearchQuery(user, 'foo');
+			await screen.findByTestId('alert-rules-view-save-changes');
+
+			const row = viewItem('view-1').parentElement as HTMLElement;
+			await user.click(within(row).getByLabelText('Rename view'));
+			const input = await screen.findByTestId('rename-alert-rule-view-name');
+			expect(input).toHaveValue('Critical firing');
+			await user.clear(input);
+			await user.type(input, 'Renamed');
+			await user.click(screen.getByTestId('rename-alert-rule-view-confirm'));
+
+			await waitFor(() => expect(captured.puts).toHaveLength(1));
+			expect(captured.puts[0]).toStrictEqual({
+				id: 'view-1',
+				body: {
+					name: 'Renamed',
+					data: {
+						version: 'v1',
+						query: VIEW_1_QUERY,
+						states: ['firing'],
+						sort: 'name',
+						order: 'asc',
+					},
+				},
+			});
+			await waitFor(() => expect(viewItem('view-1')).toHaveTextContent('Renamed'));
+		});
+
+		it('delete asks for confirmation and sends DELETE', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			const captured = captureViewWrites();
+			renderListAlertRules();
+			await selectView(user, 'view-1');
+
+			await user.click(screen.getByTestId('alert-rules-view-delete-view-2'));
+
+			await expect(
+				screen.findByText(/Views are shared across your organization/),
+			).resolves.toBeInTheDocument();
+			expect(captured.deletes).toHaveLength(0);
+			await user.click(await findConfirmDelete());
+
+			await waitFor(() => expect(captured.deletes).toStrictEqual(['view-2']));
+			expect(urlParam('view')).toBe('view-1');
+		});
+
+		it('deleting the active view falls back to All', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			const captured = captureViewWrites();
+			renderListAlertRules();
+			await selectView(user, 'view-1');
+			await waitFor(() => expect(urlParam('query')).toBe(VIEW_1_QUERY));
+
+			await user.click(screen.getByTestId('alert-rules-view-delete-view-1'));
+			await user.click(await findConfirmDelete());
+
+			await waitFor(() => expect(captured.deletes).toStrictEqual(['view-1']));
+			await waitFor(() => {
+				expect(urlParam('view')).toBeNull();
+				expect(urlParam('query')).toBeNull();
+				expect(urlParam('states')).toBeNull();
+			});
+			expect(activeHeading()).toHaveTextContent('All alert rules');
+		});
+
+		it('All alert rules clears the view and its filters', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			renderListAlertRules();
+			await selectView(user, 'view-1');
+			await waitFor(() => expect(urlParam('query')).not.toBeNull());
+
+			await user.click(viewItem('all'));
+
+			await waitFor(() => {
+				expect(urlParam('view')).toBeNull();
+				expect(urlParam('query')).toBeNull();
+				expect(urlParam('states')).toBeNull();
+			});
+			expect(activeHeading()).toHaveTextContent('All alert rules');
+		});
+	});
+
+	describe('shared links', () => {
+		it('applies the linked view filter when the URL carries only view=', async () => {
+			renderListAlertRules({ initialRoute: '/?view=view-1' });
+
+			await waitFor(() => {
+				expect(urlParam('query')).toBe(VIEW_1_QUERY);
+				expect(urlParam('states')).toBe('firing');
+				expect(urlParam('orderBy')).toBe(VIEW_1_ORDER_BY);
+			});
+			expect(urlParam('view')).toBe('view-1');
+			expect(activeHeading()).toHaveTextContent('Critical firing');
+			expect(
+				screen.queryByTestId('alert-rules-view-save-changes'),
+			).not.toBeInTheDocument();
+		});
+
+		it('keeps explicit filter params from the link and marks the view modified', async () => {
+			renderListAlertRules({ initialRoute: '/?view=view-1&query=foo' });
+
+			await screen.findByTestId('alert-rules-view-save-changes');
+			expect(urlParam('query')).toBe('foo');
+			expect(urlParam('states')).toBeNull();
+			expect(activeHeading()).toHaveTextContent('Critical firing');
+		});
+
+		it('marks a cleared view filter in the URL', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			renderListAlertRules();
+			await selectView(user, 'view-2');
+
+			await user.click(screen.getByTestId('alert-rules-filter-clear'));
+
+			await waitFor(() => expect(urlParam('query')).toBe(''));
+			expect(urlParam('view')).toBe('view-2');
+		});
+
+		it('keeps a cleared view filter cleared on reload', async () => {
+			const requests = captureRulesRequests();
+			renderListAlertRules({ initialRoute: '/?view=view-1&query=' });
+
+			await screen.findByTestId('alert-rules-view-save-changes');
+			await urlSettled();
+			expect(urlParam('query')).toBe('');
+			expect(urlParam('states')).toBeNull();
+			expect(lastRequest(requests).get('query') ?? '').toBe('');
+		});
+
+		it('keeps a query run while the linked views are still loading', async () => {
+			server.use(
+				rest.get('http://localhost/api/v2/rule_views', (_, res, ctx) =>
+					res(
+						ctx.delay(300),
+						ctx.status(200),
+						ctx.json({ data: { views: ruleViewsFixture }, status: 'success' }),
+					),
+				),
+			);
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			renderListAlertRules({ initialRoute: '/?view=view-1' });
+
+			await runSearchQuery(user, 'foo');
+			await screen.findByTestId(
+				'alert-rules-view-save-changes',
+				{},
+				{ timeout: 5000 },
+			);
+			await urlSettled();
+			expect(urlParam('query')).toBe('foo');
+			expect(urlParam('states')).toBeNull();
+		});
+	});
+
+	describe('rail chrome', () => {
+		it('filters views by name', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			renderListAlertRules();
+			await screen.findByTestId('alert-rules-view-view-2');
+
+			const search = screen.getByTestId('alert-rules-view-search');
+			await user.type(search, 'infra');
+
+			expect(viewItem('view-2')).toBeInTheDocument();
+			expect(
+				screen.queryByTestId('alert-rules-view-view-1'),
+			).not.toBeInTheDocument();
+			expect(screen.queryByTestId('alert-rules-view-all')).not.toBeInTheDocument();
+
+			await user.clear(search);
+			await user.type(search, 'zzz');
+
+			expect(screen.getByText(/No views match/)).toBeInTheDocument();
+		});
+
+		it('collapses the rail from the status bar and persists it', async () => {
+			const user = userEvent.setup({ delay: null, pointerEventsCheck: 0 });
+			renderListAlertRules();
+			await screen.findByText('High CPU Alert');
+
+			const toggle = screen.getByTestId('alert-rules-rail-toggle');
+			expect(toggle).toHaveTextContent('Collapse');
+
+			await user.click(toggle);
+
+			expect(toggle).toHaveTextContent('Expand');
+			const stored = JSON.parse(
+				localStorage.getItem(LOCALSTORAGE.ALERT_RULES_LIST_VIEWS) ?? '{}',
+			);
+			expect(stored.state.railCollapsed).toBe(true);
+		});
+	});
+});

frontend/src/container/ListAlertRules/__tests__/_helpers.tsx

@@ -1,6 +1,9 @@
+import { type ReactNode, useEffect, useState } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { VirtuosoMockContext } from 'react-virtuoso';
-import { render, RenderResult, screen } from '@testing-library/react';
+import { act, render, RenderResult, screen } from '@testing-library/react';
+import type userEvent from '@testing-library/user-event';
+import { EditorView } from '@uiw/react-codemirror';
 import ListAlertRules from 'container/ListAlertRules';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { AppContext } from 'providers/App/App';
@@ -9,6 +12,32 @@ import { onNuqsUrlUpdate, resetNuqsState } from 'tests/nuqs-helpers';
 import { TestRouter } from 'tests/router';
 import { getAppContextMock } from 'tests/test-utils';
 
+// NuqsTestingAdapter resets its update queue on every render, not only on mount,
+// dropping writes queued just before it re-renders.
+function UrlAdapter({
+	searchParams,
+	children,
+}: {
+	searchParams: string;
+	children: ReactNode;
+}): JSX.Element {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	return (
+		<NuqsTestingAdapter
+			searchParams={searchParams}
+			onUrlUpdate={onNuqsUrlUpdate}
+			rateLimitFactor={0}
+			resetUrlUpdateQueueOnMount={!mounted}
+			hasMemory
+		>
+			{children}
+		</NuqsTestingAdapter>
+	);
+}
+
 interface RenderOptions {
 	role?: string;
 	initialRoute?: string;
@@ -33,12 +62,7 @@ export function renderListAlertRules(
 
 	return render(
 		<TestRouter initialRoute={initialRoute}>
-			<NuqsTestingAdapter
-				searchParams={initialSearch}
-				onUrlUpdate={onNuqsUrlUpdate}
-				rateLimitFactor={0}
-				hasMemory
-			>
+			<UrlAdapter searchParams={initialSearch}>
 				<QueryClientProvider client={queryClient}>
 					<AppContext.Provider value={getAppContextMock(role)}>
 						<TimezoneProvider>
@@ -50,7 +74,7 @@ export function renderListAlertRules(
 						</TimezoneProvider>
 					</AppContext.Provider>
 				</QueryClientProvider>
-			</NuqsTestingAdapter>
+			</UrlAdapter>
 		</TestRouter>,
 	);
 }
@@ -63,3 +87,31 @@ export async function findAlertRow(alertName: string): Promise<HTMLElement> {
 	}
 	return row as HTMLElement;
 }
+
+type User = ReturnType<typeof userEvent.setup>;
+
+export function setSearchDraft(value: string): void {
+	const view = EditorView.findFromDOM(
+		screen.getByTestId('alert-rules-list-search'),
+	);
+	if (!view) {
+		throw new Error('Search editor not found');
+	}
+	act(() => {
+		view.dispatch({
+			changes: { from: 0, to: view.state.doc.length, insert: value },
+		});
+	});
+}
+
+export function getSearchDraft(): string {
+	const view = EditorView.findFromDOM(
+		screen.getByTestId('alert-rules-list-search'),
+	);
+	return view?.state.doc.toString() ?? '';
+}
+
+export async function runSearchQuery(user: User, value: string): Promise<void> {
+	setSearchDraft(value);
+	await user.click(screen.getByTestId('alert-rules-list-search-submit'));
+}

frontend/src/container/ListAlertRules/components/ActionsMenu.tsx

@@ -7,7 +7,7 @@ import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	deleteRuleByID,
-	invalidateListRules,
+	invalidateListRulesV3,
 	patchRuleByID,
 	cloneRuleByID,
 } from 'api/generated/services/rules';
@@ -22,7 +22,7 @@ import { ALERT_ACTIONS, alertActionLogEvent } from '../utils';
 
 interface ActionsMenuProps {
 	rule: AlertRule;
-	onEdit: (rule: AlertRule, options?: { newTab?: boolean }) => void;
+	onEdit: (rule: Pick<AlertRule, 'id'>, options?: { newTab?: boolean }) => void;
 }
 
 function ActionsMenu({ rule, onEdit }: ActionsMenuProps): JSX.Element {
@@ -34,7 +34,9 @@ function ActionsMenu({ rule, onEdit }: ActionsMenuProps): JSX.Element {
 		toast.promise(
 			patchRuleByID({ id: rule.id ?? '' }, {
 				disabled: newDisabled,
-			} as RuletypesPostableRuleDTO).then(() => invalidateListRules(queryClient)),
+			} as RuletypesPostableRuleDTO).then(() =>
+				invalidateListRulesV3(queryClient),
+			),
 			{
 				loading: newDisabled ? 'Disabling alert...' : 'Enabling alert...',
 				success: newDisabled ? 'Alert disabled' : 'Alert enabled',
@@ -65,10 +67,10 @@ function ActionsMenu({ rule, onEdit }: ActionsMenuProps): JSX.Element {
 			cloneRuleByID({
 				id: rule.id,
 			}).then(async (response) => {
-				await invalidateListRules(queryClient);
+				await invalidateListRulesV3(queryClient);
 				const newRule = response.data;
 				if (newRule) {
-					onEdit(newRule as AlertRule);
+					onEdit(newRule);
 				}
 				return newRule;
 			}),
@@ -90,7 +92,7 @@ function ActionsMenu({ rule, onEdit }: ActionsMenuProps): JSX.Element {
 		alertActionLogEvent(ALERT_ACTIONS.DELETE, rule);
 		toast.promise(
 			deleteRuleByID({ id: rule.id ?? '' }).then(() =>
-				invalidateListRules(queryClient),
+				invalidateListRulesV3(queryClient),
 			),
 			{
 				loading: 'Deleting alert...',

frontend/src/container/ListAlertRules/components/AlertRulesFilterZone.tsx

@@ -0,0 +1,44 @@
+import FilterZone from 'components/ListFilter/FilterZone/FilterZone';
+import type { SuggestionSource } from 'components/ListFilter/dsl/types';
+import type { CreatorOption } from 'components/ListFilter/types';
+
+import { RULES_DSL_GRAMMAR } from '../list.config';
+import RuleStatesFilter from './RuleStatesFilter';
+
+interface Props {
+	query: string;
+	states: string[];
+	creatorOptions: CreatorOption[];
+	source: SuggestionSource;
+	error: string | null;
+	onQueryChange: (query: string) => void;
+	onStatesChange: (states: string[]) => void;
+}
+
+function AlertRulesFilterZone({
+	query,
+	states,
+	creatorOptions,
+	source,
+	error,
+	onQueryChange,
+	onStatesChange,
+}: Props): JSX.Element {
+	return (
+		<FilterZone
+			query={query}
+			grammar={RULES_DSL_GRAMMAR}
+			testIdPrefix="alert-rules"
+			placeholder="DSL Filter — e.g. name CONTAINS 'cpu' AND labels.team = 'infra'"
+			creatorOptions={creatorOptions}
+			source={source}
+			onQueryChange={onQueryChange}
+			extraFilters={<RuleStatesFilter states={states} onChange={onStatesChange} />}
+			hasExtraFilters={states.length > 0}
+			onClearAll={(): void => onStatesChange([])}
+			error={error ?? undefined}
+		/>
+	);
+}
+
+export default AlertRulesFilterZone;

frontend/src/container/ListAlertRules/components/AlertRulesHeaderActions.module.scss

@@ -0,0 +1,5 @@
+.actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}

frontend/src/container/ListAlertRules/components/AlertRulesHeaderActions.tsx

@@ -0,0 +1,51 @@
+import type { MouseEvent } from 'react';
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { ColumnSelector } from 'components/TanStackTableView';
+import type { TableColumnDef } from 'components/TanStackTableView';
+import TextToolTip from 'components/TextToolTip';
+
+import type { AlertRule } from '../types';
+
+import styles from './AlertRulesHeaderActions.module.scss';
+
+interface Props {
+	columns: TableColumnDef<AlertRule>[];
+	canAddAlert: boolean;
+	onNewAlert: (e: MouseEvent) => void;
+}
+
+function AlertRulesHeaderActions({
+	columns,
+	canAddAlert,
+	onNewAlert,
+}: Props): JSX.Element {
+	return (
+		<div className={styles.actions}>
+			<ColumnSelector
+				columns={columns}
+				storageKey="alert-rules-columns"
+				testId="alert-columns-button"
+			/>
+			{canAddAlert && (
+				<Button
+					variant="solid"
+					size="sm"
+					prefix={<Plus size={14} />}
+					onClick={onNewAlert}
+					color="primary"
+					testId="list-alerts-new-alert-button"
+				>
+					New Alert
+				</Button>
+			)}
+			<TextToolTip
+				text="More details on how to create alerts"
+				url="https://signoz.io/docs/alerts/?utm_source=product&utm_medium=list-alerts"
+				urlText="Learn More"
+			/>
+		</div>
+	);
+}
+
+export default AlertRulesHeaderActions;

frontend/src/container/ListAlertRules/components/RuleStatesFilter.module.scss

@@ -0,0 +1,4 @@
+.statesSelect {
+	width: 240px;
+	flex: none;
+}

frontend/src/container/ListAlertRules/components/RuleStatesFilter.tsx

@@ -0,0 +1,49 @@
+import { useCallback } from 'react';
+import { ComboboxSimple, type ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
+
+import styles from './RuleStatesFilter.module.scss';
+
+const STATE_ITEMS: ComboboxSimpleItem[] = [
+	{ value: RuletypesAlertStateDTO.firing, label: 'Firing' },
+	{ value: RuletypesAlertStateDTO.pending, label: 'Pending' },
+	{ value: RuletypesAlertStateDTO.recovering, label: 'Recovering' },
+	{ value: RuletypesAlertStateDTO.inactive, label: 'OK' },
+	{ value: RuletypesAlertStateDTO.nodata, label: 'No data' },
+	{ value: RuletypesAlertStateDTO.disabled, label: 'Disabled' },
+];
+
+interface RuleStatesFilterProps {
+	states: string[];
+	onChange: (states: string[]) => void;
+}
+
+function RuleStatesFilter({
+	states,
+	onChange,
+}: RuleStatesFilterProps): JSX.Element {
+	const handleChange = useCallback(
+		(values: unknown): void => {
+			if (Array.isArray(values)) {
+				onChange(values as string[]);
+			}
+		},
+		[onChange],
+	);
+
+	return (
+		<ComboboxSimple
+			className={styles.statesSelect}
+			multiple
+			value={states}
+			onChange={handleChange}
+			placeholder="Filter by state"
+			inputPlaceholder="Select one or more"
+			items={STATE_ITEMS}
+			maxDisplayedPills={2}
+			testId="alert-rules-filter-states"
+		/>
+	);
+}
+
+export default RuleStatesFilter;

frontend/src/container/ListAlertRules/hooks.ts

@@ -1,24 +1,34 @@
-import { Options, useQueryState, UseQueryStateReturn } from 'nuqs';
-import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
+import {
+	Options,
+	parseAsArrayOf,
+	parseAsString,
+	useQueryState,
+	UseQueryStateReturn,
+} from 'nuqs';
 
 const defaultNuqsOptions: Options = {
 	history: 'push',
 };
 
 export const ALERT_RULES_PARAMS = {
-	SEARCH: 'search',
+	QUERY: 'query',
+	STATES: 'states',
+	VIEW: 'view',
 	PAGE: 'page',
 	RULE_TYPE: 'ruleType',
-	FILTERS: 'alertRulesFilters',
 } as const;
 
-export const useAlertRulesFilters = (): UseQueryStateReturn<
+export const useAlertRulesQuery = (): UseQueryStateReturn<string, string> =>
+	useQueryState(
+		ALERT_RULES_PARAMS.QUERY,
+		parseAsString.withDefault('').withOptions(defaultNuqsOptions),
+	);
+
+export const useAlertRulesStates = (): UseQueryStateReturn<
 	string[],
 	string[]
 > =>
 	useQueryState(
-		ALERT_RULES_PARAMS.FILTERS,
-		parseAsJsonNoValidate<string[]>()
-			.withDefault([])
-			.withOptions(defaultNuqsOptions),
+		ALERT_RULES_PARAMS.STATES,
+		parseAsArrayOf(parseAsString).withDefault([]).withOptions(defaultNuqsOptions),
 	);

frontend/src/container/ListAlertRules/index.tsx

@@ -1,28 +1,31 @@
 import { useCallback, useMemo } from 'react';
-import { Plus, Search } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
 import ErrorEmptyState from 'components/Alerts/ErrorEmptyState';
 import NoResultsEmptyState from 'components/Alerts/NoResultsEmptyState';
-import TanStackTable, { ColumnSelector } from 'components/TanStackTableView';
+import ListCommandHeader from 'components/ListViews/ListCommandHeader/ListCommandHeader';
+import ListStatusBar from 'components/ListViews/ListStatusBar/ListStatusBar';
+import ViewsRail from 'components/ListViews/ViewsRail/ViewsRail';
+import TanStackTable from 'components/TanStackTableView';
 import { useCalculatedPageSize } from 'components/TanStackTableView/useCalculatedPageSize';
 import { useTableParams } from 'components/TanStackTableView/useTableParams';
 import useComponentPermission from 'hooks/useComponentPermission';
-import { useUrlSearchState } from 'hooks/useUrlSearchState';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
 
-import TextToolTip from 'components/TextToolTip';
-
 import { AlertsEmptyState } from './AlertsEmptyState/AlertsEmptyState';
 import { ActionsMenu } from './components';
-import { ALERT_RULES_PARAMS, useAlertRulesFilters } from './hooks';
+import AlertRulesFilterZone from './components/AlertRulesFilterZone';
+import AlertRulesHeaderActions from './components/AlertRulesHeaderActions';
 import styles from './ListAlertRules.module.scss';
 import { getAlertRuleColumns } from './table.config';
 import type { AlertRule } from './types';
 import { useAlertRulesStripInfo } from './useAlertRulesStripInfo';
 import { useAlertRulesData } from './useAlertRulesData';
+import { useAlertRulesFilterSource } from './useAlertRulesFilterSource';
 import { useAlertRulesHandlers } from './useAlertRulesHandlers';
+import { useAlertRulesListFilter } from './useAlertRulesListFilter';
+import { useAlertRuleViews } from './useAlertRuleViews';
+import { useAlertRuleViewsStore } from './useAlertRuleViewsStore';
+import { DEFAULT_RULE_VIEW, RULE_BUILTIN_VIEWS } from './list.config';
 
 const QUERY_PARAMS_CONFIG = {
 	orderBy: 'orderBy',
@@ -40,14 +43,13 @@ function ListAlertRules(): JSX.Element {
 		user.role,
 	);
 
-	const [filterValues, setFilterValues] = useAlertRulesFilters();
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
 	const { containerRef, calculatedPageSize } = useCalculatedPageSize({
 		rowHeight: 46,
 	});
 
-	const { orderBy, page, limit, setLimit, setPage } = useTableParams(
+	const { orderBy, page, limit, setLimit, setPage, setOrderBy } = useTableParams(
 		QUERY_PARAMS_CONFIG,
 		{
 			page: DEFAULT_PAGE,
@@ -58,39 +60,63 @@ function ListAlertRules(): JSX.Element {
 		},
 	);
 
-	const resetPageOnSearch = useCallback((): void => {
-		setPage(1);
-	}, [setPage]);
+	const { filter, applyFilter, submitQuery, changeStates } =
+		useAlertRulesListFilter({ orderBy, setOrderBy, setPage });
 
-	const { searchText, debouncedSearch, handleSearchChange, clearSearch } =
-		useUrlSearchState(ALERT_RULES_PARAMS.SEARCH, {
-			onDebouncedChange: resetPageOnSearch,
-		});
+	const ruleViews = useAlertRuleViews({ filter, applyFilter });
 
-	const { filteredRules, isFetching, isError, allRules, refetch } =
-		useAlertRulesData(orderBy, debouncedSearch, filterValues ?? []);
+	const railCollapsed = useAlertRuleViewsStore((s) => s.railCollapsed);
+	const setRailCollapsed = useAlertRuleViewsStore((s) => s.setRailCollapsed);
+	const toggleRail = useCallback((): void => {
+		setRailCollapsed(!railCollapsed);
+	}, [setRailCollapsed, railCollapsed]);
+
+	const listParams = useMemo(
+		() => ({
+			query: filter.query || undefined,
+			states: filter.states.length ? filter.states : undefined,
+			sort: filter.sort,
+			order: filter.order,
+			limit,
+			offset: (page - 1) * limit,
+		}),
+		[filter, limit, page],
+	);
+
+	const {
+		rules,
+		total,
+		labels,
+		reservedKeywords,
+		isFetching,
+		isError,
+		queryError,
+		refetch,
+	} = useAlertRulesData(listParams);
+
+	const { creatorOptions, source } = useAlertRulesFilterSource({
+		rules,
+		labels,
+		reservedKeywords,
+		userEmail: user.email,
+	});
 
 	const { handleEdit, handleNewAlert, handleRowClick, handleRowClickNewTab } =
-		useAlertRulesHandlers(allRules.length);
+		useAlertRulesHandlers(total);
 
+	const { selectView } = ruleViews;
 	const handleClearFilters = useCallback((): void => {
-		void setFilterValues(null);
-		clearSearch();
-	}, [setFilterValues, clearSearch]);
+		selectView(DEFAULT_RULE_VIEW);
+	}, [selectView]);
 
 	const columns = useMemo(
 		() => getAlertRuleColumns(formatTimezoneAdjustedTimestamp),
 		[formatTimezoneAdjustedTimestamp],
 	);
 
-	const paginatedRules = useMemo(() => {
-		const start = (page - 1) * limit;
-		return filteredRules.slice(start, start + limit);
-	}, [filteredRules, page, limit]);
-
 	useAlertRulesStripInfo({
-		shownCount: paginatedRules.length,
-		totalCount: filteredRules.length,
+		shownCount: rules.length,
+		totalCount: total,
 	});
 
 	const columnsWithActions = useMemo(() => {
@@ -120,93 +146,113 @@ function ListAlertRules(): JSX.Element {
 		];
 	}, [action, columns, handleEdit]);
 
-	const hasActiveFilters =
-		searchText.length > 0 || (filterValues ?? []).length > 0;
+	const hasActiveFilters = filter.query.length > 0 || filter.states.length > 0;
 	const isEmptyDueToFilters =
-		!isFetching &&
-		filteredRules.length === 0 &&
-		hasActiveFilters &&
-		allRules.length > 0;
-	const isEmptyNoRules = !isFetching && !isError && allRules.length === 0;
+		!isFetching && total === 0 && (hasActiveFilters || !!queryError);
+	const isEmptyNoRules =
+		!isFetching && !isError && !queryError && !hasActiveFilters && total === 0;
+
+	const activeLabel =
+		ruleViews.activeView?.name ??
+		RULE_BUILTIN_VIEWS.find((v) => v.id === ruleViews.activeViewId)?.label ??
+		'Alert rules';
 
 	return (
-		<div className={styles.container}>
-			{!isEmptyNoRules && (
-				<div className={styles.header}>
-					<div className={styles.refreshRow}>
-						<ColumnSelector
-							columns={columns}
-							storageKey="alert-rules-columns"
-							testId="alert-columns-button"
+		<div className={styles.layout}>
+			<ViewsRail
+				activeViewId={ruleViews.activeViewId}
+				builtinViews={RULE_BUILTIN_VIEWS}
+				customViews={ruleViews.customViews}
+				customViewsLoading={ruleViews.customViewsLoading}
+				isCustomActive={ruleViews.isCustomActive}
+				isModified={ruleViews.isModified}
+				collapsed={railCollapsed}
+				onSelect={ruleViews.selectView}
+				onSave={ruleViews.saveView}
+				onSaveChanges={ruleViews.saveActiveView}
+				onReset={ruleViews.resetView}
+				onDelete={ruleViews.removeView}
+				onRename={ruleViews.renameView}
+				testIdPrefix="alert-rules"
+				saveTestIdPrefix="save-alert-rule-view"
+				renameTestIdPrefix="rename-alert-rule-view"
+				deleteDescription="Views are shared across your organization, so this removes it for everyone. Alert rules are not affected."
+			/>
+			<div className={styles.main}>
+				{!isEmptyNoRules && (
+					<div className={styles.headerZone}>
+						<ListCommandHeader
+							label={activeLabel}
+							count={total}
+							isModified={ruleViews.isModified}
+							testIdPrefix="alert-rules"
+							action={
+								<AlertRulesHeaderActions
+									columns={columns}
+									canAddAlert={addNewAlert}
+									onNewAlert={handleNewAlert}
+								/>
+							}
 						/>
-						{addNewAlert && (
-							<Button
-								variant="solid"
-								size="sm"
-								prefix={<Plus size={14} />}
-								onClick={handleNewAlert}
-								color="primary"
-								testId="list-alerts-new-alert-button"
-							>
-								New Alert
-							</Button>
-						)}
-						<TextToolTip
-							text="More details on how to create alerts"
-							url="https://signoz.io/docs/alerts/?utm_source=product&utm_medium=list-alerts"
-							urlText="Learn More"
+						<AlertRulesFilterZone
+							query={filter.query}
+							states={filter.states}
+							creatorOptions={creatorOptions}
+							source={source}
+							error={queryError}
+							onQueryChange={submitQuery}
+							onStatesChange={changeStates}
 						/>
 					</div>
-				</div>
-			)}
-
-			{!isEmptyNoRules && (
-				<div className={styles.filtersRow}>
-					<Input
-						className={styles.searchInput}
-						placeholder="Search by Alert Name, Severity and Labels"
-						value={searchText}
-						onChange={handleSearchChange}
-						suffix={<Search size={14} className={styles.searchIcon} />}
-						testId="list-alerts-search-input"
-					/>
-				</div>
-			)}
-
-			<div ref={containerRef} className={styles.tableContainer}>
-				{isError ? (
-					<ErrorEmptyState title="Failed to load alert rules" onRefresh={refetch} />
-				) : isEmptyDueToFilters ? (
-					<NoResultsEmptyState
-						title="No matching alert rules"
-						subtitle="No alert rules match your search. Try adjusting your search criteria."
-						onClear={handleClearFilters}
-						clearButtonText="Clear Search"
-					/>
-				) : isEmptyNoRules ? (
-					<AlertsEmptyState onRefresh={refetch} />
-				) : (
-					<TanStackTable<AlertRule>
-						data={paginatedRules}
-						columns={columnsWithActions}
-						isLoading={isFetching}
-						getRowKey={(row): string => row.id ?? ''}
-						getItemKey={(row): string => row.id ?? ''}
-						columnStorageKey="alert-rules-columns"
-						enableQueryParams={QUERY_PARAMS_CONFIG}
-						onRowClick={handleRowClick}
-						onRowClickNewTab={handleRowClickNewTab}
-						pagination={{
-							total: filteredRules.length,
-							calculatedPageSize,
-							onLimitChange: setLimit,
-							showTotalCount: true,
-						}}
-						paginationClassname={styles.paginationContainer}
-						enableAlternatingRowColors
-						plainTextCellLineClamp={2}
-					/>
 				)}
+
+				<div ref={containerRef} className={styles.tableContainer}>
+					{isError ? (
+						<ErrorEmptyState title="Failed to load alert rules" onRefresh={refetch} />
+					) : isEmptyDueToFilters ? (
+						<NoResultsEmptyState
+							title="No matching alert rules"
+							subtitle={
+								queryError
+									? 'The filter query is invalid. Fix it or clear the search.'
+									: 'No alert rules match your search. Try adjusting your search criteria.'
+							}
+							onClear={handleClearFilters}
+							clearButtonText="Clear Search"
+						/>
+					) : isEmptyNoRules ? (
+						<AlertsEmptyState onRefresh={refetch} />
+					) : (
+						<TanStackTable<AlertRule>
+							data={rules}
+							columns={columnsWithActions}
+							isLoading={isFetching}
+							getRowKey={(row): string => row.id ?? ''}
+							getItemKey={(row): string => row.id ?? ''}
+							columnStorageKey="alert-rules-columns"
+							enableQueryParams={QUERY_PARAMS_CONFIG}
+							onRowClick={handleRowClick}
+							onRowClickNewTab={handleRowClickNewTab}
+							pagination={{
+								total,
+								calculatedPageSize,
+								onLimitChange: setLimit,
+								showTotalCount: true,
+							}}
+							paginationClassname={styles.paginationContainer}
+							enableAlternatingRowColors
+							plainTextCellLineClamp={2}
+						/>
+					)}
+				</div>
+				<ListStatusBar
+					collapsed={railCollapsed}
+					onToggleCollapse={toggleRail}
+					count={rules.length}
+					total={total}
+					noun="alert rules"
+					testId="alert-rules-rail-toggle"
+				/>
 			</div>
 		</div>
 	);

frontend/src/container/ListAlertRules/list.config.ts

@@ -0,0 +1,97 @@
+import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
+import { BellOff, Flame, Layers, User } from '@signozhq/icons';
+import { clause } from 'components/ListFilter/dsl/filterQuery';
+import type {
+	ClauseBuilder,
+	DslGrammar,
+} from 'components/ListFilter/dsl/types';
+import type { BuiltinViewConfig } from 'components/ListViews/types';
+
+import type { RuleListFilter, RuleViewCtx } from './types';
+
+// Mirrors pkg/types/ruletypes/list_filter.go. Label keys go under `labels.`.
+export const RULES_DSL_GRAMMAR = {
+	fields: [
+		{ key: 'name', type: 'string' },
+		// Aliases labels.severity, so it takes the label operators.
+		{ key: 'severity', type: 'dynamic' },
+		{
+			key: 'alert_type',
+			type: 'enum',
+			values: [
+				'METRIC_BASED_ALERT',
+				'LOGS_BASED_ALERT',
+				'TRACES_BASED_ALERT',
+				'EXCEPTIONS_BASED_ALERT',
+				'AI_TRACES_BASED_ALERT',
+			],
+		},
+		{
+			key: 'rule_type',
+			type: 'enum',
+			values: ['threshold_rule', 'promql_rule', 'anomaly_rule'],
+		},
+		{ key: 'created_by', type: 'string' },
+		{ key: 'updated_by', type: 'string' },
+		{ key: 'created_at', type: 'timestamp' },
+		{ key: 'updated_at', type: 'timestamp' },
+	],
+	dynamicKey: { detail: 'label', prefix: 'labels.' },
+	hiddenKeys: ['labels.<key>'],
+} as const satisfies DslGrammar;
+
+const where: ClauseBuilder<
+	(typeof RULES_DSL_GRAMMAR)['fields'][number]['key']
+> = clause;
+
+type RuleViewConfig = BuiltinViewConfig<RuleListFilter, RuleViewCtx>;
+
+// Built-in views replace query and states; the current sort/order is kept.
+const views = [
+	{
+		id: 'mine',
+		label: 'My alert rules',
+		icon: User,
+		section: 'personal',
+		filter: (current, { userEmail }): RuleListFilter => ({
+			...current,
+			query: userEmail ? where('created_by', '=', userEmail) : '',
+			states: [],
+		}),
+	},
+	{
+		id: 'all',
+		label: 'All alert rules',
+		icon: Layers,
+		section: 'system',
+		filter: (current): RuleListFilter => ({ ...current, query: '', states: [] }),
+	},
+	{
+		id: 'firing',
+		label: 'Firing',
+		icon: Flame,
+		section: 'system',
+		filter: (current): RuleListFilter => ({
+			...current,
+			query: '',
+			states: [RuletypesAlertStateDTO.firing],
+		}),
+	},
+	{
+		id: 'disabled',
+		label: 'Disabled',
+		icon: BellOff,
+		section: 'system',
+		filter: (current): RuleListFilter => ({
+			...current,
+			query: '',
+			states: [RuletypesAlertStateDTO.disabled],
+		}),
+	},
+] as const satisfies readonly RuleViewConfig[];
+
+export type RuleViewId = (typeof views)[number]['id'];
+
+export const RULE_BUILTIN_VIEWS: readonly RuleViewConfig[] = views;
+
+export const DEFAULT_RULE_VIEW: RuleViewId = 'all';

frontend/src/container/ListAlertRules/types.ts

@@ -1,3 +1,22 @@
-import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	RuletypesListableRuleDTO,
+	RuletypesListOrderDTO,
+	RuletypesListSortDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type { SavedListView } from 'components/ListViews/types';
 
-export type AlertRule = RuletypesRuleDTO;
+export type AlertRule = RuletypesListableRuleDTO;
+
+// The v3 list filter a saved view snapshots; pagination is deliberately excluded.
+export interface RuleListFilter {
+	query: string;
+	states: string[];
+	sort: RuletypesListSortDTO;
+	order: RuletypesListOrderDTO;
+}
+
+export type RuleView = SavedListView<RuleListFilter>;
+
+export interface RuleViewCtx {
+	userEmail: string;
+}

frontend/src/container/ListAlertRules/useAlertRuleViews.ts

@@ -0,0 +1,75 @@
+import { useEffect, useRef } from 'react';
+import { useQueryState } from 'nuqs';
+import type { UseListViewsResult } from 'hooks/listViews/types';
+import { useListViews } from 'hooks/listViews/useListViews';
+
+import { ALERT_RULES_PARAMS } from './hooks';
+import { DEFAULT_RULE_VIEW, RULE_BUILTIN_VIEWS } from './list.config';
+import type { RuleListFilter, RuleViewCtx } from './types';
+import { useRuleViewCtx } from './useRuleViewCtx';
+import { useRuleViews } from './useRuleViews';
+import { isDefaultRuleListFilter, isSameRuleListFilter } from './utils';
+
+interface UseAlertRuleViewsArgs {
+	filter: RuleListFilter;
+	applyFilter: (next: RuleListFilter) => void;
+}
+
+export interface UseAlertRuleViewsResult extends UseListViewsResult<RuleListFilter> {
+	customViewsLoading: boolean;
+}
+
+// A link carrying only `view=<custom id>` gets that view's filter applied once
+// the views load; a link carrying its own filter params keeps them. Clearing a
+// custom view's filter writes an empty `query=` so a reload keeps it cleared.
+export function useAlertRuleViews({
+	filter,
+	applyFilter,
+}: UseAlertRuleViewsArgs): UseAlertRuleViewsResult {
+	const api = useRuleViews();
+
+	const ctx = useRuleViewCtx();
+
+	const views = useListViews<RuleListFilter, RuleViewCtx>({
+		filter,
+		applyFilter,
+		isEqual: isSameRuleListFilter,
+		builtinViews: RULE_BUILTIN_VIEWS,
+		ctx,
+		defaultViewId: DEFAULT_RULE_VIEW,
+		api,
+		urlParam: ALERT_RULES_PARAMS.VIEW,
+	});
+
+	const { activeView } = views;
+	const [rawQuery, setRawQuery] = useQueryState(ALERT_RULES_PARAMS.QUERY);
+	const startedFromViewLink = useRef(
+		isDefaultRuleListFilter(filter) && rawQuery === null,
+	);
+	const hasResolvedLinkedView = useRef(false);
+
+	// Declared before the restore so it skips the render that applies a linked view.
+	const clearedCustomView =
+		!!activeView && rawQuery === null && isDefaultRuleListFilter(filter);
+	useEffect(() => {
+		if (hasResolvedLinkedView.current && clearedCustomView) {
+			void setRawQuery('', { clearOnDefault: false, history: 'replace' });
+		}
+	}, [clearedCustomView, setRawQuery]);
+
+	useEffect(() => {
+		if (hasResolvedLinkedView.current || api.isLoading) {
+			return;
+		}
+		hasResolvedLinkedView.current = true;
+		if (
+			activeView &&
+			startedFromViewLink.current &&
+			isDefaultRuleListFilter(filter)
+		) {
+			applyFilter(activeView.filter);
+		}
+	}, [api.isLoading, activeView, applyFilter, filter]);
+
+	return { ...views, customViewsLoading: api.isLoading };
+}

frontend/src/container/ListAlertRules/useAlertRuleViewsStore.ts

@@ -0,0 +1,20 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+interface AlertRuleViewsState {
+	railCollapsed: boolean;
+	setRailCollapsed: (collapsed: boolean) => void;
+}
+
+export const useAlertRuleViewsStore = create<AlertRuleViewsState>()(
+	persist(
+		(set) => ({
+			railCollapsed: false,
+			setRailCollapsed: (collapsed): void => {
+				set({ railCollapsed: collapsed });
+			},
+		}),
+		{ name: LOCALSTORAGE.ALERT_RULES_LIST_VIEWS },
+	),
+);

frontend/src/container/ListAlertRules/useAlertRulesData.ts

@@ -1,55 +1,79 @@
 import { useEffect, useMemo, useRef } from 'react';
 import logEvent from 'api/common/logEvent';
-import { useListRules } from 'api/generated/services/rules';
-import { searchByLabels } from 'components/Alerts/utils';
-import type { SortState } from 'components/TanStackTableView/types';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useListRulesV3 } from 'api/generated/services/rules';
+import type {
+	ListRulesV3Params,
+	RenderErrorResponseDTO,
+	RuletypesLabelPairDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type { AxiosError } from 'axios';
 import { isUndefined } from 'lodash-es';
 
 import type { AlertRule } from './types';
-import { filterRulesByFilters, sortRules } from './utils';
+import { RULE_LIST_INVALID_ERROR_CODES } from './utils';
 
 interface UseAlertRulesDataReturn {
-	allRules: AlertRule[];
-	filteredRules: AlertRule[];
+	rules: AlertRule[];
+	total: number;
+	/** Label pairs across the org's rules, for DSL autocomplete. */
+	labels: RuletypesLabelPairDTO[];
+	reservedKeywords: string[] | undefined;
 	isFetching: boolean;
+	/** A failure other than an invalid filter query. */
 	isError: boolean;
+	/** The backend's message when the filter query is invalid. */
+	queryError: string | null;
 	refetch: () => void;
 }
 
 export function useAlertRulesData(
-	orderBy: SortState | null,
-	searchText = '',
-	filters: string[] = [],
+	params: ListRulesV3Params,
 ): UseAlertRulesDataReturn {
 	const hasLoggedEvent = useRef(false);
 
-	const rulesResponse = useListRules();
+	const rulesResponse = useListRulesV3(params, {
+		query: { keepPreviousData: true },
+	});
 
-	const allRules = useMemo(
-		() => rulesResponse.data?.data ?? [],
+	const rules = useMemo(
+		() => rulesResponse.data?.data.rules ?? [],
+		[rulesResponse.data],
+	);
+	const total = rulesResponse.data?.data.total ?? 0;
+	const labels = useMemo(
+		() => rulesResponse.data?.data.labels ?? [],
 		[rulesResponse.data],
 	);
 
 	useEffect(() => {
 		if (!hasLoggedEvent.current && !isUndefined(rulesResponse.data?.data)) {
 			void logEvent('Alert: List page visited', {
-				number: allRules.length,
+				number: total,
 			});
 			hasLoggedEvent.current = true;
 		}
-	}, [rulesResponse.data, allRules.length]);
+	}, [rulesResponse.data, total]);
 
-	const filteredRules = useMemo(() => {
-		const filtered = filterRulesByFilters(allRules, filters);
-		const searched = searchByLabels(filtered, searchText, (r) => r.alert ?? '');
-		return sortRules(searched, orderBy);
-	}, [allRules, filters, searchText, orderBy]);
+	const apiError = useMemo(
+		() =>
+			convertToApiError(
+				rulesResponse.error as AxiosError<RenderErrorResponseDTO> | null,
+			),
+		[rulesResponse.error],
+	);
+	const errorCode = apiError?.getErrorCode();
+	const isQueryError =
+		!!errorCode && RULE_LIST_INVALID_ERROR_CODES.includes(errorCode);
 
 	return {
-		allRules,
-		filteredRules,
+		rules: isQueryError ? [] : rules,
+		total: isQueryError ? 0 : total,
+		labels,
+		reservedKeywords: rulesResponse.data?.data.reservedKeywords,
 		isFetching: rulesResponse.isFetching,
-		isError: rulesResponse.isError,
+		isError: rulesResponse.isError && !isQueryError,
+		queryError: isQueryError ? (apiError?.getErrorMessage() ?? null) : null,
 		refetch: rulesResponse.refetch,
 	};
 }

frontend/src/container/ListAlertRules/useAlertRulesFilterSource.ts

@@ -0,0 +1,57 @@
+import { useMemo } from 'react';
+import type { RuletypesLabelPairDTO } from 'api/generated/services/sigNoz.schemas';
+import type { SuggestionSource } from 'components/ListFilter/dsl/types';
+import type { CreatorOption } from 'components/ListFilter/types';
+import { useCreatorOptions } from 'components/ListFilter/useCreatorOptions';
+
+import type { AlertRule } from './types';
+
+const LABEL_PREFIX = 'labels.';
+
+interface UseAlertRulesFilterSourceArgs {
+	rules: AlertRule[];
+	labels: RuletypesLabelPairDTO[];
+	reservedKeywords: string[] | undefined;
+	userEmail: string;
+}
+
+interface UseAlertRulesFilterSourceResult {
+	creatorOptions: CreatorOption[];
+	source: SuggestionSource;
+}
+
+export function useAlertRulesFilterSource({
+	rules,
+	labels,
+	reservedKeywords,
+	userEmail,
+}: UseAlertRulesFilterSourceArgs): UseAlertRulesFilterSourceResult {
+	const pageAuthorEmails = useMemo<string[]>(
+		() =>
+			rules.map((r) => r.createdBy).filter((email): email is string => !!email),
+		[rules],
+	);
+	const creatorOptions = useCreatorOptions({
+		currentUserEmail: userEmail,
+		fallbackEmails: pageAuthorEmails,
+	});
+
+	const source = useMemo<SuggestionSource>(() => {
+		const dynamicKeys = new Set<string>();
+		const valuesByKey: Record<string, string[]> = {};
+		labels.forEach(({ key, value }) => {
+			const fullKey = `${LABEL_PREFIX}${key}`;
+			dynamicKeys.add(fullKey);
+			(valuesByKey[fullKey.toLowerCase()] ??= []).push(value);
+		});
+		return {
+			reservedKeys: reservedKeywords,
+			dynamicKeys: Array.from(dynamicKeys),
+			valuesByKey,
+			creatorEmails: creatorOptions.map((o) => o.email),
+			currentUserEmail: userEmail,
+		};
+	}, [labels, reservedKeywords, creatorOptions, userEmail]);
+
+	return { creatorOptions, source };
+}

frontend/src/container/ListAlertRules/useAlertRulesHandlers.ts

@@ -2,18 +2,18 @@ import { useCallback } from 'react';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import { sanitizeDefaultAlertQuery } from 'container/EditAlertV2/utils';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useTableRowClick } from 'hooks/useTableRowClick';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
-import { toCompositeMetricQuery } from 'types/api/alerts/convert';
 import { isModifierKeyPressed } from 'utils/app';
 
 import type { AlertRule } from './types';
 
 interface UseAlertRulesHandlersReturn {
-	handleEdit: (rule: AlertRule, options?: { newTab?: boolean }) => void;
+	handleEdit: (
+		rule: Pick<AlertRule, 'id'>,
+		options?: { newTab?: boolean },
+	) => void;
 	handleNewAlert: (e: React.MouseEvent) => void;
 	handleRowClick: (rule: AlertRule) => void;
 	handleRowClickNewTab: (rule: AlertRule) => void;
@@ -26,30 +26,16 @@ export function useAlertRulesHandlers(
 	const params = useUrlQuery();
 
 	const getEditUrl = useCallback(
-		(rule: AlertRule): string => {
-			const compositeQuery = sanitizeDefaultAlertQuery(
-				mapQueryDataFromApi(toCompositeMetricQuery(rule.condition.compositeQuery)),
-				rule.alertType,
-			);
-			params.set(
-				QueryParams.compositeQuery,
-				encodeURIComponent(JSON.stringify(compositeQuery)),
-			);
-
-			const panelType = rule.condition.compositeQuery.panelType;
-			if (panelType) {
-				params.set(QueryParams.panelTypes, panelType);
-			}
-
-			params.set(QueryParams.ruleId, rule.id);
-
-			return `${ROUTES.ALERT_OVERVIEW}?${params.toString()}`;
+		(rule: Pick<AlertRule, 'id'>): string => {
+			const editParams = new URLSearchParams(params);
+			editParams.set(QueryParams.ruleId, rule.id);
+			return `${ROUTES.ALERT_OVERVIEW}?${editParams.toString()}`;
 		},
 		[params],
 	);
 
 	const handleEdit = useCallback(
-		(rule: AlertRule, options?: { newTab?: boolean }): void => {
+		(rule: Pick<AlertRule, 'id'>, options?: { newTab?: boolean }): void => {
 			safeNavigate(getEditUrl(rule), options);
 		},
 		[getEditUrl, safeNavigate],

frontend/src/container/ListAlertRules/useAlertRulesListFilter.ts

@@ -0,0 +1,62 @@
+import { useCallback, useMemo } from 'react';
+import type { SortState } from 'components/TanStackTableView/types';
+
+import { useAlertRulesQuery, useAlertRulesStates } from './hooks';
+import type { RuleListFilter } from './types';
+import { toListSort, toOrderBy } from './utils';
+
+interface UseAlertRulesListFilterArgs {
+	orderBy: SortState | null;
+	setOrderBy: (orderBy: SortState | null) => void;
+	setPage: (page: number) => void;
+}
+
+interface UseAlertRulesListFilterResult {
+	filter: RuleListFilter;
+	applyFilter: (filter: RuleListFilter) => void;
+	submitQuery: (query: string) => void;
+	changeStates: (states: string[]) => void;
+}
+
+// The v3 list filter, read from and written to the URL. Every change goes back to page 1.
+export function useAlertRulesListFilter({
+	orderBy,
+	setOrderBy,
+	setPage,
+}: UseAlertRulesListFilterArgs): UseAlertRulesListFilterResult {
+	const [query, setQuery] = useAlertRulesQuery();
+	const [states, setStates] = useAlertRulesStates();
+
+	const filter = useMemo<RuleListFilter>(
+		() => ({ query, states, ...toListSort(orderBy) }),
+		[query, states, orderBy],
+	);
+
+	const applyFilter = useCallback(
+		(next: RuleListFilter): void => {
+			void setQuery(next.query || null);
+			void setStates(next.states.length ? next.states : null);
+			setOrderBy(toOrderBy(next.sort, next.order));
+			setPage(1);
+		},
+		[setQuery, setStates, setOrderBy, setPage],
+	);
+
+	const submitQuery = useCallback(
+		(next: string): void => {
+			void setQuery(next || null);
+			setPage(1);
+		},
+		[setQuery, setPage],
+	);
+
+	const changeStates = useCallback(
+		(next: string[]): void => {
+			void setStates(next.length ? next : null);
+			setPage(1);
+		},
+		[setStates, setPage],
+	);
+
+	return { filter, applyFilter, submitQuery, changeStates };
+}

frontend/src/container/ListAlertRules/useRuleViewCtx.ts

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+import { useAppContext } from 'providers/App/App';
+
+import type { RuleViewCtx } from './types';
+
+export function useRuleViewCtx(): RuleViewCtx {
+	const { user } = useAppContext();
+	return useMemo(() => ({ userEmail: user.email }), [user.email]);
+}

frontend/src/container/ListAlertRules/useRuleViews.ts

@@ -0,0 +1,143 @@
+import { useCallback, useMemo } from 'react';
+import { useQueryClient } from 'react-query';
+import { toast } from '@signozhq/ui/sonner';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import {
+	getListRuleViewsQueryKey,
+	invalidateListRuleViews,
+	useCreateRuleView,
+	useDeleteRuleView,
+	useListRuleViews,
+	useUpdateRuleView,
+} from 'api/generated/services/rules';
+import type {
+	ListRuleViews200,
+	RenderErrorResponseDTO,
+	RuletypesPostableRuleViewDTO,
+	RuletypesRuleViewDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type { AxiosError } from 'axios';
+import type { SavedListViewsApi } from 'components/ListViews/types';
+
+import type { RuleListFilter, RuleView } from './types';
+import { DEFAULT_RULE_LIST_ORDER, DEFAULT_RULE_LIST_SORT } from './utils';
+
+// Schema version stamped on the view's data envelope (the backend requires it).
+const VIEW_DATA_VERSION = 'v1';
+
+const toRuleView = (dto: RuletypesRuleViewDTO): RuleView => ({
+	id: dto.id,
+	name: dto.name,
+	filter: {
+		query: dto.data.query ?? '',
+		states: dto.data.states ?? [],
+		sort: dto.data.sort ?? DEFAULT_RULE_LIST_SORT,
+		order: dto.data.order ?? DEFAULT_RULE_LIST_ORDER,
+	},
+});
+
+const toPostable = (
+	name: string,
+	filter: RuleListFilter,
+): RuletypesPostableRuleViewDTO => ({
+	name: name.trim(),
+	data: {
+		version: VIEW_DATA_VERSION,
+		query: filter.query.trim(),
+		states: filter.states,
+		sort: filter.sort,
+		order: filter.order,
+	},
+});
+
+const toastApiError =
+	(fallback: string) =>
+	(error: unknown): void => {
+		const apiError = convertToApiError(
+			error as AxiosError<RenderErrorResponseDTO>,
+		);
+		toast.error(apiError?.getErrorMessage() || fallback);
+	};
+
+/** Org-shared saved views for the alert rules list, backed by the rule views API. */
+export function useRuleViews(): SavedListViewsApi<RuleListFilter> {
+	const queryClient = useQueryClient();
+	const { data, isLoading } = useListRuleViews();
+
+	const views = useMemo<RuleView[]>(
+		() => (data?.data?.views ?? []).map(toRuleView),
+		[data],
+	);
+
+	const invalidate = useCallback((): void => {
+		void invalidateListRuleViews(queryClient);
+	}, [queryClient]);
+
+	const createMutation = useCreateRuleView({
+		mutation: {
+			onSuccess: invalidate,
+			onError: toastApiError('Failed to save view.'),
+		},
+	});
+	// Update returns the full view, so patch it into the cached list instead of refetching.
+	const updateMutation = useUpdateRuleView({
+		mutation: {
+			onSuccess: (response): void => {
+				const updated = response?.data;
+				const key = getListRuleViewsQueryKey();
+				const prev = queryClient.getQueryData<ListRuleViews200>(key);
+				if (!updated || !prev) {
+					return;
+				}
+				queryClient.setQueryData<ListRuleViews200>(key, {
+					...prev,
+					data: {
+						...prev.data,
+						views: (prev.data.views ?? []).map((v) =>
+							v.id === updated.id ? updated : v,
+						),
+					},
+				});
+			},
+			onError: toastApiError('Failed to update view.'),
+		},
+	});
+	const deleteMutation = useDeleteRuleView({
+		mutation: {
+			onSuccess: invalidate,
+			onError: toastApiError('Failed to delete view.'),
+		},
+	});
+
+	const createView = useCallback(
+		async (name: string, filter: RuleListFilter): Promise<RuleView | null> => {
+			try {
+				const res = await createMutation.mutateAsync({
+					data: toPostable(name, filter),
+				});
+				return res?.data ? toRuleView(res.data) : null;
+			} catch {
+				return null;
+			}
+		},
+		[createMutation],
+	);
+
+	const updateView = useCallback(
+		(id: string, name: string, filter: RuleListFilter): void => {
+			updateMutation.mutate({
+				pathParams: { id },
+				data: toPostable(name, filter),
+			});
+		},
+		[updateMutation],
+	);
+
+	const deleteView = useCallback(
+		(id: string): Promise<void> =>
+			deleteMutation.mutateAsync({ pathParams: { id } }).then(() => undefined),
+		[deleteMutation],
+	);
+
+	return { views, isLoading, createView, updateView, deleteView };
+}

frontend/src/container/ListAlertRules/utils.ts

@@ -1,10 +1,12 @@
 import logEvent from 'api/common/logEvent';
-import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
-import { sortByColumn } from 'components/Alerts/utils';
+import {
+	RuletypesListOrderDTO,
+	RuletypesListSortDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import type { SortState } from 'components/TanStackTableView/types';
 import { dataSourceForAlertType } from 'constants/alerts';
 
-import type { AlertRule } from './types';
+import type { AlertRule, RuleListFilter } from './types';
 
 export const ALERT_RULES_REFRESH_INTERVAL = 30_000;
 
@@ -24,7 +26,7 @@ const ACTION_LABELS: Record<string, string> = {
 
 export const alertActionLogEvent = (
 	action: string,
-	record: RuletypesRuleDTO,
+	record: AlertRule,
 ): void => {
 	const actionValue = ACTION_LABELS[action] ?? action;
 	void logEvent('Alert: Action', {
@@ -35,58 +37,75 @@ export const alertActionLogEvent = (
 	});
 };
 
-export function getAlertSortValue(
-	rule: AlertRule,
-	columnName: string,
-): string | number {
-	switch (columnName) {
-		case 'state':
-			return rule.state ?? '';
-		case 'name':
-			return rule.alert ?? '';
-		case 'severity':
-			return rule.labels?.severity ?? '';
-		case 'createdAt':
-			return rule.createdAt ? new Date(rule.createdAt).getTime() : 0;
-		case 'updatedAt':
-			return rule.updatedAt ? new Date(rule.updatedAt).getTime() : 0;
-		default:
-			return '';
-	}
-}
+const COLUMN_TO_SORT: Record<string, RuletypesListSortDTO> = {
+	state: RuletypesListSortDTO.state,
+	name: RuletypesListSortDTO.name,
+	severity: RuletypesListSortDTO.severity,
+	createdAt: RuletypesListSortDTO.created_at,
+	updatedAt: RuletypesListSortDTO.updated_at,
+};
 
-export function sortRules(
-	rules: AlertRule[],
+export const DEFAULT_RULE_LIST_SORT = RuletypesListSortDTO.updated_at;
+export const DEFAULT_RULE_LIST_ORDER = RuletypesListOrderDTO.desc;
+
+// `rule_list_filter_invalid`: DSL syntax / key / operator; `rule_list_invalid`: other list params.
+export const RULE_LIST_INVALID_ERROR_CODES: readonly string[] = [
+	'rule_list_filter_invalid',
+	'rule_list_invalid',
+];
+
+export function toListSort(
 	orderBy: SortState | null,
-): AlertRule[] {
-	return sortByColumn(rules, orderBy, getAlertSortValue);
-}
-
-export function filterRulesByFilters(
-	rules: AlertRule[],
-	filters: string[],
-): AlertRule[] {
-	if (filters.length === 0) {
-		return rules;
+): Pick<RuleListFilter, 'sort' | 'order'> {
+	const sort = orderBy ? COLUMN_TO_SORT[orderBy.columnName] : undefined;
+	if (!orderBy || !sort) {
+		return { sort: DEFAULT_RULE_LIST_SORT, order: DEFAULT_RULE_LIST_ORDER };
 	}
-
-	const stateFilters = filters
-		.filter((f) => f.startsWith('state:'))
-		.map((f) => f.replace('state:', '').toLowerCase());
-
-	const severityFilters = filters
-		.filter((f) => f.startsWith('severity:'))
-		.map((f) => f.replace('severity:', '').toLowerCase());
-
-	return rules.filter((rule) => {
-		const state = rule.state?.toLowerCase() ?? '';
-		const severity = rule.labels?.severity?.toLowerCase() ?? '';
-
-		const matchesState =
-			stateFilters.length === 0 || stateFilters.includes(state);
-		const matchesSeverity =
-			severityFilters.length === 0 || severityFilters.includes(severity);
-
-		return matchesState && matchesSeverity;
-	});
+	return {
+		sort,
+		order:
+			orderBy.order === 'asc'
+				? RuletypesListOrderDTO.asc
+				: RuletypesListOrderDTO.desc,
+	};
+}
+
+// The backend default sort maps to `null` so the table shows no sort indicator.
+export function toOrderBy(
+	sort: RuletypesListSortDTO,
+	order: RuletypesListOrderDTO,
+): SortState | null {
+	if (sort === DEFAULT_RULE_LIST_SORT && order === DEFAULT_RULE_LIST_ORDER) {
+		return null;
+	}
+	const columnName = Object.keys(COLUMN_TO_SORT).find(
+		(key) => COLUMN_TO_SORT[key] === sort,
+	);
+	return columnName
+		? { columnName, order: order === RuletypesListOrderDTO.asc ? 'asc' : 'desc' }
+		: null;
+}
+
+export function isSameRuleListFilter(
+	a: RuleListFilter,
+	b: RuleListFilter,
+): boolean {
+	return (
+		a.query.trim() === b.query.trim() &&
+		a.sort === b.sort &&
+		a.order === b.order &&
+		a.states.length === b.states.length &&
+		[...a.states].sort().join(',') === [...b.states].sort().join(',')
+	);
+}
+
+export const DEFAULT_RULE_LIST_FILTER: RuleListFilter = {
+	query: '',
+	states: [],
+	sort: DEFAULT_RULE_LIST_SORT,
+	order: DEFAULT_RULE_LIST_ORDER,
+};
+
+export function isDefaultRuleListFilter(filter: RuleListFilter): boolean {
+	return isSameRuleListFilter(filter, DEFAULT_RULE_LIST_FILTER);
 }

frontend/src/mocks-server/__mockdata__/alert_rules.ts

@@ -2,14 +2,18 @@ import {
 	RuletypesAlertStateDTO,
 	RuletypesAlertTypeDTO,
 	RuletypesEvaluationRollingDTOKind,
+	RuletypesListOrderDTO,
+	RuletypesListSortDTO,
 	RuletypesPanelTypeDTO,
 	RuletypesQueryTypeDTO,
 	RuletypesRuleDTOSchemaVersion,
 	RuletypesRuleTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type {
+	ListRulesV3200,
 	RuletypesRuleConditionDTO,
 	RuletypesRuleDTO,
+	RuletypesRuleViewDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
 const baseCondition: RuletypesRuleConditionDTO = {
@@ -91,3 +95,80 @@ export const alertRulesPaginationFixture: RuletypesRuleDTO[] = Array.from(
 			createdAt: `2023-10-${String(i + 1).padStart(2, '0')}T10:00:00Z`,
 		}),
 );
+
+const RULES_RESERVED_KEYWORDS = [
+	'name',
+	'severity',
+	'alert_type',
+	'rule_type',
+	'created_by',
+	'updated_by',
+	'created_at',
+	'updated_at',
+];
+
+const uniqueLabelPairs = (
+	rules: RuletypesRuleDTO[],
+): { key: string; value: string }[] => {
+	const seen = new Map<string, { key: string; value: string }>();
+	rules.forEach((r) =>
+		Object.entries(r.labels ?? {}).forEach(([key, value]) => {
+			seen.set(`${key}=${value}`, { key, value: String(value) });
+		}),
+	);
+	return [...seen.values()];
+};
+
+// Mirrors /api/v3/rules: filters by `states` and pages by `limit`/`offset`.
+// The `query` DSL is not evaluated; tests assert on the request instead.
+export const listRulesV3Response = (
+	rules: RuletypesRuleDTO[],
+	searchParams: URLSearchParams,
+): ListRulesV3200 => {
+	const states = searchParams.getAll('states');
+	const limit = Number(searchParams.get('limit') ?? rules.length);
+	const offset = Number(searchParams.get('offset') ?? 0);
+	const matching = states.length
+		? rules.filter((r) => states.includes(r.state))
+		: rules;
+	return {
+		status: 'success',
+		data: {
+			rules: matching.slice(offset, offset + limit),
+			total: matching.length,
+			labels: uniqueLabelPairs(rules),
+			reservedKeywords: RULES_RESERVED_KEYWORDS,
+		},
+	};
+};
+
+export const ruleViewsFixture: RuletypesRuleViewDTO[] = [
+	{
+		id: 'view-1',
+		name: 'Critical firing',
+		orgId: 'org-1',
+		createdAt: '2023-10-15T10:00:00Z',
+		updatedAt: '2023-10-19T10:00:00Z',
+		data: {
+			version: 'v1',
+			query: "severity = 'critical'",
+			states: [RuletypesAlertStateDTO.firing],
+			sort: RuletypesListSortDTO.name,
+			order: RuletypesListOrderDTO.asc,
+		},
+	},
+	{
+		id: 'view-2',
+		name: 'Infra team',
+		orgId: 'org-1',
+		createdAt: '2023-10-15T10:00:00Z',
+		updatedAt: '2023-10-18T10:00:00Z',
+		data: {
+			version: 'v1',
+			query: "team = 'infra'",
+			states: [],
+			sort: RuletypesListSortDTO.updated_at,
+			order: RuletypesListOrderDTO.desc,
+		},
+	},
+];

frontend/src/mocks-server/handlers.ts

@@ -6,7 +6,11 @@ import {
 	notificationChannelsV2,
 	notificationChannelV2,
 } from './__mockdata__/alerts';
-import { alertRulesFixture } from './__mockdata__/alert_rules';
+import {
+	alertRulesFixture,
+	listRulesV3Response,
+	ruleViewsFixture,
+} from './__mockdata__/alert_rules';
 import { triggeredAlertsFixture } from './__mockdata__/triggered_alerts';
 import { billingSuccessResponse } from './__mockdata__/billing';
 import {
@@ -228,6 +232,47 @@ export const handlers = [
 			ctx.json({ data: alertRulesFixture, status: 'success' }),
 		),
 	),
+	rest.get('http://localhost/api/v3/rules', (req, res, ctx) =>
+		res(
+			ctx.status(200),
+			ctx.json(listRulesV3Response(alertRulesFixture, req.url.searchParams)),
+		),
+	),
+	rest.get('http://localhost/api/v2/rule_views', (_, res, ctx) =>
+		res(
+			ctx.status(200),
+			ctx.json({ data: { views: ruleViewsFixture }, status: 'success' }),
+		),
+	),
+	rest.post('http://localhost/api/v2/rule_views', async (req, res, ctx) => {
+		const body = (await req.json()) as Pick<
+			(typeof ruleViewsFixture)[number],
+			'name' | 'data'
+		>;
+		return res(
+			ctx.status(201),
+			ctx.json({
+				data: { ...ruleViewsFixture[0], ...body, id: 'new-view-id' },
+				status: 'success',
+			}),
+		);
+	}),
+	rest.put('http://localhost/api/v2/rule_views/:id', async (req, res, ctx) => {
+		const body = (await req.json()) as Pick<
+			(typeof ruleViewsFixture)[number],
+			'name' | 'data'
+		>;
+		return res(
+			ctx.status(200),
+			ctx.json({
+				data: { ...ruleViewsFixture[0], ...body, id: req.params.id },
+				status: 'success',
+			}),
+		);
+	}),
+	rest.delete('http://localhost/api/v2/rule_views/:id', (_, res, ctx) =>
+		res(ctx.status(204)),
+	),
 	rest.post('http://localhost/api/v2/rules', async (req, res, ctx) => {
 		const body = (await req.json()) as { alert?: string };
 		return res(

frontend/src/pages/AlertList/AlertRules/stories/AlertRules.stories.mocks.tsx

@@ -6,9 +6,24 @@
 import { rest, type ResponseComposition, type RestContext } from 'msw';
 import { screen, userEvent, within } from 'storybook/test';
 
-import { choiceControl, countControl } from '@/storybook/controls/controls';
+import {
+	choiceControl,
+	countControl,
+	toggleControl,
+} from '@/storybook/controls/controls';
 import { defineStoryMocks } from '@/storybook/controls/defineStoryMocks';
+import { useAlertRuleViewsStore } from 'container/ListAlertRules/useAlertRuleViewsStore';
+import { DEFAULT_RULE_LIST_FILTER } from 'container/ListAlertRules/utils';
+import {
+	DEFAULT_RULE_VIEW,
+	RULE_BUILTIN_VIEWS,
+	type RuleViewId,
+} from 'container/ListAlertRules/list.config';
 
+import {
+	orgUsersResponse,
+	STORY_USER_EMAIL,
+} from '../../../DashboardsListPage/stories/__story_mockdata__/orgUsers';
 import {
 	alertRulesResponse,
 	RULE_MAX,
@@ -18,13 +33,60 @@ import {
 	type SeverityChoice,
 } from '../../stories/__story_mockdata__/alerts';
 import { AlertListTabs } from '../../types';
+import {
+	alertRulesPage,
+	INVALID_QUERY_CHOICES,
+	invalidRuleQueryError,
+	type InvalidQueryChoice,
+	RULE_VIEW_MAX,
+	ruleView,
+	ruleViewsResponse,
+} from './__story_mockdata__/ruleViews';
 
 const LIST = 'Alert rules · list';
 const ACTIONS = 'Alert rules · row actions';
+const VIEWS = 'Alert rules · saved views';
 
 const ACTION_STATES = ['success', 'loading', 'error'] as const;
 type ActionState = (typeof ACTION_STATES)[number];
 
+const VIEW_CHOICES = [
+	'all',
+	'mine',
+	'firing',
+	'disabled',
+	'saved',
+] as const satisfies readonly (RuleViewId | 'saved')[];
+type ViewChoice = (typeof VIEW_CHOICES)[number];
+
+/**
+ * The rail applies a view by writing `view` with its `query` and `states`, so a
+ * story that opens on one seeds all three or the rail shows unsaved changes.
+ */
+const listRoute = (view: ViewChoice): string => {
+	const params = new URLSearchParams({ tab: AlertListTabs.ALERT_RULES });
+	if (view === DEFAULT_RULE_VIEW) {
+		return `/alerts?${params.toString()}`;
+	}
+
+	const saved = ruleView(0);
+	const filter =
+		view === 'saved'
+			? { query: saved.data.query ?? '', states: saved.data.states ?? [] }
+			: RULE_BUILTIN_VIEWS.find((v) => v.id === view)?.filter(
+					DEFAULT_RULE_LIST_FILTER,
+					{ userEmail: STORY_USER_EMAIL },
+				);
+
+	params.set('view', view === 'saved' ? saved.id : view);
+	if (filter?.query) {
+		params.set('query', filter.query);
+	}
+	filter?.states.forEach((state) => params.append('states', state));
+
+	return `/alerts?${params.toString()}`;
+};
+
 const actionDescription = (call: string): string =>
 	`How the ${call} behind the row action answers. \`loading\` never answers and keeps the promise toast pending, \`error\` settles it with the failure.`;
 
@@ -70,6 +132,44 @@ export const alertRulesMocks = defineStoryMocks({
 			options: RULE_STATE_CHOICES,
 			value: 'mixed',
 		}),
+		invalidQuery: choiceControl<InvalidQueryChoice>('Invalid query', {
+			group: LIST,
+			description:
+				'The 400 code any request carrying a `query` answers with. Both show the server message under the search box.',
+			options: INVALID_QUERY_CHOICES,
+			value: 'off',
+		}),
+		view: choiceControl<ViewChoice>('Active view', {
+			group: VIEWS,
+			description:
+				'The rail entry the page opens on. `saved` is the first saved view; the built-ins apply a query or a state set.',
+			options: VIEW_CHOICES,
+			value: DEFAULT_RULE_VIEW,
+		}),
+		railCollapsed: toggleControl('Rail collapsed', {
+			group: VIEWS,
+			description:
+				'The rail collapsed from the status bar, as the browser remembers it.',
+			value: false,
+		}),
+		ruleViews: countControl('Saved views', {
+			group: VIEWS,
+			value: 3,
+			max: RULE_VIEW_MAX,
+		}),
+		ruleViewsState: choiceControl<ActionState>('Views list', {
+			group: VIEWS,
+			description:
+				'How the views list behind the rail answers, independent of the rule list.',
+			options: ACTION_STATES,
+			value: 'success',
+		}),
+		saveViewState: choiceControl<ActionState>('Save, rename or delete', {
+			group: VIEWS,
+			description: `${actionDescription('POST, PUT or DELETE')} The list does not change after a write: it answers with the Saved views count.`,
+			options: ACTION_STATES,
+			value: 'success',
+		}),
 		toggleState: choiceControl<ActionState>('Enable or disable', {
 			group: ACTIONS,
 			description: actionDescription('PATCH'),
@@ -90,16 +190,51 @@ export const alertRulesMocks = defineStoryMocks({
 		}),
 	},
 	handlers: (values, response) => [
+		rest.get('http://localhost/api/v3/rules', (req, res, ctx) =>
+			values.invalidQuery !== 'off' && req.url.searchParams.get('query')
+				? res(ctx.status(400), ctx.json(invalidRuleQueryError(values.invalidQuery)))
+				: response.json(() =>
+						alertRulesPage(
+							values.rules,
+							{ severity: values.ruleSeverity, state: values.ruleState },
+							req.url.searchParams,
+						),
+					)(req, res, ctx),
+		),
+
 		rest.get(
-			'http://localhost/api/v2/rules',
-			response.json(() =>
-				alertRulesResponse(values.rules, {
-					severity: values.ruleSeverity,
-					state: values.ruleState,
-				}),
+			'http://localhost/api/v2/users',
+			response.json(() => orgUsersResponse()),
+		),
+
+		rest.get('http://localhost/api/v2/rule_views', (_req, res, ctx) =>
+			actionResponse(values.ruleViewsState, res, ctx, () =>
+				ruleViewsResponse(values.ruleViews),
 			),
 		),
 
+		rest.post('http://localhost/api/v2/rule_views', async (req, res, ctx) => {
+			const body = (await req.json()) as object;
+			return actionResponse(values.saveViewState, res, ctx, () => ({
+				status: 'success',
+				data: { ...ruleView(values.ruleViews), ...body },
+			}));
+		}),
+
+		rest.put('http://localhost/api/v2/rule_views/:id', async (req, res, ctx) => {
+			const body = (await req.json()) as object;
+			return actionResponse(values.saveViewState, res, ctx, () => ({
+				status: 'success',
+				data: { ...ruleView(0), ...body, id: req.params.id },
+			}));
+		}),
+
+		rest.delete('http://localhost/api/v2/rule_views/:id', (_req, res, ctx) =>
+			values.saveViewState === 'success'
+				? res(ctx.status(204))
+				: actionResponse(values.saveViewState, res, ctx, () => null),
+		),
+
 		rest.patch('http://localhost/api/v2/rules/:id', (_req, res, ctx) =>
 			actionResponse(values.toggleState, res, ctx, () => ({
 				status: 'success',
@@ -124,7 +259,10 @@ export const alertRulesMocks = defineStoryMocks({
 			})),
 		),
 	],
-	config: () => ({ route: `/alerts?tab=${AlertListTabs.ALERT_RULES}` }),
+	config: (values) => ({ route: listRoute(values.view) }),
+	effect: (values) => {
+		useAlertRuleViewsStore.setState({ railCollapsed: values.railCollapsed });
+	},
 });
 
 /** The page fetches before it renders a row, which outlasts the 1s default. */

frontend/src/pages/AlertList/AlertRules/stories/AlertRules.stories.tsx

@@ -1,14 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
 
+import { alertRulesMocks } from './AlertRules.stories.mocks';
 import {
-	alertRulesMocks,
-	runRowAction,
-	untilLoaded,
-} from './AlertRules.stories.mocks';
+	cloneAlert,
+	copyLabel,
+	deleteAlert,
+	openColumnPicker,
+	openDeleteViewConfirm,
+	openDisabledRuleActions,
+	openQuerySuggestions,
+	openRenameViewPopover,
+	openRowActions,
+	openSaveViewPopover,
+	toggleAlert,
+} from './__story_mockdata__/alertRules.play';
 
 import AlertList from '../../index';
 import { RULE_MAX } from '../../stories/__story_mockdata__/alerts';
@@ -18,8 +26,10 @@ type AlertRulesArgs = PageStoryArgs<typeof alertRulesMocks>;
 const pageStory = storyMocks(alertRulesMocks, { layout: 'app' });
 
 /**
- * The rule list tab: every rule with its severity, state and channels. Creating
- * and editing follow the legacy editor role.
+ * The rule list tab: the views rail beside every rule with its severity, state
+ * and channels, filtered server-side by a DSL query, a state set and the table
+ * sort, which org-shared saved views capture and restore. Creating and editing
+ * follow the legacy editor role.
  *
  * Route: `/alerts?tab=AlertRules`.
  */
@@ -46,13 +56,84 @@ export const NoRules: Story = {
 	args: { rules: 0 },
 };
 
-/** Search: an unmatched query retains the filters and renders the no-results branch. */
-export const SearchNoResults: Story = {
+/** A state filter no rule is in: the filters stay and the no-results branch renders. */
+export const NoMatchingRules: Story = {
 	parameters: {
-		signoz: { route: '/alerts?tab=AlertRules&search=no-matching-alert-rule' },
+		signoz: { route: '/alerts?tab=AlertRules&states=recovering' },
 	},
 };
 
+/** The query the list was asked for does not parse: the server's message sits under the search box. */
+export const InvalidQuery: Story = {
+	args: { invalidQuery: 'rule_list_filter_invalid' },
+	parameters: {
+		allowConsoleErrors: true,
+		signoz: {
+			route: "/alerts?tab=AlertRules&query=name%20CONTAINS%20'prod'%20AND",
+		},
+	},
+};
+
+/**
+ * The query box's suggestions, opened: the rule fields first, then every
+ * `labels.<key>` the org's rules carry.
+ */
+export const QuerySuggestions: Story = {
+	play: openQuerySuggestions,
+};
+
+/** A workspace with no saved view yet, where the rail says how to make one. */
+export const NoSavedViews: Story = {
+	args: { ruleViews: 0 },
+};
+
+/** A shared link carrying only the view id: the view's query and states are applied once the views load. */
+export const ViewApplied: Story = {
+	parameters: {
+		signoz: { route: '/alerts?tab=AlertRules&view=view-1' },
+	},
+};
+
+/**
+ * The filters changed after the view was applied: the dirty dot on the rail
+ * entry and the header, and Save, Save as and Reset at the foot of the rail.
+ */
+export const ViewModified: Story = {
+	parameters: {
+		signoz: {
+			route:
+				'/alerts?tab=AlertRules&view=view-2&query=team%20%3D%20%27infra%27&states=firing',
+		},
+	},
+};
+
+/** Filters set with no saved view selected: the rail offers to save them as a new one. */
+export const UnsavedFilters: Story = {
+	parameters: {
+		signoz: { route: '/alerts?tab=AlertRules&states=firing' },
+	},
+};
+
+/** The rail folded away from the status bar, leaving the list the full width. */
+export const RailCollapsed: Story = {
+	args: { railCollapsed: true },
+};
+
+/** The popover that names the current filters as a new saved view. */
+export const SaveViewPopover: Story = {
+	play: openSaveViewPopover,
+};
+
+/** A saved view's rename popover, opened from its row. */
+export const RenameViewPopover: Story = {
+	play: openRenameViewPopover,
+};
+
+/** Deleting a saved view asks first, because every teammate loses it too. */
+export const DeleteViewConfirm: Story = {
+	play: openDeleteViewConfirm,
+};
+
 /** Data: the list remains mounted while its initial request is pending. */
 export const Loading: Story = {
 	args: { dataState: 'loading' },
@@ -84,45 +165,18 @@ export const Viewer: Story = {
 
 /** The per-rule actions: enable or disable, edit, clone and delete. */
 export const RowActions: Story = {
-	play: async ({ canvasElement }): Promise<void> => {
-		const [actions] = await within(canvasElement).findAllByTestId(
-			'alert-actions',
-			undefined,
-			untilLoaded,
-		);
-
-		await userEvent.click(actions);
-		await screen.findByText(/clone/i);
-	},
+	play: openRowActions,
 };
 
 /** Interaction: a disabled rule exposes Enable in its real row-action menu. */
 export const RowActionsDisabledRule: Story = {
 	args: { ruleState: 'disabled' },
-	play: async ({ canvasElement }): Promise<void> => {
-		const [actions] = await within(canvasElement).findAllByTestId(
-			'alert-actions',
-			undefined,
-			untilLoaded,
-		);
-
-		await userEvent.click(actions);
-		await screen.findByText(/^enable$/i);
-	},
+	play: openDisabledRuleActions,
 };
 
 /** The columns the table can show, including the audit ones it hides by default. */
 export const ColumnPicker: Story = {
-	play: async ({ canvasElement }): Promise<void> => {
-		await userEvent.click(
-			await within(canvasElement).findByTestId(
-				'alert-columns-button',
-				undefined,
-				untilLoaded,
-			),
-		);
-		await screen.findByText(/toggle columns/i);
-	},
+	play: openColumnPicker,
 };
 
 /**
@@ -148,92 +202,60 @@ export const BottomStripPaginated: Story = {
 
 /** Enable or Disable from the row menu: the promise toast, pending then settled. */
 export const ToggleAlertToast: Story = {
-	play: async ({ canvasElement, args }): Promise<void> => {
-		await runRowAction(canvasElement, /^(enable|disable)$/i);
-		if (args.toggleState === 'success') {
-			await waitFor(() =>
-				expect(screen.getByText(/alert (enabled|disabled)/i)).toBeVisible(),
-			);
-		}
-	},
+	play: toggleAlert,
 };
 
 /** The PATCH never answers: the "Enabling or Disabling alert..." toast stays pending. */
 export const ToggleAlertLoadingToast: Story = {
 	args: { toggleState: 'loading' },
-	play: ToggleAlertToast.play,
+	play: toggleAlert,
 };
 
 /** The PATCH failed: the promise toast settles with the server message. */
 export const ToggleAlertErrorToast: Story = {
 	args: { toggleState: 'error' },
 	parameters: { allowConsoleErrors: true },
-	play: ToggleAlertToast.play,
+	play: toggleAlert,
 };
 
 /** Clone from the row menu. */
 export const CloneAlertToast: Story = {
-	play: async ({ canvasElement, args }): Promise<void> => {
-		await runRowAction(canvasElement, /^clone$/i);
-		if (args.cloneState === 'success') {
-			await waitFor(() =>
-				expect(screen.getByText(/alert cloned successfully/i)).toBeVisible(),
-			);
-		}
-	},
+	play: cloneAlert,
 };
 
 /** The POST never answers: "Cloning alert..." stays pending. */
 export const CloneAlertLoadingToast: Story = {
 	args: { cloneState: 'loading' },
-	play: CloneAlertToast.play,
+	play: cloneAlert,
 };
 
 /** The POST failed. */
 export const CloneAlertErrorToast: Story = {
 	args: { cloneState: 'error' },
 	parameters: { allowConsoleErrors: true },
-	play: CloneAlertToast.play,
+	play: cloneAlert,
 };
 
 /** Delete from the row menu. */
 export const DeleteAlertToast: Story = {
-	play: async ({ canvasElement, args }): Promise<void> => {
-		await runRowAction(canvasElement, /^delete$/i);
-		if (args.deleteState === 'success') {
-			await waitFor(() =>
-				expect(screen.getByText(/alert deleted successfully/i)).toBeVisible(),
-			);
-		}
-	},
+	play: deleteAlert,
 };
 
 /** The DELETE never answers: "Deleting alert..." stays pending. */
 export const DeleteAlertLoadingToast: Story = {
 	args: { deleteState: 'loading' },
-	play: DeleteAlertToast.play,
+	play: deleteAlert,
 };
 
 /** The DELETE failed. */
 export const DeleteAlertErrorToast: Story = {
 	args: { deleteState: 'error' },
 	parameters: { allowConsoleErrors: true },
-	play: DeleteAlertToast.play,
+	play: deleteAlert,
 };
 
 /** The copy button in a label badge's tooltip, clicked. */
 export const LabelCopiedToast: Story = {
 	args: { tooltipsOpen: true },
-	play: async (): Promise<void> => {
-		const [copy] = await screen.findAllByRole(
-			'button',
-			{ name: 'Copy to clipboard' },
-			untilLoaded,
-		);
-
-		await userEvent.click(copy);
-		await waitFor(() =>
-			expect(screen.getByText(/copied! use in search/i)).toBeVisible(),
-		);
-	},
+	play: copyLabel,
 };

frontend/src/pages/AlertList/AlertRules/stories/__story_mockdata__/alertRules.play.ts

@@ -0,0 +1,159 @@
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+
+import { expect, screen, userEvent, within } from 'storybook/test';
+
+import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+
+import {
+	alertRulesMocks,
+	runRowAction,
+	untilLoaded,
+} from '../AlertRules.stories.mocks';
+
+interface PlayContext {
+	canvasElement: HTMLElement;
+	args: PageStoryArgs<typeof alertRulesMocks>;
+}
+
+// A row's rename and delete only take the pointer while the row is hovered,
+// which a play cannot put the real cursor on.
+const hoverActions = userEvent.setup({ pointerEventsCheck: 0 });
+
+export const openQuerySuggestions = async ({
+	canvasElement,
+}: PlayContext): Promise<void> => {
+	const canvas = within(canvasElement);
+	// The labels come with the rule list, so the box is opened once rows are in.
+	await canvas.findAllByTestId('alert-actions', undefined, untilLoaded);
+	const search = canvas.getByTestId('alert-rules-list-search');
+	await userEvent.click(search.querySelector('.cm-content') ?? search);
+	await screen.findByText('labels.team');
+};
+
+export const openSaveViewPopover = async ({
+	canvasElement,
+}: PlayContext): Promise<void> => {
+	await userEvent.click(
+		await within(canvasElement).findByTestId(
+			'alert-rules-view-save-trigger',
+			undefined,
+			untilLoaded,
+		),
+	);
+	await screen.findByText('Save as view');
+};
+
+export const openRenameViewPopover = async ({
+	canvasElement,
+}: PlayContext): Promise<void> => {
+	await hoverActions.click(
+		await within(canvasElement).findByTestId(
+			'alert-rules-view-rename-view-1',
+			undefined,
+			untilLoaded,
+		),
+	);
+	await screen.findByText('Rename view');
+};
+
+export const openDeleteViewConfirm = async ({
+	canvasElement,
+}: PlayContext): Promise<void> => {
+	await hoverActions.click(
+		await within(canvasElement).findByTestId(
+			'alert-rules-view-delete-view-1',
+			undefined,
+			untilLoaded,
+		),
+	);
+	await screen.findByText(/shared across your organization/i);
+};
+
+export const openRowActions = async ({
+	canvasElement,
+}: PlayContext): Promise<void> => {
+	const [actions] = await within(canvasElement).findAllByTestId(
+		'alert-actions',
+		undefined,
+		untilLoaded,
+	);
+
+	await userEvent.click(actions);
+	await screen.findByText(/clone/i);
+};
+
+export const openDisabledRuleActions = async ({
+	canvasElement,
+}: PlayContext): Promise<void> => {
+	const [actions] = await within(canvasElement).findAllByTestId(
+		'alert-actions',
+		undefined,
+		untilLoaded,
+	);
+
+	await userEvent.click(actions);
+	await screen.findByText(/^enable$/i);
+};
+
+export const openColumnPicker = async ({
+	canvasElement,
+}: PlayContext): Promise<void> => {
+	await userEvent.click(
+		await within(canvasElement).findByTestId(
+			'alert-columns-button',
+			undefined,
+			untilLoaded,
+		),
+	);
+	await screen.findByText(/toggle columns/i);
+};
+
+export const toggleAlert = async ({
+	canvasElement,
+	args,
+}: PlayContext): Promise<void> => {
+	await runRowAction(canvasElement, /^(enable|disable)$/i);
+	if (args.toggleState === 'success') {
+		await expect(
+			await screen.findByText(/alert (enabled|disabled)/i),
+		).toBeVisible();
+	}
+};
+
+export const cloneAlert = async ({
+	canvasElement,
+	args,
+}: PlayContext): Promise<void> => {
+	await runRowAction(canvasElement, /^clone$/i);
+	if (args.cloneState === 'success') {
+		await expect(
+			await screen.findByText(/alert cloned successfully/i),
+		).toBeVisible();
+	}
+};
+
+export const deleteAlert = async ({
+	canvasElement,
+	args,
+}: PlayContext): Promise<void> => {
+	await runRowAction(canvasElement, /^delete$/i);
+	if (args.deleteState === 'success') {
+		await expect(
+			await screen.findByText(/alert deleted successfully/i),
+		).toBeVisible();
+	}
+};
+
+export const copyLabel = async (): Promise<void> => {
+	const [copy] = await screen.findAllByRole(
+		'button',
+		{ name: 'Copy to clipboard' },
+		untilLoaded,
+	);
+
+	await userEvent.click(copy);
+	await expect(await screen.findByText(/copied! use in search/i)).toBeVisible();
+};

frontend/src/pages/AlertList/AlertRules/stories/__story_mockdata__/ruleViews.ts

@@ -0,0 +1,161 @@
+/**
+ * AI-owned. Generated and maintained by the `signoz-page-story` skill.
+ * Do not hand-edit: regenerate instead.
+ */
+
+import {
+	type ListRuleViews200,
+	type ListRulesV3200,
+	type RenderErrorResponseDTO,
+	RuletypesAlertStateDTO,
+	RuletypesListOrderDTO,
+	RuletypesListSortDTO,
+	type RuletypesRuleViewDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import {
+	alertRulesResponse,
+	type RuleShape,
+} from '../../../stories/__story_mockdata__/alerts';
+
+/**
+ * The v3 list as the API answers it: `states` and paging are applied on the
+ * server. The `query` DSL is not evaluated, so a query narrows nothing here.
+ */
+export const alertRulesPage = (
+	count: number,
+	shape: RuleShape,
+	searchParams: URLSearchParams,
+): ListRulesV3200 => {
+	const states = searchParams.getAll('states');
+	const rules = alertRulesResponse(count, shape).data.filter(
+		(rule) => states.length === 0 || states.includes(rule.state),
+	);
+	const labels = new Map<string, { key: string; value: string }>();
+	rules.forEach((rule) =>
+		Object.entries(rule.labels ?? {}).forEach(([key, value]) =>
+			labels.set(`${key}=${value}`, { key, value }),
+		),
+	);
+	const limit = Number(searchParams.get('limit') ?? rules.length);
+	const offset = Number(searchParams.get('offset') ?? 0);
+
+	return {
+		status: 'success',
+		data: {
+			rules: rules.slice(offset, offset + limit),
+			total: rules.length,
+			labels: [...labels.values()],
+			reservedKeywords: [...RESERVED_RULE_KEYWORDS],
+		},
+	};
+};
+
+/** What `ReservedFilterKeys()` in pkg/types/ruletypes/list_filter.go answers. */
+const RESERVED_RULE_KEYWORDS = [
+	'alert_type',
+	'created_at',
+	'created_by',
+	'labels.<key>',
+	'name',
+	'rule_type',
+	'severity',
+	'updated_at',
+	'updated_by',
+] as const;
+
+/** The two 400 codes the v3 list answers for a filter it cannot run. */
+export const INVALID_QUERY_CHOICES = [
+	'off',
+	'rule_list_filter_invalid',
+	'rule_list_invalid',
+] as const;
+export type InvalidQueryChoice = (typeof INVALID_QUERY_CHOICES)[number];
+
+const INVALID_QUERY_MESSAGES: Record<
+	Exclude<InvalidQueryChoice, 'off'>,
+	string
+> = {
+	rule_list_filter_invalid:
+		"invalid filter query: unexpected token 'AND' at position 22",
+	rule_list_invalid: 'invalid list params: unknown sort column',
+};
+
+export const invalidRuleQueryError = (
+	code: Exclude<InvalidQueryChoice, 'off'>,
+): RenderErrorResponseDTO =>
+	({
+		status: 'error',
+		error: { code, message: INVALID_QUERY_MESSAGES[code] },
+	}) as RenderErrorResponseDTO;
+
+const VIEW_SEEDS: Pick<RuletypesRuleViewDTO, 'name' | 'data'>[] = [
+	{
+		name: 'Critical prod alerts',
+		data: {
+			version: 'v1',
+			query: "env = 'prod' AND severity = 'critical'",
+			states: [RuletypesAlertStateDTO.firing, RuletypesAlertStateDTO.pending],
+			sort: RuletypesListSortDTO.updated_at,
+			order: RuletypesListOrderDTO.desc,
+		},
+	},
+	{
+		name: 'Infra team',
+		data: {
+			version: 'v1',
+			query: "team = 'infra'",
+			states: [],
+			sort: RuletypesListSortDTO.name,
+			order: RuletypesListOrderDTO.asc,
+		},
+	},
+	{
+		name: 'Firing right now',
+		data: {
+			version: 'v1',
+			query: '',
+			states: [RuletypesAlertStateDTO.firing],
+			sort: RuletypesListSortDTO.severity,
+			order: RuletypesListOrderDTO.desc,
+		},
+	},
+	{
+		name: 'Recently created',
+		data: {
+			version: 'v1',
+			query: '',
+			states: [],
+			sort: RuletypesListSortDTO.created_at,
+			order: RuletypesListOrderDTO.desc,
+		},
+	},
+	{
+		name:
+			'Payments on-call, everything that pages the payments rotation overnight',
+		data: {
+			version: 'v1',
+			query: "team = 'payments' AND severity IN ('critical', 'error')",
+			states: [],
+			sort: RuletypesListSortDTO.state,
+			order: RuletypesListOrderDTO.asc,
+		},
+	},
+];
+
+export const RULE_VIEW_MAX = VIEW_SEEDS.length;
+
+export const ruleView = (index: number): RuletypesRuleViewDTO => ({
+	id: `view-${index + 1}`,
+	orgId: 'org-1',
+	createdAt: '2026-09-01T10:00:00Z',
+	updatedAt: '2026-09-15T08:00:00Z',
+	...VIEW_SEEDS[index % RULE_VIEW_MAX],
+});
+
+export const ruleViewsResponse = (count: number): ListRuleViews200 => ({
+	status: 'success',
+	data: {
+		views: Array.from({ length: count }, (_unused, index) => ruleView(index)),
+	},
+});

tests/e2e/AGENTS.md

@@ -62,10 +62,10 @@ tests/e2e/
 ## Writing a spec
 
 ```ts
-import { expect, test } from '../../drivers/alerts';
+import { expect, nameContains, test } from '../../drivers/alerts';
 
 test('TC-01 …', async ({ alerts, alertList }) => {
-  await alerts.list.goto({ search: alertList.namePrefix });
+  await alerts.list.goto({ query: nameContains(alertList.namePrefix) });
   await expect(alerts.list.rows()).toHaveCount(10);
 });
 ```

tests/e2e/drivers/alerts/driver.ts

@@ -102,8 +102,10 @@ export interface AlertList {
 	rowFor(name: string): Locator;
 	/** The STATE cell of `ruleId`'s row — `OK`, `Disabled`, `Firing`. */
 	stateCell(ruleId: string): Locator;
+	/** The DSL search box's editable content (a CodeMirror editor). */
 	search(): Locator;
-	searchFor(text: string): Promise<void>;
+	/** Replace the DSL draft and run it, as Run query does. */
+	runSearch(query: string): Promise<void>;
 	openRowActions(name: string): Promise<void>;
 	openFirstRowActions(): Promise<void>;
 	menuItem(label: string | RegExp): Locator;
@@ -115,10 +117,26 @@ export interface AlertList {
 	nextPageButton(): Locator;
 	pageSizeSelect(): Locator;
 	pageSizeOption(size: number): Locator;
-	/** A rule's name anywhere on the page, such as a clone's `<name> - Copy`. */
+	/** A rule's name in the list rows, such as a clone's `<name> - Copy`. */
 	ruleName(name: string, options?: { exact?: boolean }): Locator;
 }
 
+// ─── Saved views ─────────────────────────────────────────────────────────────
+
+export interface AlertRuleViews {
+	/** A view in the rail, by id: `all`, a builtin's id or a saved view's. */
+	item(id: string): Locator;
+	/** The list heading, which names the active view. */
+	heading(): Locator;
+	saveChanges(): Locator;
+	/** Store the current filters on the active view. */
+	save(): Promise<void>;
+	/** Save the current filters as a new view; resolves to its id. */
+	saveAs(name: string): Promise<string>;
+	rename(id: string, name: string): Promise<void>;
+	remove(id: string): Promise<void>;
+}
+
 // ─── Create / edit form ──────────────────────────────────────────────────────
 
 export interface AlertForm {
@@ -342,6 +360,7 @@ export interface Alerts {
 	shell: AlertsShell;
 	channels: AlertChannels;
 	list: AlertList;
+	views: AlertRuleViews;
 	form: AlertForm;
 	details: AlertDetails;
 	history: AlertHistory;
@@ -364,7 +383,8 @@ export function alertsDriver(page: Page): Alerts {
 		tab: (name) => page.getByRole('tab', { name }),
 		configSidebar: () => page.getByTestId('alert-configuration-sidebar'),
 		configSidebarItem: (key) => page.getByTestId(`configuration-sidebar-${key}`),
-		rulesHeading: () => page.getByRole('heading', { name: 'Alert Rules' }),
+		rulesHeading: () =>
+			page.getByRole('heading', { name: 'Alert Rules', exact: true }),
 		triggeredSearch: () => page.getByTestId('triggered-alerts-search-input'),
 		breadcrumb: () => page.locator('.ant-breadcrumb'),
 		crumb: (text) => shell.breadcrumb().getByText(text),
@@ -400,11 +420,18 @@ export function alertsDriver(page: Page): Alerts {
 		rows: () => page.locator('tbody tr'),
 		rowFor: (name) => page.locator('tbody tr', { hasText: name }).first(),
 		stateCell: (ruleId) => page.getByTestId(`alert-row-${ruleId}-state`),
-		search: () => page.getByTestId('list-alerts-search-input'),
+		search: () =>
+			page.getByTestId('alert-rules-list-search').locator('.cm-content'),
 
-		searchFor: async (text) => {
-			await list.search().fill(text);
-			await expect(page).toHaveURL(new RegExp(`search=${text}`));
+		runSearch: async (query) => {
+			await list.search().click();
+			await page.keyboard.press('ControlOrMeta+A');
+			await page.keyboard.insertText(query);
+			await expect(list.search()).toHaveText(query);
+			await page.getByTestId('alert-rules-list-search-submit').click();
+			await page.waitForURL(
+				(url) => (url.searchParams.get('query') ?? '') === query.trim(),
+			);
 		},
 
 		openRowActions: async (name) => {
@@ -423,7 +450,58 @@ export function alertsDriver(page: Page): Alerts {
 		pageSizeSelect: () => page.getByTestId('pagination-page-size'),
 		pageSizeOption: (size) =>
 			page.getByRole('option', { name: String(size), exact: true }),
-		ruleName: (name, options) => page.getByText(name, options),
+		ruleName: (name, options) => list.rows().getByText(name, options),
+	};
+
+	const viewWrite = (method: string): Promise<Response> =>
+		page.waitForResponse(
+			(res) =>
+				new URL(res.url()).pathname.startsWith('/api/v2/rule_views') &&
+				res.request().method() === method,
+		);
+
+	const views: AlertRuleViews = {
+		item: (id) => page.getByTestId(`alert-rules-view-${id}`),
+		heading: () => page.getByTestId('alert-rules-list-heading'),
+		saveChanges: () => page.getByTestId('alert-rules-view-save-changes'),
+
+		save: async () => {
+			await Promise.all([viewWrite('PUT'), views.saveChanges().click()]);
+		},
+
+		saveAs: async (name) => {
+			await page.getByTestId('alert-rules-view-save-trigger').click();
+			await page.getByTestId('save-alert-rule-view-name').fill(name);
+			const [created] = await Promise.all([
+				viewWrite('POST'),
+				page.getByTestId('save-alert-rule-view-confirm').click(),
+			]);
+			const body = (await created.json()) as { data: { id: string } };
+			return body.data.id;
+		},
+
+		// The row's actions take pointer events only while it is hovered.
+		rename: async (id, name) => {
+			await views.item(id).hover();
+			await page.getByTestId(`alert-rules-view-rename-${id}`).click();
+			await page.getByTestId('rename-alert-rule-view-name').fill(name);
+			await Promise.all([
+				viewWrite('PUT'),
+				page.getByTestId('rename-alert-rule-view-confirm').click(),
+			]);
+		},
+
+		remove: async (id) => {
+			await views.item(id).hover();
+			await page.getByTestId(`alert-rules-view-delete-${id}`).click();
+			await Promise.all([
+				viewWrite('DELETE'),
+				page
+					.locator('.ant-modal-confirm')
+					.getByRole('button', { name: 'Delete' })
+					.click(),
+			]);
+		},
 	};
 
 	const form: AlertForm = {
@@ -1046,6 +1124,7 @@ export function alertsDriver(page: Page): Alerts {
 		shell,
 		channels,
 		list,
+		views,
 		form,
 		details,
 		history,

tests/e2e/drivers/alerts/index.ts

@@ -9,6 +9,7 @@ import {
 	withMetricsHistory,
 	withNoDataHistory,
 	withOwnedRules,
+	withOwnedViews,
 	withResolvedHistory,
 	withTracesHistory,
 } from './seeds';
@@ -21,13 +22,15 @@ import {
  * pays its 105 s ruler wait. One import per spec is the point.
  */
 export const test = withAlerts(
-	withOwnedRules(
-		withAlertChannel(
-			withAlertList(
-				withAlertHistory(
-					withMetricsHistory(
-						withTracesHistory(
-							withResolvedHistory(withNoDataHistory(withEmptyHistory(kit))),
+	withOwnedViews(
+		withOwnedRules(
+			withAlertChannel(
+				withAlertList(
+					withAlertHistory(
+						withMetricsHistory(
+							withTracesHistory(
+								withResolvedHistory(withNoDataHistory(withEmptyHistory(kit))),
+							),
 						),
 					),
 				),
@@ -38,7 +41,8 @@ export const test = withAlerts(
 
 export { expect } from '../kit';
 export { alertsDriver, HISTORY_ENDPOINTS, withAlerts } from './driver';
-export type { Alerts, HistoryEndpoint } from './driver';
+export { nameContains } from '../dashboard-list';
+export type { AlertRuleViews, Alerts, HistoryEndpoint } from './driver';
 export * from './constants';
 export type { TimelineItem, TimelineResponse } from './types';
 export { V1_RULE_TEAM_LABEL } from './seeds';

tests/e2e/drivers/alerts/seed.ts

@@ -3,6 +3,7 @@ import { randomBytes } from 'crypto';
 import type { Page } from '@playwright/test';
 
 import { apiDriver } from '../api';
+import type { RuletypesPostableRuleViewDTO } from '../schemas';
 import { postToSeeder, type TelemetryPath } from '../telemetry';
 
 import { SEED_B_SEVERITIES } from './constants';
@@ -51,6 +52,8 @@ export interface AlertSeeder {
 	rules(options: AlertRulesSeedOptions): Promise<string[]>;
 	deleteRule(id: string): Promise<void>;
 	deleteRules(ids: string[]): Promise<void>;
+	view(view: RuletypesPostableRuleViewDTO): Promise<string>;
+	deleteView(id: string): Promise<void>;
 	/**
 	 * Freeze a rule's history. Rows are written on *state change* only, so the
 	 * firing wave lands once — but once the eval window rolls past the seeded
@@ -223,6 +226,10 @@ export function alertSeeder(page: Page): AlertSeeder {
 			}
 		},
 
+		view: (view) => api.create('/api/v2/rule_views', view),
+
+		deleteView: (id) => api.tryDel(`/api/v2/rule_views/${id}`),
+
 		setDisabled: async (id, disabled) => {
 			await api.patch(`/api/v2/rules/${id}`, { disabled });
 		},

tests/e2e/drivers/alerts/seeds.ts

@@ -1,6 +1,7 @@
 import type { Browser, Page, TestType } from '@playwright/test';
 
 import { onAdminPage, seeded, type Layer, type WorkerLayer } from '../kit';
+import type { RuletypesRuleViewDataDTO } from '../schemas';
 
 type Fixtures = Record<string, unknown>;
 
@@ -489,3 +490,46 @@ export const withOwnedRules: Layer<{ ownedRules: OwnedRules }> = ((
 			);
 		},
 	}) as never) as Layer<{ ownedRules: OwnedRules }>;
+
+// ─── Views a single test owns ────────────────────────────────────────────────
+
+export interface OwnedViews {
+	/** Seed a saved view this test owns. */
+	create(name: string, data: RuletypesRuleViewDataDTO): Promise<string>;
+	/** Track a view the *app* created, so teardown removes it too. */
+	register(id: string): void;
+}
+
+/** Test-scoped: views are shared across the org, so each test removes its own. */
+export const withOwnedViews: Layer<{ ownedViews: OwnedViews }> = ((
+	test: TestType<Fixtures, Fixtures>,
+) =>
+	test.extend({
+		ownedViews: async (
+			{ browser }: { browser: Browser },
+			use: (value: OwnedViews) => Promise<void>,
+		) => {
+			const ids = new Set<string>();
+
+			await use({
+				create: async (name, data) => {
+					const id = await onAdminPage(browser, (page) =>
+						alertsDriver(page).seed.view({ name, data }),
+					);
+					ids.add(id);
+					return id;
+				},
+				register: (id) => {
+					ids.add(id);
+				},
+			});
+
+			await onAdminPage(browser, async (page) => {
+				const { seed } = alertsDriver(page);
+				for (const id of ids) {
+					// eslint-disable-next-line no-await-in-loop
+					await seed.deleteView(id);
+				}
+			});
+		},
+	}) as never) as Layer<{ ownedViews: OwnedViews }>;

tests/e2e/drivers/routing.ts

@@ -264,8 +264,8 @@ export function routingDriver(page: Page): Routing {
 		alerts: {
 			landmark: () =>
 				page
-					.getByRole('heading', { name: 'Alert Rules' })
-					.or(page.getByTestId('list-alerts-search-input')),
+					.getByRole('heading', { name: 'Alert Rules', exact: true })
+					.or(page.getByTestId('alert-rules-list-search')),
 		},
 
 		settings: {

tests/e2e/tests/alerts/details.spec.ts

@@ -4,6 +4,7 @@ import {
 	ALERTS_LIST_PATH,
 	DEFAULT_RELATIVE_TIME,
 	expect,
+	nameContains,
 	test,
 	V1_RULE_TEAM_LABEL,
 } from '../../drivers/alerts';
@@ -58,7 +59,7 @@ test.describe('Alert details', () => {
 		await expect(page).toHaveURL(new RegExp(ALERT_OVERVIEW_PATH));
 		await expect(page).toHaveURL(/[?&]ruleId=/);
 
-		await alerts.shell.goto({ search: name });
+		await alerts.shell.goto({ query: nameContains(name) });
 		await expect(alerts.list.ruleName(`${name} - Copy`)).toBeVisible();
 	});
 
@@ -83,7 +84,7 @@ test.describe('Alert details', () => {
 		]);
 
 		await expect(page).toHaveURL(new RegExp(`${ALERTS_LIST_PATH}$`));
-		await alerts.shell.goto({ search: name });
+		await alerts.shell.goto({ query: nameContains(name) });
 		await expect(alerts.list.ruleName(name, { exact: true })).toHaveCount(0);
 	});
 
@@ -196,7 +197,7 @@ test.describe('Alert details', () => {
 		).toBeVisible();
 		await expect(alerts.details.headerField('title')).toContainText(renamed);
 
-		await alerts.shell.goto({ search: renamed });
+		await alerts.shell.goto({ query: nameContains(renamed) });
 		await expect(alerts.list.ruleName(renamed)).toBeVisible();
 	});
 
@@ -224,7 +225,7 @@ test.describe('Alert details', () => {
 			alerts.details.footerSaveButton().click(),
 		]);
 
-		await alerts.shell.goto({ search: renamed });
+		await alerts.shell.goto({ query: nameContains(renamed) });
 		await expect(alerts.list.ruleName(renamed)).toBeVisible();
 
 		// The History tab renders the same name input with no save button, so an
@@ -233,7 +234,7 @@ test.describe('Alert details', () => {
 		await alerts.details.nameInput().fill(`${renamed}-unsaved`);
 		await expect(alerts.details.footerSaveButton()).toHaveCount(0);
 
-		await alerts.shell.goto({ search: renamed });
+		await alerts.shell.goto({ query: nameContains(renamed) });
 		await expect(alerts.list.ruleName(renamed)).toBeVisible();
 		await expect(alerts.list.ruleName(`${renamed}-unsaved`)).toHaveCount(0);
 	});

tests/e2e/tests/alerts/list.spec.ts

@@ -1,4 +1,9 @@
-import { ALERT_LIST_PAGE_SIZE, expect, test } from '../../drivers/alerts';
+import {
+	ALERT_LIST_PAGE_SIZE,
+	expect,
+	nameContains,
+	test,
+} from '../../drivers/alerts';
 
 // What stays here is what needs a real backend behind a real table: the seeded
 // rules rendering, the server-side filter semantics, and the write paths that
@@ -13,7 +18,7 @@ test.describe('Alert rules list', () => {
 		alerts,
 		alertList,
 	}) => {
-		await alerts.list.goto({ search: alertList.namePrefix });
+		await alerts.list.goto({ query: nameContains(alertList.namePrefix) });
 
 		for (const header of ['Status', 'Alert Name', 'Severity', 'Labels']) {
 			await expect(alerts.list.columnHeader(header)).toBeVisible();
@@ -39,32 +44,20 @@ test.describe('Alert rules list', () => {
 		alertList,
 	}) => {
 		const perSeverity = alertList.count / 3;
-		const scoped = { search: alertList.namePrefix };
+		const query = `${nameContains(alertList.namePrefix)} AND severity = 'warning'`;
 
 		// One filter kind: a third of the batch.
-		await alerts.list.goto({
-			...scoped,
-			alertRulesFilters: JSON.stringify(['severity:warning']),
-		});
+		await alerts.list.goto({ query });
 		await expect(alerts.list.rows()).toHaveCount(perSeverity);
 
 		// Both kinds, both satisfied — seeded rules never fire, so they sit in
 		// `inactive` and the intersection is unchanged.
-		await alerts.list.goto({
-			...scoped,
-			alertRulesFilters: JSON.stringify(['severity:warning', 'state:inactive']),
-		});
+		await alerts.list.goto({ query, states: 'inactive' });
 		await expect(alerts.list.rows()).toHaveCount(perSeverity);
 
 		// Both kinds, only one satisfied. Under AND this is empty; under OR the
 		// severity match alone would still surface all `perSeverity` rules.
-		await alerts.list.goto(
-			{
-				...scoped,
-				alertRulesFilters: JSON.stringify(['severity:warning', 'state:firing']),
-			},
-			{ expectRows: false },
-		);
+		await alerts.list.goto({ query, states: 'firing' }, { expectRows: false });
 		await expect(alerts.list.rows()).toHaveCount(0);
 	});
 
@@ -76,7 +69,7 @@ test.describe('Alert rules list', () => {
 		const name = `e2e-alert-row-${Date.now()}`;
 		const ruleId = await ownedRules.threshold(name);
 
-		await alerts.list.goto({ search: name });
+		await alerts.list.goto({ query: nameContains(name) });
 		await expect(alerts.list.stateCell(ruleId)).toHaveText('OK');
 
 		const patched = (): Promise<unknown> =>
@@ -110,7 +103,7 @@ test.describe('Alert rules list', () => {
 		await ownedRules.register(cloned);
 		await expect(alerts.shell.message('Alert cloned successfully')).toBeVisible();
 
-		await alerts.list.goto({ search: name });
+		await alerts.list.goto({ query: nameContains(name) });
 		await expect(alerts.list.ruleName(`${name} - Copy`)).toBeVisible();
 
 		await alerts.list.openRowActions(`${name} - Copy`);
@@ -133,7 +126,7 @@ test.describe('Alert rules list', () => {
 		alerts,
 		alertList,
 	}) => {
-		await alerts.list.goto({ search: alertList.namePrefix });
+		await alerts.list.goto({ query: nameContains(alertList.namePrefix) });
 		const firstAscending = await alerts.list.rows().first().textContent();
 
 		await alerts.list.sortButton('Alert Name').click();
@@ -141,7 +134,7 @@ test.describe('Alert rules list', () => {
 		await alerts.list.sortButton('Alert Name').click();
 		await expect(alerts.list.rows().first()).not.toHaveText(firstAscending ?? '');
 
-		await alerts.list.goto({ search: alertList.namePrefix });
+		await alerts.list.goto({ query: nameContains(alertList.namePrefix) });
 		await alerts.list.pageSizeSelect().click();
 		await alerts.list.pageSizeOption(20).click();
 
@@ -154,7 +147,7 @@ test.describe('Alert rules list', () => {
 		alerts,
 		alertList,
 	}) => {
-		await alerts.list.goto({ search: alertList.namePrefix });
+		await alerts.list.goto({ query: nameContains(alertList.namePrefix) });
 
 		await alerts.list.openFirstRowActions();
 		await alerts.list.menuItem('Edit in New Tab').first().waitFor();

tests/e2e/tests/alerts/views.spec.ts

@@ -0,0 +1,117 @@
+import { expect, nameContains, test } from '../../drivers/alerts';
+
+// The rail's own behaviour (dirty states, builtin views, link precedence) is
+// asserted against mocks in
+// `frontend/src/container/ListAlertRules/__tests__/ListAlertRules.views.test.tsx`.
+// What stays here is what a real `/api/v2/rule_views` has to persist.
+
+const viewName = (label: string): string =>
+	`e2e-alert-view-${label}-w${test.info().workerIndex}-${Date.now()}`;
+
+test.describe('Alert rules saved views', () => {
+	test('TC-01 the current search saves as a view that reapplies from a bare link', async ({
+		authedPage: page,
+		alerts,
+		alertList,
+		ownedViews,
+	}) => {
+		const query = `${nameContains(alertList.namePrefix)} AND severity = 'warning'`;
+		const name = viewName('save');
+
+		await alerts.list.goto({ query });
+		const id = await alerts.views.saveAs(name);
+		ownedViews.register(id);
+
+		await expect(page).toHaveURL(new RegExp(`[?&]view=${id}`));
+		await expect(alerts.views.heading()).toHaveText(name);
+
+		await alerts.list.goto({ view: id });
+		await expect(alerts.views.heading()).toHaveText(name);
+		await expect(alerts.list.rows()).toHaveCount(alertList.count / 3);
+	});
+
+	test('TC-02 selecting a saved view applies its filter', async ({
+		authedPage: page,
+		alerts,
+		alertList,
+		ownedViews,
+	}) => {
+		const query = `${nameContains(alertList.namePrefix)} AND severity = 'critical'`;
+		const name = viewName('apply');
+		const id = await ownedViews.create(name, { version: 'v1', query });
+
+		await alerts.list.goto({ query: nameContains(alertList.namePrefix) });
+		await alerts.views.item(id).click();
+
+		await expect(page).toHaveURL(new RegExp(`[?&]view=${id}`));
+		await expect(alerts.views.heading()).toHaveText(name);
+		await expect(alerts.list.rows()).toHaveCount(alertList.count / 3);
+	});
+
+	test('TC-03 Save changes stores the edited filter on the view', async ({
+		alerts,
+		alertList,
+		ownedViews,
+	}) => {
+		const scope = nameContains(alertList.namePrefix);
+		const id = await ownedViews.create(viewName('update'), {
+			version: 'v1',
+			query: `${scope} AND severity = 'warning'`,
+		});
+
+		await alerts.list.goto({ view: id });
+		const edited = `${scope} AND severity = 'critical'`;
+		await alerts.list.runSearch(edited);
+		await alerts.views.save();
+		await expect(alerts.views.saveChanges()).toHaveCount(0);
+
+		await alerts.list.goto({ view: id });
+		await expect(alerts.list.search()).toHaveText(edited);
+	});
+
+	test('TC-04 rename and delete survive a reload', async ({
+		authedPage: page,
+		alerts,
+		alertList,
+		ownedViews,
+	}) => {
+		const name = viewName('rename');
+		const id = await ownedViews.create(name, {
+			version: 'v1',
+			query: nameContains(alertList.namePrefix),
+		});
+
+		await alerts.list.goto({ view: id });
+		await alerts.views.rename(id, `${name}-renamed`);
+
+		await page.reload();
+		await expect(alerts.views.item(id)).toHaveText(`${name}-renamed`);
+
+		await alerts.views.remove(id);
+
+		await page.reload();
+		await expect(alerts.views.item('all')).toBeVisible();
+		await expect(alerts.views.item(id)).toHaveCount(0);
+	});
+
+	test('TC-05 a shared link keeps its own query over the view and marks it modified', async ({
+		alerts,
+		alertList,
+		ownedViews,
+	}) => {
+		const scope = nameContains(alertList.namePrefix);
+		const name = viewName('link');
+		const id = await ownedViews.create(name, {
+			version: 'v1',
+			query: `${scope} AND severity = 'warning'`,
+		});
+
+		await alerts.list.goto({ view: id, query: scope });
+
+		await expect(alerts.views.heading()).toHaveText(name);
+		await expect(alerts.views.saveChanges()).toBeVisible();
+		await expect(alerts.list.table.totalCount()).toContainText(
+			`of ${alertList.count}`,
+		);
+	});
+});