TypeError: cannot read properties of undefined on the main Agents view

[AlexRuiz7]

Wazuh	Elastic	Rev	Security
4.x	7.x	4xxx	Basic, ODFE, Xpack

Browser
Chrome, Firefox, Safari, etc

Description
On the Agent view, the navigation to the Inventory Data throws an error only when the Agent view has been previously resized.

Steps to reproduce

1. Navigate to an Agent's view.
2. Resize your browser's window.
3. Open the browser's console.
4. Navigate to the Inventory Data section.
5. See the error.

Screenshots

[AlexRuiz7]

Also, on the Inventory Data view, the Agent's name (Ubuntu in this case) becomes a link to the previous view, but it is not colored as a link (should be on a light blue color instead of black).

On hover, the text is shown as a link, but it's hard to guess at first that it's a link. In order to improve the UI/UX, this text should be colored properly, as the rest of the links on the App, and/or add a back arrow ◀️ <.

Link's appearance on its common state and on hover:

[chantal-kelm]

Debugging I saw that the error occurs inside a function called myRender. I got to see that myRender is called only from the updateVis function and that function is called from:

• The component Will unmount which is when the component is unmounted

• And the componentdidupdate which is when the component is updated.

I saw that updateVis executes 2 functions renderComplete and myRender, and what is happening is that when it is executed from the WillUnmount, the updateVis function executes myRender and myRender since it is asynchronous, it passes to the callStack and what is synchronous continues to be executed.
The WillUnmount component then executes the destroyAll function, what destroyAll does is set visHandler to null.
When it finishes doing the synchronous thing, it will do the asynchronous function, this asynchronous function searches inside visHandler but since destroyAll set visHandler to null, it shows the error in the console.
Commenting out the updateVis function inside WillUnmount fixes the problem.
I do not see the need for myRender to be executed when the component is unmounted, but it is necessary for the renderComplete function to be executed.
So what I propose as a solution that does not interfere with the current logic is to add the renderComplete function inside the WillUnmount component.

[AlexRuiz7]

Thanks for the report.

We could schedule a meeting to discuss your proposal.

[Desvelao]

Research

The error appears when the visHandler.render method is called with a not found DOM node, because the view changed to the Inventory data.

The visHandler.render method is called in the myRender component method and this by updateVis component method.

this.updateVis > ? this.myRender > ? visHandler.render

The updateVis component method is currently called when the component was updated or unmounted and in my opinion, this doesn't have sense because the visualization should be only built when the component is mounted. The current logic causes indirectly the error when it complies with some conditions. In the myRender component method, there is a condition that controls when the visualization should be created and use the visHandler.render method to render it, but this condition is checked when the component is updated or will unmount. The error is caused when the KibanaVis component is unmounted and the visualization was not created, it calls to updateVis > myRender, surpasses the condition, and tries to build the visualization because it wasn't built previously. The method visHandler.render fails because the selected DOM node is not present in the current view for that moment, that is Inventory data section. Moreover, this case does that the visualization is not visible in the panel.

On the other hand, as @chantal-kelm said, it seems that it doesn't have sense to update the visualization when the component is going to be unmounted. We should review if there is something that is required to do before unmounting the component.

[chantal-kelm]

As mentioned above the component's updateVis() method is called in the componentWillUnmount and executes two methods. One of the methods it executes is myRender which has been determined to not need to be called when the component is unmounted. The other method it executes is renderComplete which, together with my colleague @Desvelao , we investigated if it was necessary to execute or not when the component is unmounted, and in the case of confirming that it was not necessary, we could already eliminate the updateVis() of the componentWillUnmount.
As we saw that this investigation was going to take a lot of time, which we don't have now, we decided to implement the solution proposed in the first comment, which is to remove the updateVis() method that executes myRender and renderComplete from within the componentWillUnmount and execute the renderComplete method within the componentWillUnmount.
It would be good to continue investigating if it is necessary for the renderComplete() to be in the componentWillUnmount. In the renderComplete() the value of the $rootScope is changed, which affects the entire application.

Video where you see the error solved:
https://user-images.githubusercontent.com/99441266/172658878-3eb21f0c-61d8-410a-a6f3-862d96fdf923.mp4

[AlexRuiz7]

Related to this issue, React clearly doesn't like our code.