Implement embeddable dashboard on Malware Detection module

[yenienserrano]

Description

This pull request replaces the Dashboard tab on Malware Detection application.

Issues Resolved

#6520

Evidence

Test

Global

Test	Chrome	Firefox	Safari
Check data results consistency between events and dashboard tab	⚫	⚫	⚫
Check the filters persist between the events and dashboard tab	⚫	⚫	⚫
Check the filters are cleaned when throwing in the events tab	⚫	⚫	⚫
Check cluster-manager filter on tabs. Must be applied when the tab is shown (all tabs)	⚫	⚫	⚫
Check pinned agent filter on tabs	⚫	⚫	⚫
Check the request with hidden filters applied (allow agents, hide manager alerts)	⚫	⚫	⚫
Check the fixer filter cannot be removed from the filter bar (the remove icon is hidden)	⚫	⚫	⚫

• Check data results consistency between events and dashboard tab

• Check the filters persist between the events and dashboard tab

• Check the filters are cleaned when throwing in the events tab

• Check cluster-manager filter on tabs. Must be applied when the tab is shown (all tabs)

• Check pinned agent filter on tabs

• Check the request with hidden filters applied (allow agents, hide manager alerts)

Enable/disable the hideManagerAlerts settings on App Settings

• Check the fixed filter cannot be removed from the filter bar

Dashboard tab

Test	Chrome	Firefox	Safari
Use search bar input to filter any word and check if the dashboard shows the corresponding results	⚫	⚫	⚫
Select an option from one of the recommended filters and check that the corresponding filter is added and the dashboard changes according to the applied filter	⚫	⚫	⚫
Add a filter through interaction with a visualization and check that the dashboard updates	⚫	⚫	⚫
Use the input and type an incorrect word to check if the no results message is shown	⚫	⚫	⚫

• Use search bar input to filter any word and check if the dashboard shows the corresponding results

• Select an option from one of the recommended filters and check that the corresponding filter is added and the dashboard changes according to the applied filter

• Add a filter through interaction with a visualization and check that the dashboard updates

• Use the input and type an incorrect word to check if the no results message is shown

Events tab (Discover)

Search bar

Test	Chrome	Firefox	Safari
Apply filters using search bar input	⚫	⚫	⚫
Apply filters using the search bar add filter feature	⚫	⚫	⚫
Apply filters using the date picker	⚫	⚫	⚫
Apply filters with no results (Check the No results match your search criteria message)	⚫	⚫	⚫
Use the saved queries feature (Check saved queries CRUD)	⚫	⚫	⚫

• Apply filters using search bar input

• Apply filters using the search bar add filter feature

• Apply filters using the date picker

• Apply filters with no results (Check the No results match your search criteria message)

• Use the saved queries feature (Check saved queries CRUD)

Histogram chart

Test	Chrome	Firefox	Safari
Check histogram chart hits consistency	⚫	⚫	⚫
Use chart options (three points: maximize, minimize, inspect)	⚫	⚫	⚫

• Check histogram chart hits consistency

• Use chart options (three points: maximize, minimize, inspect)

Data grid

Test	Chrome	Firefox	Safari
Check all table header features (sort, show/hide columns, density, etc)	⚫	⚫	⚫
Check table pagination and rows per page	⚫	⚫	⚫
Check document detail flyout	⚫	⚫	⚫

• Check all table header features (sort, show/hide columns, density, etc)

• Check table pagination and rows per page

• Check document detail flyout

Check List

• All tests pass
  • yarn test:jest
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[github-actions]

Wazuh Core plugin code coverage (Jest) test	%	values
Statements	45.37%	( 397 / 875 )
Branches	41.31%	( 157 / 380 )
Functions	43.83%	( 135 / 308 )
Lines	45.61%	( 395 / 866 )

[github-actions]

Wazuh Check Updates plugin code coverage (Jest) test	%	values
Statements	76.44%	( 172 / 225 )
Branches	58.65%	( 61 / 104 )
Functions	61.7%	( 29 / 47 )
Lines	76.44%	( 172 / 225 )

