Add standard modules filters management

[Machi3mfl]

Description

This PR, adds a standard solution to manage the filters and fetching data using the Data Source added concept.
The solution is applied in the vulnerability detection module.

Issues Resolved

Closes #6499

Evidence

Screen.Recording.2024-03-27.at.16.55.26.mov

Test cases

Global

Test	Chrome	Firefox	Safari
Check data results consistency between inventory and dashboard tab	⚫	⚫	⚫
Check the filters persist between the inventory 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 rule.groups filter on Events tab	⚫	⚫	⚫
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 inventory and dashboard tab

Screen.Recording.2024-03-27.at.16.56.57.mov

• Check the filters persist between the inventory and dashboard tab

Screen.Recording.2024-03-27.at.16.56.57.mov

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

Screen.Recording.2024-03-27.at.17.03.24.mov

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

Screen.Recording.2024-03-31.at.12.15.01.mov

• Check rule.groups filter on Events tab

Screen.Recording.2024-03-31.at.12.16.16.mov

• Check pinned agent filter on tabs

Screen.Recording.2024-03-31.at.12.18.52.mov

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

Enable/disable the hideManagerAlerts settings on App Settings

Screen.Recording.2024-03-31.at.12.33.11.mov

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

Screen.Recording.2024-04-03.at.14.17.47.mov

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

Screen.Recording.2024-03-27.at.17.05.36.mov

• 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

Screen.Recording.2024-03-27.at.17.06.10.mov

• 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

Inventory tab

Test	Chrome	Firefox	Safari
Use search bar input to filter any word and check if the table shows the corresponding results.	⚫	⚫	⚫
Use the input and type an incorrect word to check if the no results message is shown.	⚫	⚫	⚫
Use the add filters button, select any filter and check if the table shows the corresponding results.	⚫	⚫	⚫
Use the page and rows per page selector, and check if is working as expected.	⚫	⚫	⚫
Use the data grid toolbar controls functionality (columns selector, density, sort fields, full screen).	⚫	⚫	⚫
Use export formatted control (export table to CSV button).	⚫	⚫	⚫
Use the header columns controls (column visibility, column sorting, column position).	⚫	⚫	⚫
Click on the inspect document button and check the flyout functionality, the details must show the row clicked on the table.	⚫	⚫	⚫

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

Screen.Recording.2024-03-27.at.17.10.03.mov

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

Screen.Recording.2024-03-27.at.17.09.13.mov

• Use the add filters button, select any filter and check if the table shows the corresponding results.

Screen.Recording.2024-03-27.at.17.10.35.mov

• Use the page and rows per page selector, and check if working as expected

Screen.Recording.2024-03-27.at.17.12.12.mov

• Use the data grid toolbar controls functionality (columns selector, density, sort fields, full screen)

Screen.Recording.2024-03-27.at.17.13.29.mov

• Use export formatted control (export table to CSV button)

Screen.Recording.2024-03-27.at.17.13.29.mov

• Use the header columns controls (column visibility, column sorting, column position)

Screen.Recording.2024-03-27.at.17.13.29.mov

• Click on the inspect document button and check the flyout functionality, the details must show the row clicked on the table.

Screen.Recording.2024-03-27.at.17.16.28.mov

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

Screen.Recording.2024-03-31.at.11.53.54.mov

• Apply filters using the search bar add filter feature

Screen.Recording.2024-03-31.at.11.54.46.mov

• Apply filters using the date picker

Screen.Recording.2024-03-31.at.12.03.49.mov

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

Screen.Recording.2024-03-31.at.12.04.32.mov

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

Screen.Recording.2024-03-31.at.12.05.04.mov

Histogram chart

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

• Check histogram chart hits consistency

Screen.Recording.2024-03-31.at.12.07.11.mov

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

Screen.Recording.2024-03-31.at.12.09.21.mov

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)

Screen.Recording.2024-03-31.at.12.09.52.mov

• Check table pagination and rows per page

Screen.Recording.2024-03-31.at.12.11.11.mov

• Check document detail flyout

Screen.Recording.2024-03-31.at.12.12.45.mov

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

