[Synthetics] [ON Week] Refactor Synthetics Overview page for increased scalability

[justinkambic]

Summary

Resolves #183622.

This is part of some ON Week PoC work I did that introduces React Window and its Infinite Loader to the Synthetics Overview page.

Additionally, I have refactored the way that duration fetching is done for the overview cards; the fetching is now handled at a top-level and as-needed during the infinite scroll. This results in a page that is scrollable all the way to the end of very large amounts of monitors. The example deployment I'm using has about 900 monitors, and in the latest versions of Kibana this dataset causes the overview page to crash the tab.

[elasticmachine]

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

[obltmachine]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

[justinkambic]

It is good to keep this set to around 40+ ideally, because on most screens where there are enough for the chunk size to matter, the first 40-or-so monitors are getting rendered. After we switched to using msearch this seems to be no issue from a perf perspective.

[shahzad31]

On scrolling first page, it starts showing the footer , which says Showing All monitors , i think that should be visible when user is end of scroll !!

[shahzad31]

on initial load, there is some hidden text behind first card

[shahzad31]

LGTM !!

Besides some ux concerns which should be addressed !!

[justinkambic]

On scrolling first page, it starts showing the footer , which says Showing All monitors , i think that should be visible when user is end of scroll !!

20551af

[justinkambic]

on initial load, there is some hidden text behind first card

Well-spotted. This is another product of us unconditionally rendering the footer. I've added an extra logic gate to rendering that component, now it should not show up during load.

5b3b506

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 5b3b506
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-187092-5b3b5064abed

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
synthetics	1023	1022	-1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
synthetics	938.8KB	965.2KB	+26.4KB

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
synthetics	64	63	-1

Total ESLint disabled count

id	before	after	diff
synthetics	70	69	-1

History

• 💛 Build #231937 was flaky 8613f37
• 💚 Build #231769 succeeded bb31242
• 💔 Build #231276 failed c70bb71643ac1b6500ef4b59a7a87d0192ce87a8
• 💛 Build #231263 was flaky caa541a94656904b8556edd50eceb101eb54baf7
• 💔 Build #230897 failed cfed01037fa6342bff94a60cee7fd3fb57854370

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @justinkambic