[github-actions]

Main plugin code coverage (Jest) test	%	values
Statements	10.81%	( 3753 / 34708 )
Branches	7.27%	( 1653 / 22731 )
Functions	10.51%	( 870 / 8277 )
Lines	10.96%	( 3647 / 33265 )

[lucianogorza]

Test 🟡

Global

Test	Chrome	Firefox	Safari
Check data results consistency between events and dashboard tab	🟡	⚫	⚫
Check the filters persist between the events and dashboard tab	🟢	⚫	⚫
Check the filters are cleaned when throwing in the events tab	🟢	⚫	⚫
Check cluster-manager filter on tabs. Must be applied when the tab is shown (all tabs)	🟢	⚫	⚫
Check pinned agent filter on tabs	🟢	⚫	⚫
Check the request with hidden filters applied (allow agents, hide manager alerts)	🟢	⚫	⚫
Check the fixer filter cannot be removed from the filter bar (the remove icon is hidden)	🟡	⚫	⚫

• Check data results consistency between events and dashboard tab 🟡

Inconsistent data in Dashboard table

In the Dashboard tab, the table shows only 4 records, while the Inventory tab has 357.

Inconsistent chart and axis titles

• Check the filters persist between the events and dashboard tab 🟢

• Check the filters are cleaned when throwing in the events tab 🟢

• Check cluster-manager filter on tabs. Must be applied when the tab is shown (all tabs) 🟢

Manager

Cluster

• Check pinned agent filter on tabs 🟢

• Check the request with hidden filters applied (allow agents, hide manager alerts) 🟢

Enable/disable the hideManagerAlerts settings on App Settings

Hide manager alerts: off

Hide manager alerts: on

• Check the fixed filter cannot be removed from the filter bar 🟡

The filters can't be removed when navigate from another page 🟢

The filters can be removed after refresh the entire page 🟡

Dashboard tab

Test	Chrome	Firefox	Safari
Use search bar input to filter any word and check if the dashboard shows the corresponding results	🟡	⚫	⚫
Select an option from one of the recommended filters and check that the corresponding filter is added and the dashboard changes according to the applied filter	🟢	⚫	⚫
Add a filter through interaction with a visualization and check that the dashboard updates	🟢	⚫	⚫
Use the input and type an incorrect word to check if the no results message is shown	🟢	⚫	⚫

• Use search bar input to filter any word and check if the dashboard shows the corresponding results 🟡

With the term "windows" the Dashboard doesn't show any data

But with "Windows" it does show results (case sensitive)

• Select an option from one of the recommended filters and check that the corresponding filter is added and the dashboard changes according to the applied filter 🟢

• Add a filter through interaction with a visualization and check that the dashboard updates 🟢

• Use the input and type an incorrect word to check if the no results message is shown 🟢

Events tab (Discover)

Search bar

Test	Chrome	Firefox	Safari
Apply filters using search bar input	🟢	⚫	⚫
Apply filters using the search bar add filter feature	🟢	⚫	⚫
Apply filters using the date picker	🟢	⚫	⚫
Apply filters with no results (Check the No results match your search criteria message)	🟢	⚫	⚫
Use the saved queries feature (Check saved queries CRUD)	🟢	⚫	⚫

• Apply filters using search bar input 🟢

• Apply filters using the search bar add filter feature 🟢

• Apply filters using the date picker 🟢

• Apply filters with no results (Check the No results match your search criteria message) 🟢

• Use the saved queries feature (Check saved queries CRUD) 🟢

Histogram chart

Test	Chrome	Firefox	Safari
Check histogram chart hits consistency	🟢	⚫	⚫
Use chart options (three points: maximize, minimize, inspect)	🟢	⚫	⚫

• Check histogram chart hits consistency 🟢

• Use chart options (three points: maximize, minimize, inspect) 🟢

Maximize

Inspect

Data grid