[yenienserrano]

Test cases

Global

Test	Chrome	Firefox	Safari
Check data results consistency between inventory and dashboard tab	⚫	⚫	🟢
Check the filters persist between the inventory 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 rule.groups filter on Events tab	⚫	⚫	🟢
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 inventory and dashboard tab

• Check the filters persist between the inventory 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 rule.groups filter on Events tab

• 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

Grabacion.de.pantalla.2024-04-04.a.las.8.53.13.a.m.mov

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

Inventory tab

Test	Chrome	Firefox	Safari
Use search bar input to filter any word and check if the table shows the corresponding results.	⚫	⚫	🟢
Use the input and type an incorrect word to check if the no results message is shown.	⚫	⚫	🟢
Use the add filters button, select any filter and check if the table shows the corresponding results.	⚫	⚫	🟢
Use the page and rows per page selector, and check if is working as expected.	⚫	⚫	🟢
Use the data grid toolbar controls functionality (columns selector, density, sort fields, full screen).	⚫	⚫	🟢
Use export formatted control (export table to CSV button).	⚫	⚫	🟢
Use the header columns controls (column visibility, column sorting, column position).	⚫	⚫	🟢
Click on the inspect document button and check the flyout functionality, the details must show the row clicked on the table.	⚫	⚫	🟢

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

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

• Use the add filters button, select any filter and check if the table shows the corresponding results.

• Use the page and rows per page selector, and check if working as expected

• Use the data grid toolbar controls functionality (columns selector, density, sort fields, full screen)

• Use export formatted control (export table to CSV button)

• Use the header columns controls (column visibility, column sorting, column position)

• Click on the inspect document button and check the flyout functionality, the details must show the row clicked on the table.

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

[jbiset]

Test cases

Global

Test	Chrome	Firefox	Safari
Check data results consistency between inventory and dashboard tab	🟢	🟢	⚫
Check the filters persist between the inventory 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 rule.groups filter on Events tab	🟢	🟢	⚫
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 inventory and dashboard tab 🟢

Chrome 🟢

Global1_Chrome.webm

Firefox 🟢

Global1_Firefox.webm

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

Chrome 🟢

Global1_Chrome.webm

Firefox 🟢

Global1_Firefox.webm

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

Chrome 🟢

Global3_Chrome.webm

Firefox 🟢

Global3_Firefox.webm

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

Chrome 🟢

Firefox 🟢

• Check rule.groups filter on Events tab 🟢

Chrome 🟢

Firefox 🟢

• Check pinned agent filter on tabs 🟢

Chrome 🟢

Global6_Chrome.webm

Firefox 🟢

Global6_Firefox.webm

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

Enable/disable the hideManagerAlerts settings on App Settings

Chrome 🟢

Firefox 🟢

• Check the fixer filter cannot be removed from the filter bar 🟢

Chrome 🟢

Global8_Chrome.webm

Firefox 🟢

Global8_Firefox.webm

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 🟢

Chrome 🟢

Dashboard1_Chrome.webm

Firefox 🟢

Dashboard1_Firefox.webm

• 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 🟢

Chrome 🟢

Dashboard2_Chrome.webm

Firefox 🟢

Dashboard2_Firefox.webm

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

Chrome 🟢

Dashboard3_Chrome.webm

Firefox 🟢

Dashboard3_Firefox.webm

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

Chrome 🟢

Firefox 🟢

Inventory tab

Test	Chrome	Firefox	Safari
Use search bar input to filter any word and check if the table shows the corresponding results.	🟢	🟢	⚫
Use the input and type an incorrect word to check if the no results message is shown.	🟢	🟢	⚫
Use the add filters button, select any filter and check if the table shows the corresponding results.	🟢	🟢	⚫
Use the page and rows per page selector, and check if is working as expected.	🟢	🟢	⚫
Use the data grid toolbar controls functionality (columns selector, density, sort fields, full screen).	🟢	🟢	⚫
Use export formatted control (export table to CSV button).	🟢	🟢	⚫
Use the header columns controls (column visibility, column sorting, column position).	🟡	🟡	⚫
Click on the inspect document button and check the flyout functionality, the details must show the row clicked on the table.	🟢	🟢	⚫

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

