Implement embeddable dashboard on GitHub

[Desvelao]

Description

This pull request replaces the Dashboard tab on GitHub application.

Issues Resolved

#6522

Test cases

[!NOTE] The global, dashboard, and discover tests cases are the same as the mitre module: https://github.com/wazuh/wazuh-dashboard-plugins/pull/6482

Global

Test	Chrome	Firefox	Safari
Check data results consistency between inventory and dashboard tab	:black_circle:	:black_circle:	:black_circle:
Check the filters persist between the inventory and dashboard tab	:black_circle:	:black_circle:	:black_circle:
Check cluster-manager filter on tabs. Must be applied when the tab is shown (all tabs)	:black_circle:	:black_circle:	:black_circle:
Check rule.mitre.id filter on Events and Framework tab	:black_circle:	:black_circle:	:black_circle:
Check pinned agent filter on tabs	:black_circle:	:black_circle:	:black_circle:
Check the request with hidden filters applied (allow agents, hide manager alerts)	:black_circle:	:black_circle:	:black_circle:
Check the fixer filter cannot be removed from the filter bar (the remove icon is hidden)	:black_circle:	:black_circle:	:black_circle:

• Check data results consistency between inventory and dashboard tab

• Check the filters persist between the inventory and dashboard tab

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

• Check rule.mitre.id filter on Events and Framework tab

• 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	:black_circle:	:black_circle:	:black_circle:
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	:black_circle:	:black_circle:	:black_circle:
Add a filter through interaction with a visualization and check that the dashboard updates	:black_circle:	:black_circle:	:black_circle:
Use the input and type an incorrect word to check if the no results message is shown	:black_circle:	:black_circle:	:black_circle:

• 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

Panel tab

[!NOTE] The framework tab must work like latest stable version

Test	Chrome	Firefox	Safari
Use the dropdown filters and check the filters applied and data showed	:black_circle:	:black_circle:	:black_circle:
Click the "Advanced filters" switch and use the search bar	:black_circle:	:black_circle:	:black_circle:
Use the search bar bottom filter bar	:black_circle:	:black_circle:	:black_circle:
Use the panels order row feature	:black_circle:	:black_circle:	:black_circle:
Click on the panels row (Actors, Organizations, Repositories, Actions) and check the detail rendered	:black_circle:	:black_circle:	:black_circle:
Click on the panels row (Actors, Organizations, Repositories, Actions) and the totals	:black_circle:	:black_circle:	:black_circle:
Navigate on the panels row (Actors, Organizations, Repositories, Actions) and returns and check if the filter is applied/removed	:black_circle:	:black_circle:	:black_circle:
Navigate on the panels row (Actors, Organizations, Repositories, Actions) and returns and check if the filter is applied/removed	:black_circle:	:black_circle:	:black_circle:
Use the inner panel data grid	:black_circle:	:black_circle:	:black_circle:

• Use the dropdown filters and check the filters applied and data showed

https://github.com/wazuh/wazuh-dashboard-plugins/assets/6089438/12916323-aff4-4004-8a36-2d82ae007d65

• Click the "Advanced filters" switch and use the search bar

https://github.com/wazuh/wazuh-dashboard-plugins/assets/6089438/91899107-c6b8-4b60-8402-ed1ee76c09c8

• Use the search bar bottom filter bar

https://github.com/wazuh/wazuh-dashboard-plugins/assets/6089438/140584ad-e866-4cc6-9b03-548936c4387a

• Use the panels order row feature

https://github.com/wazuh/wazuh-dashboard-plugins/assets/6089438/9525decb-7487-48c8-baed-239076b293b7

• Click on the panels row (Actors, Organizations, Repositories, Actions) and check the detail rendered

https://github.com/wazuh/wazuh-dashboard-plugins/assets/6089438/b5538eb1-5112-431c-b145-7fbefd4c9740

• Click on the panels row (Actors, Organizations, Repositories, Actions) and the totals

https://github.com/wazuh/wazuh-dashboard-plugins/assets/6089438/a194e5fd-eba1-42f9-8480-07e71eff9f5e

• Navigate on the panels row (Actors, Organizations, Repositories, Actions) and returns and check if the filter is applied/removed

