Interactive guide for registering agents

[jesusgn90]

Hi team,

This issue is the second part of #1320 that unfortunately was not finished properly and we must complete it before 3.10.

Description

Give the user a new component where he can fill a simple (and dynamic) form and the app tells you how to install the agent with just a copy & paste commands from a dynamic box.

We must use the new syntax for auto-deployment that the @wazuh/cicd team implemented for the users, an example can be found here https://documentation.wazuh.com/current/installation-guide/installing-wazuh-agent/wazuh_agent_linux_rpm.html#installing-wazuh-agent

Proposal

Create a new React component that we can use where we want in the Wazuh app. The agents preview must know if there are no agents, then show it by default. If there are agents, it should show a link or a button that enables this component.

We must cover at least the most common agent types: RPM, DEB, Windows and MacOS.

[juankaromo]

Update

Today I started to implement a react component to migrate the first iteration of the agent registration process, which was implemented as a directive.

I've been learning how to implement the react components, and I've made a first approximation, which looks like this:

[juankaromo]

Update

Today I have continued to improve my react knowledge, and I have advanced almost finishing the issue.

I found this problem during the morning as I navigated through the component:

It turned out to be due to the syntax of how the installation instructions showed conditionally.

Wrong behavior

 if (this.state.selectedOS === 'win') {
      guide = (
        <div>
          <EuiText>
            <p>Deploy the installation</p>
            <EuiCodeBlock language="js">
              {winText}
        </EuiCodeBlock>
          </EuiText>
        </div>
      );
    } else if (this.state.selectedOS === 'macos') {
      guide = (
        <div>
          <EuiText>
            <p>Deploy the installation</p>
            <EuiCodeBlock language="js">
              {macosText}
            </EuiCodeBlock>
          </EuiText>
        </div>
      );
    }

Good behavior

        {this.state.selectedOS === 'win' ? (
          <EuiText>
            <p>Deploy the installation</p>
            <EuiCodeBlock language="js">
              {winText}
        </EuiCodeBlock>
          </EuiText>
        ) : (<EuiFlexItem />)}
        {this.state.selectedOS === 'macos' ? (
          <EuiText>
            <p>Deploy the installation</p>
            <EuiCodeBlock language="js">
              {macosText}
            </EuiCodeBlock>
          </EuiText>
        ) : (<EuiFlexItem />)}

Finally this is the aspect that is currently almost finished. I still have to make the button to copy the code in the EuiCodeBlock works.

[juankaromo]

Update

I implemented de copy function in this way:

https://github.com/wazuh/wazuh-kibana-app/blob/d7939e902365ac51e05a2df57281e0f12aee182e/public/components/register-agents.js#L24-L31

Now, the last point remaining is how to manage the no-agents scenario. We need to avoid this flick while it's searching agents and finally, there are not any agents yet:

[juankaromo]

Update

The flick on the component shown has been fixed checking if the lastAgent is not empty (API call), instead of checking if the agents search result is empty (Elasticsearch query).

On the other hand, the copy method that had implemented yesterday has been replaced by the EuiCopy eui native component.

[juankaromo]

Update

Today I did some refactoring on the render method of the component, doing the load of the guide steps cleaner and less repetitive. I use a loop with dynamic fields name to get the titles and content text of every step (for the selected OS). This snippet shows it:

https://github.com/wazuh/wazuh-kibana-app/blob/193f2a967e020768f2e46cd0dcd525f534054457/public/controllers/agent/components/register-agent.js#L106-L131

[jesusgn90]

#1504 (comment)

[jesusgn90]

#1504 (review)

[juankaromo]

Update

I've changed the multi instructions in every OS to leaving only the installation command.