Chrome 🟢

Inventory1_Chrome.webm

Firefox 🟢

Inventory1_Firefox.webm

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

Chrome 🟢

Firefox 🟢

• Use the add filters button, select any filter and check if the table shows the corresponding results. 🟢

Chrome 🟢

Inventory3_Chrome.webm

Firefox 🟢

Inventory3_Firefox.webm

• Use the page and rows per page selector, and check if working as expected 🟢

Chrome 🟢

Inventory4_Chrome.webm

Firefox 🟢

Inventory4_FIrefox.webm

• Use the data grid toolbar controls functionality (columns selector, density, sort fields, full screen) 🟢

Chrome 🟢

Inventory5_Chrome.webm

Firefox 🟢

Inventory5_Firefox.webm

• Use export formatted control (export table to CSV button) 🟢

Chrome 🟢

Inventory6_Chrome.webm

Firefox 🟢

Inventory6_Firefox.webm

• Use the header columns controls (column visibility, column sorting, column position) 🟡

When you move a column to the right, then if you want to move it to the left it doesn't work. In the same way in reverse.

Chrome 🟡

Inventory7_Chrome.webm

Firefox 🟡

Inventory7_Firefox.webm

• Click on the inspect document button and check the flyout functionality, the details must show the row clicked on the table. 🟢

Chrome 🟢

Inventory8_Chrome.webm

Firefox 🟢

Inventory8_Firefox.webm

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 🟢

Chrome 🟢

Events1_Chrome.webm

Firefox 🟢

Events1_Firefox.webm

• Apply filters using the search bar add filter feature 🟢

Chrome 🟢

Events2_Chrome.webm

Firefox 🟢

Events2_Firefox.webm

• Apply filters using the date picker 🟢

Chrome 🟢

Events3_Chrome.webm

Firefox 🟢

Events3_Firefox.webm

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

Chrome 🟢

Firefox 🟢

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

**When a saved query is applied and the Clear button in the saved queries options is pressed, all filters are eliminated, including fixed filters. (See in Firefox evidence) **

Chrome 🟡

Events5_Chrome.webm

Firefox 🟡

Events5_Firefox.webm

Histogram chart

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

• Check histogram chart hits consistency 🟢

Chrome 🟢

Histogram1_Chrome.webm

Firefox 🟢

Histogram1_Firefox.webm

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

Chrome 🟢

Histogram2_Chrome.webm

Firefox 🟢

Histogram2_Firefox.webm

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) 🟡

In both Chrome and Firefox, moving columns from the header does not work correctly.
Only in Chrome, when you swap the columns in the Sort Fields dropdown, the entire list turns red.

Chrome 🟡

DataGrid1_Chrome.webm

Firefox 🟡

DataGrid1_Firefox.webm

• Check table pagination and rows per page 🟢

Chrome 🟢

DataGrid1_Chrome.webm

Firefox 🟢

DataGrid1_Firefox.webm

• Check document detail flyout 🟢

Chrome 🟢

DataGrid3_Chrome.webm

Firefox 🟢

DataGrid3_Firefox.webm

[yenienserrano]

in events of other applications the view is broken

[github-actions]

Wazuh Core plugin code coverage (Jest) test	%	values
Statements	31.12%	( 286 / 919 )
Branches	29.88%	( 107 / 358 )
Functions	28.1%	( 86 / 306 )
Lines	30.71%	( 278 / 905 )

[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.84%	( 3769 / 34767 )
Branches	7.31%	( 1666 / 22784 )
Functions	10.5%	( 871 / 8291 )
Lines	10.99%	( 3663 / 33324 )

[Machi3mfl]

in events of other applications the view is broken

Thanks @yenienserrano.
This happens because we refactored the discovery used in the events tab for all modules. We are going to solve this problem when we refactor the modules one by one. This is the related issue: #6477

[jbiset]

CR: 🟢

Test UI 🟢 (with details 🟡 )

Taking into account that the tests marked with yellow are non-breaking details, this PR is approved