https://github.com/wazuh/wazuh-dashboard-plugins/assets/6089438/711ffbca-55e8-486e-8a4a-063cfac534ca

• Use the inner panel data grid

https://github.com/wazuh/wazuh-dashboard-plugins/assets/6089438/e22965de-0cec-4290-ae28-3205baed500f

Events tab (Discover)

Search bar

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

• 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	:black_circle:	:black_circle:	:black_circle:
Use chart options (three points: maximize, minimize, inspect)	:black_circle:	:black_circle:	:black_circle:

• 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)	:black_circle:	:black_circle:	:black_circle:
Check table pagination and rows per page	:black_circle:	:black_circle:	:black_circle:
Check document detail flyout (list and JSON views)	:black_circle:	:black_circle:	:black_circle:

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

• Check table pagination and rows per page

• Check document detail flyout (list and JSON views)

Check List

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

[github-actions[bot]]

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[bot]]

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[bot]]

Main plugin code coverage (Jest) test	%	values
Statements	10.8%	( 3751 / 34711 )
Branches	7.27%	( 1653 / 22734 )
Functions	10.52%	( 870 / 8267 )
Lines	10.95%	( 3645 / 33273 )

[asteriscos]

Test cases

[!NOTE] The global, dashboard, and discover tests cases are the same as the mitre module: https://github.com/wazuh/wazuh-dashboard-plugins/pull/6482

Global

Test	Chrome	Firefox	Safari
Check data results consistency between inventory and dashboard tab	:green_circle:	:black_circle:	:black_circle:
Check the filters persist between the inventory and dashboard tab	:green_circle:	:black_circle:	:black_circle:
Check cluster.name and rule.groups:github filter on tabs. Must be applied when the tab is shown (all tabs) filter on tabs. Must be applied when the tab is shown (all tabs)	:green_circle:	:black_circle:	:black_circle:
Check pinned agent filter on tabs	:green_circle:	:black_circle:	:black_circle:
Check the request with hidden filters applied (allow agents, hide manager alerts)	:green_circle:	:black_circle:	:black_circle:
Check the fixer filter cannot be removed from the filter bar (the remove icon is hidden)	:green_circle:	:black_circle:	:black_circle:

• :green_circle: Check data results consistency between inventory and dashboard tab

• :green_circle: Check the filters persist between the inventory and dashboard tab

• :green_circle: Check cluster.name and rule.groups:github filter on tabs. Must be applied when the tab is shown (all tabs)

• :green_circle: Check pinned agent filter on tabs

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

Enable/disable the hideManagerAlerts settings on App Settings

• :green_circle: 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	:green_circle:	:black_circle:	:black_circle:
Add a filter through interaction with a visualization and check that the dashboard updates	:green_circle:	:black_circle:	:black_circle:
Use the input and type an incorrect word to check if the no results message is shown	:green_circle:	:black_circle:	:black_circle:

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

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

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

Panel tab

[!NOTE] The framework tab must work like latest stable version

Test	Chrome	Firefox	Safari
Use the dropdown filters and check the filters applied and data showed	:green_circle:	:black_circle:	:black_circle:
Click the "Advanced filters" switch and use the search bar	:green_circle:	:black_circle:	:black_circle:
Use the search bar bottom filter bar	:green_circle:	:black_circle:	:black_circle:
Use the panels order row feature	:green_circle:	:black_circle:	:black_circle:
Click on the panels row (Actors, Organizations, Repositories, Actions) and check the detail rendered	:green_circle:	:black_circle:	:black_circle:
Click on the panels row (Actors, Organizations, Repositories, Actions) and the totals	:green_circle:	:black_circle:	:black_circle:
Navigate on the panels row (Actors, Organizations, Repositories, Actions) and returns and check if the filter is applied/removed	:green_circle:	:black_circle:	:black_circle:
Navigate on the panels row (Actors, Organizations, Repositories, Actions) and returns and check if the filter is applied/removed	:green_circle:	:black_circle:	:black_circle:
Use the inner panel data grid	:green_circle:	:black_circle:	:black_circle:
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	:green_circle:	:black_circle:	:black_circle:

• :green_circle: Use the dropdown filters and check the filters applied and data showed

https://github.com/wazuh/wazuh-dashboard-plugins/assets/6089438/12916323-aff4-4004-8a36-2d82ae007d65

