prometheus: React UI: Alerts page stuck loading (100% CPU usage)

What did you do?

Open the Alerts page.

What did you expect to see?

The list of Alerts.

What did you see instead? Under which circumstances?

The page is stuck, showing the loading spinner, but never displaying any content. At the same time it uses 100% CPU (tested with Chrome/Firefox/Edge). No relevant logs are displayed in the browser’s console, even though the data has been fetched successfully from the API endpoint (after a few seconds).

On the other end, using the classic UI, albeit slowly (50s total), the Alerts page loads just fine.

Note: there are quite a few alerts (almost 13k).

Environment

• System information:

Linux 5.4.0-1036-azure x86_64

• Prometheus version:

prometheus, version 2.24.0 (branch: HEAD, revision: 02e92236a8bad3503ff5eec3e04ac205a3b8e4fe) build user: root@d9f90f0b1f76 build date: 20210106-13:48:37 go version: go1.15.6 platform: linux/amd64

• Alertmanager version:

Not relevant

• Prometheus configuration file:

The full config is quite big (especially the rules with the alerts). I can share it on demand, hopefully only a few sections are relevant. Perhaps the Alerts API output is more useful.

• Alertmanager configuration file:

Not relevant

• Logs:

Nothing relevant is displayed. From the browser it just hangs at:

VM9:1 Fetch finished loading: GET "https://<URL>/prometheus/api/v1/rules?type=alert"