[Synthetics] Overview page performance issues with large number of monitors

[mykolaharmash]

An issue was raised in this SDH that Overview page with 80 monitors becomes slow and unresponsive during auto-updates.

Profiling showed that every page render takes ~5 seconds and blocks the main thread.

Looking at the code, I did not find any specific bottleneck, like a particularly slow component or helper function, but I've noticed that the whole <OverviewPage> component also re-renders every time a child monitor component <OverviewGridItem> gets rendered, which for a page with 80 monitors results in ~100 re-renders of the whole page. And this seems to be the core issue.

Redux global store might be one of the issues here as <OverviewGridItem> and a few other nested components and hooks call Redux dispatch() while rendering which causes the change in the global state and triggers the whole page re-render. We might need to re-think the store architecture and isolate state to nested components in some cases to improve performance.

Another way to mitigate the issue a bit could be to use useTransition hook to make the UI more responsive during state updates, but that hook is part of React 18 and Kibana is currently on 17.

[nerophon]

A relevant user report:

We pushed around 3200 monitors to our production cluster (2600 to one space, rest across other spaces).

When accessing the space with 2600 monitors on google chrome, at some points the webpage became unresponsive and the elastic tabs had to be closed and re-opened. The tab might become unresponsive (but not actually display the unresponsive sign, it will just hang or just become a grey tab with nothing to show) before you are able to add a tag or search term to filter the UI and stop the lagginess. Microsoft Edge seemed to handle it a little bit better. We had an issue with pending monitors (leading onto the below issue), and during this the UI responsiveness seemed to get much worse. When we resolved the pending monitors, the responsiveness improved a little.

I can recreate a bad page hang by going onto 1 tab with 2600 monitors in a space, scroll down a little to get some to load. If i really want to force it, open another tab onto a space with 1300 monitors, and things start getting really slow. Seems like some optimisation is needed, but also some sort of pagination to improve the UX? Rather than load as you scroll.

[elasticmachine]

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)