Details with Resource Groups report doesn't scale

[ansoni]

trafficstars

Hello, It appears that angularjs select element does not scale very well with a large number of Resource Groups. We have over 45000 and the rendering of Resource Groups takes 40 minutes on Safari, a super long time in Chrome and surprisingly 10 seconds in Firefox:-/

Doing research, it appears that angularjs's 2 way data bindings have an incremental penalty and really hurt after 2000 or so bindings. I do not see an easy way around this without re-implementing the multiselect box population/filter functions.

Thanks,

Anthony

[nfonrose]

Hi Anthony,

We are also facing this problem (some of our customers have crazy long lists of resourcesgroups) and we were trying to find a solution without re-implementing the UI element itself.

Here is one "hack" we had in mind :

• have a separate, non binded list with all the values
• another one with the filtered result, also not binded
• and a third one, binded to the UI element, in which we will copy only the first 1000 elements (or any value that is compatible with the incredible slowness of the multiselect box) every time the list or filter box refreshes

Every time the list reflects only a part of the filtered results, we introduce a special "(filtered list)" element (exact label of this element TBD). When it is selected, it means the user wants to select all the list items, including the hidden ones.

One drawback of this solution is that the scroller size/position will not really reflect the total real size of the filtered list. But it doesn't look like a serious problem. And scrolling through long lists of items is not very useful anyway.

I do not see an easy way around this without re-implementing the multiselect box population/filter functions.

How would you plan to do this ? Maybe this is easier than the solution we have in mind. Is the solution you're describing very different from the one we have in mind ?

Nicolas Fonrose | Teevity | Founder +33.6.61.35.43.31 http://www.teevity.com - Cloud Costs Analytics built on NetflixOSS for AWS, Azure, Google Cloud and Openstack twitter - @nfonrose / @teevity

On Thu, Jul 17, 2014 at 5:18 AM, Anthony [email protected] wrote:

Hello, It appears that angularjs select element does not scale very well with a large number of Resource Groups. We have over 45000 and the rendering of Resource Groups takes 40 minutes on Safari, a super long time in Chrome and surprisingly 10 seconds in Firefox:-/

Doing research, it appears that angularjs's 2 way data bindings have an incremental penalty and really hurt after 2000 or so bindings. I do not see an easy way around this without re-implementing the multiselect box population/filter functions.

Thanks,

Anthony

— Reply to this email directly or view it on GitHub https://github.com/Netflix/ice/issues/114.

[ansoni]

Hi Nicolas, I'm actually avoiding any code changes around this for now because I can force my users to use Firefox. I was going to modify the getResourceGroups ice.js function to populate the DOM directly and then create a filter method using pure jQuery instead of angular. 45,000 elements isn't that big and Firefox's results show that they can be iterated quickly without the toolkit overhead.

Your idea sounds good as well. I was thinking of changing the contents of the select box as the user scrolled using scrolling events, but I think this would be very odd for the user doing the scrolling.

That is about all I have put into this issue. Happy to test your solutions:-)

Thanks,

Anthony