Performance regression for big application on ArgoCD UI v2.7

[huynhsontung]

Describe the bug

After upgrading ArgoCD to v2.7, when opening big applications such as Crossplane with 900 CRDs in Tree view, the UI hangs for a long time. Once all the nodes are rendered, the UI is still non-responsive and every action has a big delay. This issue was not present in v2.6. I tested all the ArgoCD versions between the upgrade and it only seems to occur starting from v2.7.0-rc1

The issue goes away when I use the node grouping feature.

To Reproduce

• Install Crossplane with Upbound's AWS provider
• Open the Application that manages Crossplane

Expected behavior

UI should not hang or become unresponsive when opening big applications.

Screenshots

Profile of opening the application and then clicking the "App Details" button as soon as all the nodes are rendered.

Version

argocd: v2.7.5+a2430af.dirty
  BuildDate: 2023-06-16T14:35:08Z
  GitCommit: a2430af1c356b283e5e3fc5bde1f5e2b5199f258
  GitTreeState: dirty
  GoVersion: go1.19.10
  Compiler: gc
  Platform: linux/amd64

Update

This regression was likely due to a fix that properly populate all parentRefs for a resource (#11715). Each CRD in my application has 3 parents, and there are 900 CRDs. This overwhelms the browser when trying to render all the connections, which leads to non-responsive UI and hangs.

Potential solutions

• Staggered load the tree so that it updates incrementally without locking up the UI.
• Put a threshold to only render the first parent if a tree is too big.

[crenshaw-dev]

Whoever picks this up will probably have to run the development bundle of the UI so they get meaningful names on the flame graph.

[huynhsontung]

@crenshaw-dev Here it is in dev mode. layout() in this case correspond to this line: https://github.com/argoproj/argo-cd/blob/v2.7.5/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx#L1010

Looks like graph layout takes a lot more time now.

Only Chrome profiler is usable. React profiler hangs every time I navigate to the tree view. 🤷

[huynhsontung]

This issue does not occur when I run v2.7 UI on v2.6 server. Vice versa, when I run v2.6 UI on v2.7 server, I got the same problem. This seems more complicated than just a UI issue.

[crenshaw-dev]

That's wild... idk the profiler well. Does it include network-bound work? I'd be interested to see the network waterfall.

[blakepettersson]

Could you run a git bisect starting from 2.7-rc1 to attempt to narrow down what could cause this?

[crenshaw-dev]

@huynhsontung and I talked some yesterday. We suspect that https://github.com/argoproj/argo-cd/pull/11715 introduced the problem. This app has a lot of resources with a lot of parentRefs, and the UI is really struggling to render it. @huynhsontung has ideas on how to improve performance. I think the good news is that this will hit a relatively small subset of Applications.