The agents dashboard is displayed when using the Add agent button from plugin home

Desvelao commented 9 months ago

Description The agents dashboard is displayed when using the Add agent button from the Modules directory section for a little period of time.

Preconditions

No registered agents

Steps to reproduce

Navigate to Modules directory
Click on Add agent button

Expected Result The displayed view should be what we want to navigate to instead of this redirection behavior.

Evidences https://github.com/wazuh/wazuh-dashboard-plugins/assets/34042064/69c6d5de-37f0-4a54-8dcd-e488bbd1c11c

lucianogorza commented 9 months ago

Current behavior

The component OverviewWelcome (plugins/wazuh/public/components/common/welcome/overview-welcome.js) has a button that is renderer only when there is no registered agents. The button has a href to the page #/agents-preview

The page #/agents-preview is renderer by the template plugins/wazuh/public/templates/agents-prev/agents-prev.html. This template uses the agentsPreviewController controller.

At the end of the template, we can see that the React component RegisterAgent is rendered (ng-if) only if the addingNewAgent controller value is true, and another component, AgentsPreview, is rendered but only displayed (ng-how) if the addingNewAgent value is false. Therefore, the AgentsPreview component is always rendered.

Why is it necessary to always render the `AgentsPreview` component?

The component is responsible for retrieving and updating general information about the agents through the tableProps.updateSummary function obtained in the props.

The updateSummary function is declared in the controller and it updates the value of addingNewAgent, which determines whether the RegisterAgent component is rendered or not.

Therefore, when the page #/agents-preview is initially loaded, the AgentsPreview component is first rendered and displayed. If there are no registered agents, the AgentsPreview component stops being displayed, and the RegisterAgent component is rendered.

Possible solutions

Solution 1:

Retrieve general information about the agents in the controller so that the addingNewAgent value is set before rendering the components.
Pass the retrieved information to the components through props and remove the parts where this information is retrieved in the components.
Additionally, the ng-show option in the HTML template for the AgentsPreview component should be modified to ng-if.

Solution 2:

In AgentsPreview component return a loading while summary data is being retrieved.
In AgentsPreview component add a condition and only return the dashboard and table if agent count > 0.
In AgentsPreview controller in the RegisterAgent component replace ng-if with ng-show.

One must analyze what impact the changes may have on other use cases.

lucianogorza commented 9 months ago

In a meeting with @asteriscos we decided to go for solution 2

wazuh / wazuh-dashboard-plugins