• :green_circle: Click the "Advanced filters" switch and use the search bar

• :green_circle: Use the search bar bottom filter bar

• :green_circle: Use the panels order row feature

• :green_circle: Click on the panels row (Actors, Organizations, Repositories, Actions) and check the detail rendered

• :green_circle: Click on the panels row (Actors, Organizations, Repositories, Actions) and the totals

• :green_circle: Navigate on the panels row (Actors, Organizations, Repositories, Actions) and return and check if the filter is applied/removed

• :green_circle: Use the inner panel data grid

• :green_circle: 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

Events tab (Discover)

Search bar

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

• :green_circle: Apply filters using search bar input

• :green_circle: Apply filters using the search bar add filter feature

• :green_circle: Apply filters using the date picker

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

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

Histogram chart

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

• :green_circle: Check histogram chart hits consistency

-:green_circle: 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)	:green_circle:	:black_circle:	:black_circle:
Check table pagination and rows per page	:green_circle:	:black_circle:	:black_circle:
Check document detail flyout (list and JSON views)	:green_circle:	:black_circle:	:black_circle:

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

• :green_circle: Check table pagination and rows per page

• :green_circle: Check document detail flyout (list and JSON views)

[yenienserrano]

Test cases

[!NOTE] The global, dashboard, and discover tests cases are the same as the mitre module: https://github.com/wazuh/wazuh-dashboard-plugins/pull/6482

Global

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

• 🟢 Check data results consistency between inventory and dashboard tab

• 🟢 Check the filters persist between the inventory and dashboard 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	:black_circle:	:black_circle:	:green_circle:
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	:black_circle:	:black_circle:	:green_circle:
Add a filter through interaction with a visualization and check that the dashboard updates	:black_circle:	:black_circle:	:green_circle:
Use the input and type an incorrect word to check if the no results message is shown	:black_circle:	:black_circle:	:green_circle:

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

Panel tab

[!NOTE] The framework tab must work like latest stable version

Test	Chrome	Firefox	Safari
Use the dropdown filters and check the filters applied and data showed	:black_circle:	:black_circle:	:green_circle:
Click the "Advanced filters" switch and use the search bar	:black_circle:	:black_circle:	:green_circle:
Use the search bar bottom filter bar	:black_circle:	:black_circle:	:green_circle:
Use the panels order row feature	:black_circle:	:black_circle:	:green_circle:
Click on the panels row (Actors, Organizations, Repositories, Actions) and check the detail rendered	:black_circle:	:black_circle:	:green_circle:
Click on the panels row (Actors, Organizations, Repositories, Actions) and the totals	:black_circle:	:black_circle:	:green_circle:
Navigate on the panels row (Actors, Organizations, Repositories, Actions) and returns and check if the filter is applied/removed	:black_circle:	:black_circle:	:green_circle:
Navigate on the panels row (Actors, Organizations, Repositories, Actions) and returns and check if the filter is applied/removed	:black_circle:	:black_circle:	:green_circle:
Use the inner panel data grid	:black_circle:	:black_circle:	:green_circle:

• 🟢 Use the dropdown filters and check the filters applied and data showed

• 🟢 Click the "Advanced filters" switch and use the search bar

• 🟢 Use the search bar bottom filter bar

• 🟢 Use the panels order row feature

• 🟢 Click on the panels row (Actors, Organizations, Repositories, Actions) and check the detail rendered

• 🟢 Click on the panels row (Actors, Organizations, Repositories, Actions) and the totals

• 🟢 Navigate on the panels row (Actors, Organizations, Repositories, Actions) and returns and check if the filter is applied/removed

• 🟢 Use the inner panel data grid

Events tab (Discover)

Search bar

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

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

https://github.com/wazuh/wazuh-dashboard-plugins/assets/63758389/a368f12a-1b5e-4bb4-b952-6aefaec37220

Histogram chart

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

• 🟢 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)	:black_circle:	:black_circle:	:green_circle:
Check table pagination and rows per page	:black_circle:	:black_circle:	:green_circle:
Check document detail flyout (list and JSON views)	:black_circle:	:black_circle:	:green_circle:

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

• 🟢 Check table pagination and rows per page

• 🟢 Check document detail flyout (list and JSON views)