elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.48k stars 8.04k forks source link

[Security Solution][Detection Engine] improve rule creation/edit form performance #183475

Open vitaliidm opened 1 month ago

vitaliidm commented 1 month ago

Currently, on rule creation form, when any of the fields change value, the whole form is getting re-rendered. Even fields, that are not displayed and non-existent of some of the rule types.

For example, here is a rendering profile from custom query rule. It was triggered by typing a single letter in query input:

Screenshot 2024-05-15 at 09 46 31

Out of 19ms of re-rendering:

5ms - re-rendering of ML related components: job selector and anomaly slider 4ms - indicator match rule components 2ms - threshold rule components

In total, more than half of rendering time is spent on components that will never be shown and do not have any effect on the rule.

As far as I understand, initially these components were hidden, so on rule creation user can switch between rule types and earlier selected/typed input would be preserved. But, it's not a case on edit page, these fields would never be shown. Yet, they consume sizeable chunk of rendering time.

Ideally, we should:

  1. Not render components, that are not shown (easy win for edit page)
  2. Find a way to prevent all components re-render on changing unrelated to them form fields. This might be more complex, any change in form, trigger re-render for child components that are using form hooks
elasticmachine commented 1 month ago

Pinging @elastic/security-detection-engine (Team:Detection Engine)

elasticmachine commented 1 month ago

Pinging @elastic/security-solution (Team: SecuritySolution)