Granular options for agent configuration reports

[jesusgn90]

In #1340 we've created a new kind of reports for the Wazuh app, the agent configuration reports, with this ticket we are improving this new feature.

When the user clicks the PDF button, we want to show a dropdown with the one check per component, this way the user can customize the report.

Example:

I want a document where I can see the FIM configuration for the agent 003.

Something like this:

Related EUI components:

• https://elastic.github.io/eui/#/layout/popover
• https://elastic.github.io/eui/#/forms/selectable
• https://elastic.github.io/eui/#/navigation/button

[juankaromo]

Update

I have been having problems to load a list of options in the selectable, cause when I instantiate the options list in the state (how is explained in eui docs), in this way:

    this.state = {
      options: ['option1', 'option2', 'option3'] as Option[],
      isPopoverOpen: false,
    };

I get the next error:

'type assertion expressions' can only be used in a .ts file. [import Option]

[juankaromo]

Update 10/06

Front-end

After being researching how to import EuiSelectable, I realized that the version of eui that Kibana uses doesn't support it. At this point, I decided to implement by myself a selectable-like component using EuiCheckboxGroup.

I've splitted the list of options according to the type of configuration we want to export; if we want to export an Agent configuration, the list of options is the list of possible components and modules that one agent could have. 44d85f8 This is shown below:

On the other hand, if we want to export a Group configuration, the options are two; the possibility of export the configuration with their filters, or the possibility to export the list of agents in the group. 33c76fe This is shown below:

When we clicked on Generate PDF report, the Popover disappears, and a load ring appears in the button place, avoiding the user to clicking again.

It is missing to introduce a button that allows the user to easily select or deselect all the elements of the list.

Back-end

We have had to adapt the report generation modules to disable the requests and rendering of the components if they have been marked as not to show.

[juankaromo]

Update

Select all and unselect all buttons have been added to the component 8e23e2a. This is shown below:

[juankaromo]

Update

Generate PDF report button now is disabled if any component/module in the list is checked, with the aim of not export empty reports. 44a79a9

[juankaromo]

Update

The component selector to export now takes into account those components or modules that are not supported by the operating system of the agent and hides them from the list preventing the user to select them, because they will not appear in the report because they are not configurable for that agent.

e.g:

[juankaromo]

Update

The importable object that represents the compatibility matrix and through which extensions compatible with the agent's operating system are hidden or shown has been modified (by @jesusgn90 suggestion) by exchanging the values (before components) for the operating systems, and the values for the components (before operating systems).

Now it looks like this:

export const UnsupportedComponents = {
  'linux': [],
  'windows': ['audit', 'oscap', 'vuls', 'docker'],
  'darwin': ['audit', 'oscap', 'vuls', 'docker'],
  'other': ['audit', 'oscap', 'vuls', 'docker']
};