fix(alerts): refresh the v3 rules list after rule changes

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -21,14 +21,15 @@ import {
 	useListDashboardsForUserV2,
 } from 'api/generated/services/dashboard';
 import {
-	getListRulesQueryKey,
-	useListRules,
+	getListRulesV3QueryKey,
+	useListRulesV3,
 } from 'api/generated/services/rules';
 import type {
 	DashboardtypesListedDashboardForUserV2DTO,
 	ListDashboardsForUserV2200,
 	ListDashboardsForUserV2Params,
-	ListRules200,
+	ListRulesV3200,
+	ListRulesV3Params,
 } from 'api/generated/services/sigNoz.schemas';
 import logEvent from 'api/common/logEvent';
 import { useQueryService } from 'hooks/useQueryService';
@@ -179,6 +180,9 @@ const VOICE_UNAVAILABLE_KEY = 'ai-assistant-voice-unavailable';
  */
 const DASHBOARD_LIST_PARAMS: ListDashboardsForUserV2Params = { limit: 1000 };
 
+/** Same as dashboards. 200 is the most the rules list returns per call. */
+const ALERT_RULE_LIST_PARAMS: ListRulesV3Params = { limit: 200 };
+
 function dashboardTitle(
 	dashboard: DashboardtypesListedDashboardForUserV2DTO,
 ): string {
@@ -755,7 +759,7 @@ export default function ChatInput({
 		data: alertsResponse,
 		isLoading: isAlertsLoading,
 		isError: isAlertsError,
-	} = useListRules({
+	} = useListRulesV3(ALERT_RULE_LIST_PARAMS, {
 		query: {
 			enabled: isContextPickerOpen && activeContextCategory === 'Alerts',
 			staleTime: Infinity,
@@ -804,10 +808,10 @@ export default function ChatInput({
 				}
 			}
 			if (ctx.type === 'alert' && ctx.resourceId) {
-				const cached = queryClient.getQueryData<ListRules200>(
-					getListRulesQueryKey(),
+				const cached = queryClient.getQueryData<ListRulesV3200>(
+					getListRulesV3QueryKey(ALERT_RULE_LIST_PARAMS),
 				);
-				const rule = cached?.data?.find((r) => r.id === ctx.resourceId);
+				const rule = cached?.data.rules.find((r) => r.id === ctx.resourceId);
 				if (rule?.alert) {
 					return rule.alert;
 				}
@@ -835,8 +839,8 @@ export default function ChatInput({
 					value: dashboardTitle(dashboard),
 				})) ?? [],
 			Alerts:
-				alertsResponse?.data
-					?.filter((alertRule) => Boolean(alertRule.alert))
+				alertsResponse?.data.rules
+					.filter((alertRule) => Boolean(alertRule.alert))
 					.map((alertRule) => ({
 						id: alertRule.id,
 						value: alertRule.alert,
@@ -1059,6 +1063,7 @@ export default function ChatInput({
 												color="secondary"
 												size="sm"
 												id={`ai-context-tab-${category}`}
+												testId={`ai-context-tab-${category}`}
 												// Single stable panel id shared by every tab: only the
 												// active category's tabpanel is rendered, so per-category
 												// `aria-controls` ids would point at nonexistent nodes

frontend/src/container/AIAssistant/components/ChatInput/__tests__/ChatInput.alertsPicker.test.tsx

@@ -0,0 +1,70 @@
+import {
+	alertRulesFixture,
+	listRulesV3Response,
+} from 'mocks-server/__mockdata__/alert_rules';
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+jest.mock('api/generated/services/dashboard', () => ({
+	useListDashboardsForUserV2: (): unknown => ({
+		data: undefined,
+		isLoading: false,
+		isError: false,
+	}),
+	getListDashboardsForUserV2QueryKey: (): string[] => ['dashboards'],
+}));
+
+jest.mock('hooks/useQueryService', () => ({
+	useQueryService: (): unknown => ({
+		data: [],
+		isLoading: false,
+		isFetching: false,
+		isError: false,
+	}),
+}));
+
+jest.mock('../../../hooks/useSpeechRecognition', () => ({
+	useSpeechRecognition: (): unknown => ({
+		isListening: false,
+		isSupported: false,
+		permission: 'prompt',
+		start: jest.fn(),
+		discard: jest.fn(),
+	}),
+}));
+
+jest.mock('../../../hooks/useAIAssistantAnalyticsContext', () => ({
+	useAIAssistantAnalyticsContext: (): unknown => ({
+		threadId: undefined,
+		page: '/',
+		mode: 'sidepane',
+	}),
+}));
+
+// eslint-disable-next-line import/first
+import ChatInput from '../ChatInput';
+
+describe('ChatInput — alerts context picker', () => {
+	it('lists the rules from one v3 rules request', async () => {
+		const [first, second] = alertRulesFixture;
+		const requests: string[] = [];
+		server.use(
+			rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
+				requests.push(req.url.search);
+				return res(
+					ctx.status(200),
+					ctx.json(listRulesV3Response([first, second], req.url.searchParams)),
+				);
+			}),
+		);
+
+		render(<ChatInput onSend={jest.fn()} />);
+
+		await userEvent.click(screen.getByRole('button', { name: /add context/i }));
+		await userEvent.click(await screen.findByTestId('ai-context-tab-Alerts'));
+
+		await expect(screen.findByText(first.alert)).resolves.toBeInTheDocument();
+		expect(screen.getByText(second.alert)).toBeInTheDocument();
+		expect(requests).toStrictEqual(['?limit=200']);
+	});
+});

frontend/src/container/AIAssistant/components/ChatInput/__tests__/ChatInput.prefill.test.tsx

@@ -12,8 +12,12 @@ jest.mock('api/generated/services/dashboard', () => ({
 }));
 
 jest.mock('api/generated/services/rules', () => ({
-	useListRules: (): unknown => ({ data: [], isLoading: false, isError: false }),
-	getListRulesQueryKey: (): string[] => ['rules'],
+	useListRulesV3: (): unknown => ({
+		data: undefined,
+		isLoading: false,
+		isError: false,
+	}),
+	getListRulesV3QueryKey: (): string[] => ['rules'],
 }));
 
 jest.mock('hooks/useQueryService', () => ({

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -18,7 +18,7 @@ import { buildCreateAlertRulePayload, validateCreateAlertState } from './utils';
 import './styles.scss';
 import {
 	invalidateGetRuleByID,
-	invalidateListRules,
+	invalidateListRulesV3,
 } from 'api/generated/services/rules';
 import { useQueryClient } from 'react-query';
 
@@ -137,7 +137,7 @@ function Footer(): JSX.Element {
 				{
 					onSuccess: () => {
 						void invalidateGetRuleByID(queryClient, { id: ruleId });
-						void invalidateListRules(queryClient);
+						void invalidateListRulesV3(queryClient);
 
 						toast.success('Alert rule updated successfully');
 						safeNavigate('/alerts');

frontend/src/container/Home/AlertRules/AlertRules.tsx

@@ -1,24 +1,22 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { Button, Skeleton } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import logEvent from 'api/common/logEvent';
-import { useListRules } from 'api/generated/services/rules';
-import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { RuletypesListableRuleDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { AppLink } from 'lib/router/AppLink';
 import { navigate } from 'lib/router/navigation';
 import { useAppLocation } from 'lib/router/useAppLocation';
-import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { ArrowRight, ArrowUpRight, Plus } from '@signozhq/icons';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
-import { toCompositeMetricQuery } from 'types/api/alerts/convert';
 import { USER_ROLES } from 'types/roles';
 
 import beaconUrl from '@/assets/Icons/beacon.svg';
 
 import { getItemIcon } from '../constants';
+import { useHomeAlertRules } from './useHomeAlertRules';
 
 export default function AlertRules({
 	onUpdateChecklistDoneItem,
@@ -28,49 +26,19 @@ export default function AlertRules({
 	loadingUserPreferences: boolean;
 }): JSX.Element {
 	const { user } = useAppContext();
-	const [rulesExist, setRulesExist] = useState(false);
-
-	const [sortedAlertRules, setSortedAlertRules] = useState<RuletypesRuleDTO[]>(
-		[],
-	);
 
 	const location = useAppLocation();
 	const params = new URLSearchParams(location.search);
 
 	// Fetch Alerts
-	const {
-		data: alerts,
-		isError,
-		isLoading,
-	} = useListRules({
-		query: { cacheTime: 0 },
-	});
+	const { rules: alertRules, isError, isLoading } = useHomeAlertRules();
+	const rulesExist = alertRules.length > 0;
 
 	useEffect(() => {
-		const rules = alerts?.data ?? [];
-		setRulesExist(rules.length > 0);
-
-		const sortedRules = [...rules].sort((a, b) => {
-			// First, prioritize firing alerts
-			if (a.state === 'firing' && b.state !== 'firing') {
-				return -1;
-			}
-			if (a.state !== 'firing' && b.state === 'firing') {
-				return 1;
-			}
-
-			// Then sort by updatedAt timestamp
-			return (
-				new Date(b.updatedAt ?? 0).getTime() - new Date(a.updatedAt ?? 0).getTime()
-			);
-		});
-
-		if (sortedRules.length > 0 && !loadingUserPreferences) {
+		if (rulesExist && !loadingUserPreferences) {
 			onUpdateChecklistDoneItem('SETUP_ALERTS');
 		}
-
-		setSortedAlertRules(sortedRules.slice(0, 5));
-	}, [alerts, onUpdateChecklistDoneItem, loadingUserPreferences]);
+	}, [rulesExist, onUpdateChecklistDoneItem, loadingUserPreferences]);
 
 	const emptyStateCard = (): JSX.Element => (
 		<div className="empty-state-container">
@@ -95,7 +63,7 @@ export default function AlertRules({
 								className="periscope-btn secondary"
 								icon={<Plus size={16} />}
 								onClick={(): void => {
-									logEvent('Homepage: Create alert rule clicked', {});
+									void logEvent('Homepage: Create alert rule clicked', {});
 								}}
 							>
 								Create Alert Rule
@@ -106,7 +74,7 @@ export default function AlertRules({
 							type="link"
 							className="learn-more-link"
 							onClick={(): void => {
-								logEvent('Homepage: Learn more clicked', {
+								void logEvent('Homepage: Learn more clicked', {
 									source: 'Alert Rules',
 								});
 
@@ -125,26 +93,13 @@ export default function AlertRules({
 		</div>
 	);
 
-	const onEditHandler = (record: RuletypesRuleDTO) => (): void => {
-		logEvent('Homepage: Alert clicked', {
+	const onEditHandler = (record: RuletypesListableRuleDTO) => (): void => {
+		void logEvent('Homepage: Alert clicked', {
 			ruleId: record.id,
 			ruleName: record.alert,
 			ruleState: record.state,
 		});
 
-		const compositeQuery = mapQueryDataFromApi(
-			toCompositeMetricQuery(record.condition.compositeQuery),
-		);
-		params.set(
-			QueryParams.compositeQuery,
-			encodeURIComponent(JSON.stringify(compositeQuery)),
-		);
-
-		const panelType = record.condition.compositeQuery.panelType;
-		if (panelType) {
-			params.set(QueryParams.panelTypes, panelType);
-		}
-
 		params.set(QueryParams.ruleId, record.id);
 
 		navigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
@@ -153,11 +108,12 @@ export default function AlertRules({
 	const renderAlertRules = (): JSX.Element => (
 		<div className="alert-rules-container home-data-item-container">
 			<div className="alert-rules-list">
-				{sortedAlertRules.map((rule) => (
+				{alertRules.map((rule) => (
 					<div
 						role="button"
 						tabIndex={0}
 						className="alert-rule-item home-data-item"
+						data-testid={`home-alert-rule-${rule.id}`}
 						key={rule.id}
 						onClick={onEditHandler(rule)}
 						onKeyDown={(e): void => {
@@ -239,7 +195,7 @@ export default function AlertRules({
 								type="link"
 								className="periscope-btn link learn-more-link"
 								onClick={(): void => {
-									logEvent('Homepage: All alert rules clicked', {});
+									void logEvent('Homepage: All alert rules clicked', {});
 								}}
 							>
 								All Alert Rules <ArrowRight size={12} />

frontend/src/container/Home/AlertRules/useHomeAlertRules.ts

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import { useListRulesV3 } from 'api/generated/services/rules';
+import {
+	type ListRulesV3200,
+	type ListRulesV3Params,
+	RuletypesAlertStateDTO,
+	type RuletypesListableRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { GeneratedAPIInstance } from 'api/generatedAPIInstance';
+
+const HOME_ALERT_RULES_LIMIT = 5;
+
+const FIRING_RULES_PARAMS: ListRulesV3Params = {
+	states: [RuletypesAlertStateDTO.firing],
+	limit: HOME_ALERT_RULES_LIMIT,
+};
+
+interface HomeAlertRules {
+	rules: RuletypesListableRuleDTO[];
+	isLoading: boolean;
+	isError: boolean;
+}
+
+export function useHomeAlertRules(): HomeAlertRules {
+	const firing = useListRulesV3(FIRING_RULES_PARAMS, {
+		query: {
+			cacheTime: 0,
+			// The backend binds repeated `states=` keys; axios' default sends `states[]=`.
+			queryFn: ({ signal }) =>
+				GeneratedAPIInstance<ListRulesV3200>({
+					url: '/api/v3/rules',
+					method: 'GET',
+					params: FIRING_RULES_PARAMS,
+					paramsSerializer: { indexes: null },
+					signal,
+				}),
+		},
+	});
+	const firingRules = firing.data?.data.rules;
+	const latest = useListRulesV3(
+		{ limit: HOME_ALERT_RULES_LIMIT },
+		{
+			query: {
+				cacheTime: 0,
+				enabled:
+					firingRules !== undefined && firingRules.length < HOME_ALERT_RULES_LIMIT,
+			},
+		},
+	);
+
+	const rules = useMemo(() => {
+		const firingIds = new Set(firingRules?.map(({ id }) => id));
+		const others = (latest.data?.data.rules ?? []).filter(
+			({ id }) => !firingIds.has(id),
+		);
+		return [...(firingRules ?? []), ...others].slice(0, HOME_ALERT_RULES_LIMIT);
+	}, [firingRules, latest.data]);
+
+	return {
+		rules,
+		isLoading: firing.isLoading || latest.isLoading,
+		isError: firing.isError || latest.isError,
+	};
+}

frontend/src/container/Home/__tests__/AlertRules.test.tsx

@@ -0,0 +1,119 @@
+import {
+	RuletypesAlertStateDTO,
+	type RuletypesRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { navigate } from 'lib/router/navigation';
+import {
+	alertRulesFixture,
+	listRulesV3Response,
+} from 'mocks-server/__mockdata__/alert_rules';
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import AlertRules from '../AlertRules/AlertRules';
+
+jest.mock('lib/router/navigation', () => ({
+	...jest.requireActual('lib/router/navigation'),
+	navigate: jest.fn(),
+}));
+
+const rule = (id: string, state: RuletypesAlertStateDTO): RuletypesRuleDTO => ({
+	...alertRulesFixture[0],
+	id,
+	alert: `${id} rule`,
+	state,
+});
+
+const burning = rule('burning', RuletypesAlertStateDTO.firing);
+const quiet = rule('quiet', RuletypesAlertStateDTO.inactive);
+const waiting = rule('waiting', RuletypesAlertStateDTO.pending);
+
+const serveRules = (
+	rules: RuletypesRuleDTO[],
+	rulesForLatest = rules,
+): string[] => {
+	const requestedStates: string[] = [];
+	server.use(
+		rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
+			const states = req.url.searchParams.getAll('states').join();
+			requestedStates.push(states);
+			return res(
+				ctx.status(200),
+				ctx.json(
+					listRulesV3Response(
+						states === 'firing' ? rules : rulesForLatest,
+						req.url.searchParams,
+					),
+				),
+			);
+		}),
+	);
+	return requestedStates;
+};
+
+const renderAlertRules = (): void => {
+	render(
+		<AlertRules
+			onUpdateChecklistDoneItem={jest.fn()}
+			loadingUserPreferences={false}
+		/>,
+	);
+};
+
+const renderedRuleIds = (): (string | undefined)[] =>
+	screen.getAllByTestId(/^home-alert-rule-/).map((row) => row.dataset.testid);
+
+describe('Home alert rules', () => {
+	it('lists firing rules first, then the latest others, and opens the clicked rule', async () => {
+		const requestedStates = serveRules([quiet, burning, waiting]);
+		renderAlertRules();
+
+		await expect(
+			screen.findByTestId('home-alert-rule-waiting'),
+		).resolves.toBeInTheDocument();
+		expect(renderedRuleIds()).toStrictEqual([
+			'home-alert-rule-burning',
+			'home-alert-rule-quiet',
+			'home-alert-rule-waiting',
+		]);
+		expect(requestedStates).toStrictEqual(['firing', '']);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		await user.click(screen.getByTestId('home-alert-rule-burning'));
+		expect(navigate).toHaveBeenCalledWith(
+			`${ROUTES.ALERT_OVERVIEW}?${QueryParams.ruleId}=burning`,
+		);
+	});
+
+	it('skips the latest rules request when 5 rules are firing', async () => {
+		const firing = Array.from({ length: 5 }, (_, index) =>
+			rule(`firing-${index}`, RuletypesAlertStateDTO.firing),
+		);
+		const requestedStates = serveRules([quiet, ...firing]);
+		renderAlertRules();
+
+		await expect(
+			screen.findByTestId('home-alert-rule-firing-4'),
+		).resolves.toBeInTheDocument();
+		expect(renderedRuleIds()).toStrictEqual(
+			firing.map(({ id }) => `home-alert-rule-${id}`),
+		);
+		expect(requestedStates).toStrictEqual(['firing']);
+	});
+
+	it('shows a rule once when it stops firing between the two requests', async () => {
+		const settled = { ...burning, state: RuletypesAlertStateDTO.inactive };
+		serveRules([burning], [settled, quiet]);
+		renderAlertRules();
+
+		await expect(
+			screen.findByTestId('home-alert-rule-quiet'),
+		).resolves.toBeInTheDocument();
+		expect(renderedRuleIds()).toStrictEqual([
+			'home-alert-rule-burning',
+			'home-alert-rule-quiet',
+		]);
+	});
+});

frontend/src/container/PlannedDowntime/PlannedDowntime.tsx

@@ -16,11 +16,11 @@ import {
 	useDeleteDowntimeScheduleByID,
 	useListDowntimeSchedules,
 } from 'api/generated/services/downtimeschedules';
-import { useListRules } from 'api/generated/services/rules';
 import type { AlertmanagertypesPlannedMaintenanceDTO } from 'api/generated/services/sigNoz.schemas';
 import { ColumnSelector } from 'components/TanStackTableView';
 import TextToolTip from 'components/TextToolTip';
 import dayjs from 'dayjs';
+import { useListAllRules } from 'hooks/alerts/useListAllRules';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -55,9 +55,7 @@ export function PlannedDowntime(): JSX.Element {
 		isError,
 		isLoading,
 		isFetching: isFetchingAlerts,
-	} = useListRules({
-		query: { cacheTime: 0 },
-	});
+	} = useListAllRules({ cacheTime: 0 });
 	const [isOpen, setIsOpen] = React.useState(false);
 	const [form] = Form.useForm();
 	const { user } = useAppContext();
@@ -73,7 +71,7 @@ export function PlannedDowntime(): JSX.Element {
 	const downtimeSchedules = useListDowntimeSchedules();
 	const alertOptions = React.useMemo(
 		() =>
-			alertsData?.data?.map((i) => ({
+			alertsData?.map((i) => ({
 				label: i.alert,
 				value: i.id,
 			})),
@@ -181,7 +179,7 @@ export function PlannedDowntime(): JSX.Element {
 	};
 
 	const refetchAllSchedules = (): void => {
-		downtimeSchedules.refetch();
+		void downtimeSchedules.refetch();
 	};
 
 	const {

frontend/src/container/PlannedDowntime/__test__/PlannedDowntime.test.tsx

@@ -4,6 +4,7 @@ import { fireEvent, screen } from '@testing-library/react';
 import type {
 	ListDowntimeSchedules200,
 	RenderErrorResponseDTO,
+	RuletypesListableRuleDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import {
 	AlertmanagertypesRepeatOnDTO,
@@ -126,19 +127,19 @@ jest.mock('api/generated/services/downtimeschedules', () => ({
 }));
 
 let mockRulesState: {
-	data?: { data: Array<{ id: number | string; alert: string }> };
+	data?: Pick<RuletypesListableRuleDTO, 'id' | 'alert'>[];
 	isError: boolean;
 	isLoading: boolean;
 	isFetching: boolean;
 } = {
-	data: { data: [] },
+	data: [],
 	isError: false,
 	isLoading: false,
 	isFetching: false,
 };
 
-jest.mock('api/generated/services/rules', () => ({
-	useListRules: (): typeof mockRulesState => mockRulesState,
+jest.mock('hooks/alerts/useListAllRules', () => ({
+	useListAllRules: (): typeof mockRulesState => mockRulesState,
 }));
 
 describe('PlannedDowntime Component', () => {
@@ -151,7 +152,7 @@ describe('PlannedDowntime Component', () => {
 		});
 		mockDowntimeQueryResult.data = MOCK_DOWNTIME_RESPONSE;
 		mockRulesState = {
-			data: { data: [] },
+			data: [],
 			isError: false,
 			isLoading: false,
 			isFetching: false,
@@ -362,7 +363,7 @@ describe('PlannedDowntime Component', () => {
 
 	it('shows "Unknown rule" when scoped rule IDs cannot be resolved (Bug 56)', async () => {
 		mockRulesState = {
-			data: { data: [] },
+			data: [],
 			isError: false,
 			isLoading: false,
 			isFetching: false,
@@ -387,14 +388,7 @@ describe('PlannedDowntime Component', () => {
 
 	it('shows resolved alert rule name when scoped rule ID exists', async () => {
 		mockRulesState = {
-			data: {
-				data: [
-					{
-						id: 'rule-42',
-						alert: 'Disk Space High',
-					} as any,
-				],
-			},
+			data: [{ id: 'rule-42', alert: 'Disk Space High' }],
 			isError: false,
 			isLoading: false,
 			isFetching: false,

frontend/src/hooks/alerts/__tests__/useListAllRules.test.tsx

@@ -0,0 +1,40 @@
+import {
+	alertRulesFixture,
+	listRulesV3Response,
+} from 'mocks-server/__mockdata__/alert_rules';
+import { rest, server } from 'mocks-server/server';
+import { AllTheProviders, renderHook, waitFor } from 'tests/test-utils';
+
+import { useListAllRules } from '../useListAllRules';
+
+const TOTAL = 250;
+
+const rules = Array.from({ length: TOTAL }, (_, index) => ({
+	...alertRulesFixture[0],
+	id: `rule-${index}`,
+	alert: `Rule ${index}`,
+}));
+
+describe('useListAllRules', () => {
+	it('fetches every page past the 200-rule cap', async () => {
+		const offsets: string[] = [];
+		server.use(
+			rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
+				offsets.push(req.url.searchParams.get('offset') ?? '');
+				return res(
+					ctx.status(200),
+					ctx.json(listRulesV3Response(rules, req.url.searchParams)),
+				);
+			}),
+		);
+
+		const { result } = renderHook(() => useListAllRules(), {
+			wrapper: AllTheProviders,
+		});
+
+		await waitFor(() => expect(result.current.isSuccess).toBe(true));
+		expect(result.current.data).toHaveLength(TOTAL);
+		expect(result.current.data?.[TOTAL - 1]?.id).toBe(`rule-${TOTAL - 1}`);
+		expect(offsets.sort()).toStrictEqual(['0', '200']);
+	});
+});

frontend/src/hooks/alerts/useListAllRules.ts

@@ -0,0 +1,40 @@
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import {
+	getListRulesV3QueryKey,
+	listRulesV3,
+} from 'api/generated/services/rules';
+import type { RuletypesListableRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import { range } from 'lodash-es';
+
+// The list API clamps any larger limit to 200.
+const PAGE_SIZE = 200;
+
+export const LIST_ALL_RULES_QUERY_KEY = [...getListRulesV3QueryKey(), 'all'];
+
+function fetchPage(offset: number): ReturnType<typeof listRulesV3> {
+	return listRulesV3({ limit: PAGE_SIZE, offset });
+}
+
+// TODO(AshwinBhatkal): temporary. Replace with server-side search plus a lookup of saved rules by ID once
+// /api/v3/rules can filter by IDs: https://github.com/SigNoz/pulse-pod/issues/715
+async function fetchAllRules(): Promise<RuletypesListableRuleDTO[]> {
+	const first = await fetchPage(0);
+	const rest = await Promise.all(
+		range(PAGE_SIZE, first.data.total, PAGE_SIZE).map(fetchPage),
+	);
+
+	return [...first.data.rules, ...rest.flatMap((page) => page.data.rules)];
+}
+
+export function useListAllRules(
+	options?: Omit<
+		UseQueryOptions<RuletypesListableRuleDTO[], Error>,
+		'queryKey' | 'queryFn'
+	>,
+): UseQueryResult<RuletypesListableRuleDTO[], Error> {
+	return useQuery<RuletypesListableRuleDTO[], Error>({
+		queryKey: LIST_ALL_RULES_QUERY_KEY,
+		queryFn: fetchAllRules,
+		...options,
+	});
+}

frontend/src/pages/AlertDetails/hooks.tsx

@@ -10,7 +10,7 @@ import {
 	getGetRuleByIDQueryKey,
 	getGetRuleHistoryTimelineQueryOptions,
 	invalidateGetRuleByID,
-	invalidateListRules,
+	invalidateListRulesV3,
 	updateRuleByID,
 	useGetRuleByID,
 	useGetRuleHistoryOverallStatus,
@@ -443,7 +443,7 @@ export const useAlertRuleClone = ({
 					message: `Success`,
 				});
 
-				await invalidateListRules(queryClient);
+				await invalidateListRulesV3(queryClient);
 
 				params.set(QueryParams.ruleId, response.data.id);
 				navigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
@@ -494,7 +494,7 @@ export const useAlertRuleUpdate = ({
 						data: { ...existingRule.data, alert: intermediateName },
 					});
 				}
-				void invalidateListRules(queryClient);
+				void invalidateListRulesV3(queryClient);
 				notifications.success({ message: 'Alert renamed successfully' });
 			},
 			onError: (error) => {

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

@@ -17,10 +17,8 @@ import {
 	FIRST_DOWNTIME_NAME,
 } from './__story_mockdata__/plannedDowntime';
 
-import {
-	alertRulesResponse,
-	RULE_MAX,
-} from '../../stories/__story_mockdata__/alerts';
+import { alertRulesPage } from '../../AlertRules/stories/__story_mockdata__/ruleViews';
+import { RULE_MAX } from '../../stories/__story_mockdata__/alerts';
 import { AlertListSubTabs, AlertListTabs } from '../../types';
 
 const LIST = 'Planned downtime · list';
@@ -86,18 +84,20 @@ export const plannedDowntimeMocks = defineStoryMocks({
 				res(ctx.status(200), ctx.json({ status: 'success', data: null })),
 		),
 
-		rest.get('http://localhost/api/v2/rules', (_req, res, ctx) =>
-			values.rulesState === 'error'
-				? res(ctx.status(500), ctx.json({ status: 'error' }))
-				: res(
-						ctx.json(
-							alertRulesResponse(values.silencedRules, {
-								severity: 'mixed',
-								state: 'mixed',
-							}),
-						),
+		rest.get('http://localhost/api/v3/rules', (req, res, ctx) => {
+			if (values.rulesState === 'error') {
+				return res(ctx.status(500), ctx.json({ status: 'error' }));
+			}
+			return res(
+				ctx.json(
+					alertRulesPage(
+						values.silencedRules,
+						{ severity: 'mixed', state: 'mixed' },
+						req.url.searchParams,
 					),
-		),
+				),
+			);
+		}),
 	],
 	config: () => ({
 		route: `/alerts?tab=${AlertListTabs.CONFIGURATION}&subTab=${AlertListSubTabs.PLANNED_DOWNTIME}`,

frontend/src/pages/HomePage/stories/HomePage.stories.mocks.tsx

@@ -3,6 +3,7 @@
  * Do not hand-edit: regenerate instead.
  */
 
+import { listRulesV3Response } from 'mocks-server/__mockdata__/alert_rules';
 import { rest } from 'msw';
 
 import {
@@ -156,11 +157,13 @@ export const homeMocks = defineStoryMocks({
 		),
 
 		rest.get(
-			'http://localhost/api/v2/rules',
-			response.json(() => ({
-				status: 'success',
-				data: buildAlertRules(values.alertRules),
-			})),
+			'http://localhost/api/v3/rules',
+			response.json((req) =>
+				listRulesV3Response(
+					buildAlertRules(values.alertRules),
+					req.url.searchParams,
+				),
+			),
 		),
 
 		rest.get(