Test	Chrome	Firefox	Safari
Check all table header features (sort, show/hide columns, density, etc)	🟢	⚫	⚫
Check table pagination and rows per page	🟢	⚫	⚫
Check document detail flyout	🟢	⚫	⚫

• Check all table header features (sort, show/hide columns, density, etc) 🟢

data-grid-features.webm

• Check table pagination and rows per page 🟢

• Check document detail flyout 🟢

[lucianogorza]

• In the Dashboard tab, the table shows only 4 records, while the Inventory tab has 357.
• The fixed filters can be removed after refresh the entire page.

Details in comment #6521 (comment)

[lucianogorza]

CR 🟢

Test 🟢

Consistent labels and chart types

The other warnings in the comment #6521 (comment) are not responsibilities of this PR.

[JuanGarriuz]

Test

Global

Test	Chrome	Firefox	Safari
Check data results consistency between events and dashboard tab	🟢	⚫	⚫
Check the filters persist between the events and dashboard tab	🟢	⚫	⚫
Check the filters are cleaned when throwing in the events tab	🟢	⚫	⚫
Check cluster-manager filter on tabs. Must be applied when the tab is shown (all tabs)	🟢	⚫	⚫
Check pinned agent filter on tabs	🟢	⚫	⚫
Check the request with hidden filters applied (allow agents, hide manager alerts)	🟢	⚫	⚫
Check the fixer filter cannot be removed from the filter bar (the remove icon is hidden)	🟢	⚫	⚫

• Check data results consistency between events and dashboard tab

• Check the filters persist between the events and dashboard tab

• Check the filters are cleaned when throwing in the events tab

• Check cluster-manager filter on tabs. Must be applied when the tab is shown (all tabs)

• Check pinned agent filter on tabs

• Check the request with hidden filters applied (allow agents, hide manager alerts)

• Check the fixed filter cannot be removed from the filter bar

Dashboard tab

Test	Chrome	Firefox	Safari
Use search bar input to filter any word and check if the dashboard shows the corresponding results	🟢	⚫	⚫
Select an option from one of the recommended filters and check that the corresponding filter is added and the dashboard changes according to the applied filter	🟢	⚫	⚫
Add a filter through interaction with a visualization and check that the dashboard updates	🟢	⚫	⚫
Use the input and type an incorrect word to check if the no results message is shown	🟢	⚫	⚫

• Use search bar input to filter any word and check if the dashboard shows the corresponding results

• Select an option from one of the recommended filters and check that the corresponding filter is added and the dashboard changes according to the applied filter

• Add a filter through interaction with a visualization and check that the dashboard updates

• Use the input and type an incorrect word to check if the no results message is shown

Events tab (Discover)

Search bar

Test	Chrome	Firefox	Safari
Apply filters using search bar input	🟢	⚫	⚫
Apply filters using the search bar add filter feature	🟢	⚫	⚫
Apply filters using the date picker	🟢	⚫	⚫
Apply filters with no results (Check the No results match your search criteria message)	🟢	⚫	⚫
Use the saved queries feature (Check saved queries CRUD)	🟢	⚫	⚫

• Apply filters using search bar input

• Apply filters using the search bar add filter feature

• Apply filters using the date picker

• Apply filters with no results (Check the No results match your search criteria message)

• Use the saved queries feature (Check saved queries CRUD)

Histogram chart

Test	Chrome	Firefox	Safari
Check histogram chart hits consistency	🟢	⚫	⚫
Use chart options (three points: maximize, minimize, inspect)	🟢	⚫	⚫

• Check histogram chart hits consistency

• Use chart options (three points: maximize, minimize, inspect)

Grabacion.2024-04-30.110838.mp4

Data grid

Test	Chrome	Firefox	Safari
Check all table header features (sort, show/hide columns, density, etc)	🟢	⚫	⚫
Check table pagination and rows per page	🟢	⚫	⚫
Check document detail flyout	🟢	⚫	⚫

• Check all table header features (sort, show/hide columns, density, etc)

Grabacion.2024-04-30.110838.mp4

• Check document detail flyout

[JuanGarriuz]

LGTM!!