Page performance issues with large number of domains & subnets

With few thousands of subnets and domains, some pages in Foreman takes a lot of time to render.
After some investigation I found that the problem is JS functions for multi-select component, where the functions goes over all the records and format them for the multi-select component, which blocks rendering of page in browser and user see only white page with no content.

Steps to reproduce:

  • Create lots of domains with (run this with params “100 200”)
  • Go to Administration > Locations > Edit location
  • Go to Infrastructure > Subnets > edit subnet

Cause of problem



How to fix it?

  • My first idea was to load data with ajax after page is loaded, then format them. But when I found that the issue is not on backend side but on frontend, this solution doesn’t solve anything.
  • I’ve been also thinking about something like “lazy-load” tab panel, in which case the data would have been downloaded from backend, but parsed by JS AFTER user clicks on tab and display it’s content.

Either way I’m not sure about the best approach / solution how to fix this issue, does anybody have some ideas how to solve this issue?

thanks for troubleshooting, I believe you are hitting Bug #24907: Page performance issues when there is a large number subnets - Foreman

I think the way to solve this is using a UI component such as the breadcrumb switcher, where it loads only parts of the results and allow you to search with auto complete instead of showing the entire dropdown… /cc @ui_ux?

I like what @ohadlevy suggested, we should load first ~20 records and say there’s more and let people search for what they wan’t to assign/remove. Either through search box or by navigating through pages. Usually the first case is easier.

I believe @ezr-ondrej was thinking about the same when we discussed unifying the ansible role switcher and multiple select components, today the ansible role switcher should work with huge amount of records but I think it had other limitations. Any more thoughts @ezr-ondrej?

If you want to take a look how the ansible role switcher works, install the ansible plugin, import (create/fake) thousand of ansible roles and go to host edit form. Under the ansible tab, you’ll see the switcher. @Ondrej_Prazak worked on that component, so you may want to check with him, if it’s easy to reuse for all resources in org/loc edit form.

Sorry to be late to the party, but yeah, I was thinking to do so and there is even an component DualListSelector kind of ready for that in patternfly as you’ve probably already figured through the PR. I’d love to switch all our use-cases to that component, but it’s missing some bits.
I was digging into it already, but it was my early react days, now I have far better idea what needs to be done and even some code ready, I can try to help with implementation, do not hesitate to ping me if you’re unsure :slight_smile:

Yeah I already created PR for this, but it’s just first phase to add DualList to code base, make it work along with multi-select and fix the bug #24907.

In next phases we want to improve DualListSelector (like adding item by just one click and so on) and replace multi-select everywhere.

I was digging into it already, but it was my early react days, now I have far better idea what needs to be done and even some code ready

Feel free to share! :slight_smile: