Implement embeddable dashboard on Docker module

[asteriscos]

Description

This pull request replaces the Dashboard tab on Docker application.

Issues Resolved

• [Remove discover] Implement embeddable dashboard on Docker module #6500

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 / 34712 )
Branches	7.27%	( 1653 / 22731 )
Functions	10.5%	( 870 / 8279 )
Lines	10.96%	( 3647 / 33269 )

[yenienserrano]

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

In this PR we add a class to hide the button that allows to remove the global filters. https://github.com//pull/6482

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

[yenienserrano]

LGTM

[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 the 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

Grabacion.2024-04-30.110838.mp4

• 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 table pagination and rows per page

Grabacion.2024-04-30.110838.mp4

• Check document detail flyout

Grabacion.2024-04-30.110838.mp4

[JuanGarriuz]

LGTM!!