Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
METRON-2272: [UI] Performance: Switching manual filtering on and off multiple times leads slow typing #1524
Link to the original Jira ticket: https://issues.apache.org/jira/browse/METRON-2272
Every time we instantiate an ace editor instance on an angular component, it immediately forces angular to re-render the entire application very frequently (every 300-500 ms). For the first time, it's not that noticeable but after a while it can be annoying because it leads to performance issues and when you type something an ace editor input, it's gonna be really slow.
The performance slowdown is even more noticeable when you change between manual and normal query mode many times (This is how we have caught it).
Under the hood the frequent updates make Angular's zone manager very busy because it forces it to do a lot of dirty checking. To be fair it really is an issue only in development mode when dirty checking require more resource consumption.
Checkout the latest master branch and open the Alerts UI. Go to the
As a bonus I also destroy the ace instances when angular is about to detach the component from the DOM. My assumption is that we could achieve even bigger performance boost if we convert our ace editor directive to a component and change the changeDetection strategy to onPush. I didn't want to do that in this PR in order to make the review process easier.
Pull Request Checklist
Thank you for submitting a contribution to Apache Metron.
In order to streamline the review of the contribution we ask you follow these guidelines and ask you to double check the following:
For all changes:
For code changes:
For documentation related changes:
Please ensure that once the PR is submitted, you check travis-ci for build issues and submit an update to your PR as soon as possible.
+1. Tested with Full Dev. This is a great catch, and I'm fully on-board with converting the ace editor directive to a component in the future to utilize onPush. In fact, I think a lot of our components could eventually be changed to onPush to improve performance, but I might be getting a little ahead of myself here.