ui: Alerts page uses excessive CPU and memory with a lot of rule groups

[ibakshay]

Thanos, Prometheus and Golang version used:

Thanos version: 0.41.0
Revision: cb1396b916241f63fff75e4f5362ea65f18f2303
Branch: HEAD
Build date: 20260212-10:13:06
Go version: go1.25.7
Prometheus version: 3.11.2

Object Storage Provider:

Not relevant. The problem occurs on the Thanos Query Alerts UI and Rules API.

What happened:

The Thanos Query /alerts page becomes CPU and memory bound when the Rules API returns thousands of rule groups.

In the measured environment, /api/v1/rules?type=alert normally completed in about one second. After receiving the response, Chrome remained
CPU-saturated for more than 40 seconds while processing and rendering the page.

The API response contained:

Measurement	Value
Rule groups	3,402
Alerting rules	14,758
Inactive rules	13,677
Firing rules	1,002
Pending rules	79
Active alert instances	3,024
Uncompressed JSON	Approximately 19 MB
Gzip transfer	Approximately 1.65 MB

Browser measurements

Measurement	Result
Page load event	367 ms
Rules API completion	Approximately 1.05 s
Renderer CPU time after 40 seconds	43.66 CPU seconds
JavaScript execution time	38.58 s
Total task time	43.74 s
JavaScript heap used	Approximately 974 MB
Main renderer resident memory	Approximately 2.10 GiB
JavaScript event listeners	46,113

The API request completed successfully with HTTP 200. Most of the delay occurred in the browser after the response was received.

Inspection of the JavaScript bundle showed that the Alerts page:

1. Maps over every returned rule group.
2. Creates an infinite-scroll component for each group.
3. Applies the 50-rule limit separately to each group.
4. Creates individual rule and expandable detail components for those rules.

What you expected to happen:

The Alerts page should remain responsive when the Rules API returns thousands of groups and rules.

How to reproduce it (as minimally and precisely as possible):

1. Run Thanos Query connected to enough rule sources for /api/v1/rules?type=alert to return several thousand groups.
2. Open the Thanos Query /alerts page in your browser.
3. Open Chrome DevTools and record a Performance trace.
4. Observe when /api/v1/rules?type=alert finishes.
5. Observe that the renderer continues consuming a full CPU core after the API request has completed.
6. Inspect JavaScript execution time, heap usage, and renderer memory.

Anything else we need to know:

The tested browser is chrome.

This issue appears to be related to #5251