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 create_lots_of_subnets.sh (run this with params “100 200”)
  • Go to Administration > Locations > Edit location
  • Go to Infrastructure > Subnets > edit subnet

Cause of problem

app/assets/javascripts/jquery.multi-select.js
multiSelectOnLoad()
multiSelectToolTips()

app/assets/javascripts/taxonomy_edit.js
ignore_checked()

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.