Implement embeddable dashboard on Office 365

[JuanGarriuz]

Description

Implement the embeddable dashboard on Office 365-> dashboard tab and deprecate any use of kibana-integrations components

Issues Resolved

[Remove discover] Implement embeddable dashboard on Office 365 module

Evidence

Current dashboard

Old dashboard

Test

Go to Office 365 and check the following:

• [ ] Each visualization, if applicable, must have interaction so that it adds the corresponding filter(s) upon clicking.
• [ ] The visualizations have to be updated according to the filters applied in the searchbar.
• [ ] The visualizations have to be updated when a search is performed in the searchbar.
• [ ] If there are no results, the corresponding message must appear that there are no results and the visualizations should not be rendered.
• [ ] If there is SampleData, the corresponding SampleData message must appear.
• [ ] If an agent is pinned, the views must be updated and changed to the agent view, if applicable.
• [ ] Check filter behavior with respect to hide alerts, allow agents and filter order.

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

[JuanGarriuz]

Update 22/03 Drilldowns

User Activity

###Old

New

Client Ip Address

Old

New

Rule

Old

New

Operation

Old

New

[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%	( 3753 / 34742 )
Branches	7.26%	( 1653 / 22739 )
Functions	10.5%	( 870 / 8285 )
Lines	10.95%	( 3647 / 33302 )

[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:	:green_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 rule.groups filter on 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 rule.groups filter on tabs

• :green_circle: 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:	🟢
Click the "Advanced filters" switch and use the search bar	:black_circle:	:black_circle:	🟢
Use the search bar bottom filter bar	:black_circle:	:black_circle:	🟢
Use the panels order row feature	:black_circle:	:black_circle:	🟢
Click on the panels row (Actors, Organizations, Repositories, Actions) and check the detail rendered	:black_circle:	:black_circle:	🟢
Click on the panels row (Actors, Organizations, Repositories, Actions) and the totals	: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:	🟢
Navigate on the panels row (Actors, Organizations, Repositories, Actions) and returns and check if the filter is applied/removed	:black_circle:	:black_circle:	🟢
Use the inner panel data grid	:black_circle:	:black_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/4ff4519e-9661-4ae4-9340-c0ca5595c6e4

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)

https://github.com/wazuh/wazuh-dashboard-plugins/assets/63758389/ad410451-8147-445d-a53f-c10f317c1fbd

• 🟢 Check table pagination and rows per page

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

[jbiset]

CR: :green_circle:

Test UI: :green_circle:

[!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:	:green_circle:	:black_circle:
Check the filters persist between the inventory and dashboard tab	:green_circle:	:green_circle:	:black_circle:
Check cluster-manager filter on tabs. Must be applied when the tab is shown (all tabs)	:green_circle:	:green_circle:	:black_circle:
Check rule.groups filter on tabs	:green_circle:	:green_circle:	:black_circle:
Check pinned agent filter on tabs	:green_circle:	:green_circle:	:black_circle:
Check the request with hidden filters applied (allow agents, hide manager alerts)	:green_circle:	:green_circle:	:black_circle:
Check the fixer filter cannot be removed from the filter bar (the remove icon is hidden)	:green_circle:	:green_circle:	:black_circle:

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

Chrome :green_circle:

Firefox :green_circle:

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

Chrome :green_circle:

Global_1_Chrome.webm

Firefox :green_circle:

Global_1_Firefox.webm

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

Chrome :green_circle:

Manager mode

Cluster mode

Firefox :green_circle:

Manager mode

Cluster mode

• Check rule.groups filter on tabs :green_circle:

Chrome :green_circle:

Firefox :green_circle:

• Check pinned agent filter on tabs :green_circle:

Chrome :green_circle:

Firefox :green_circle:

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

Enable/disable the hideManagerAlerts settings on App Settings

Chrome :green_circle:

Firefox :green_circle:

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

Chrome :green_circle:

Firefox :green_circle:

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

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

Chrome :green_circle:

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

Chrome :green_circle:

Firefox :green_circle:

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

Chrome :green_circle:

Dashboard_1_Chrome.webm

Firefox :green_circle:

Dashboard_1_Firefox.webm

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

Chrome :green_circle:

Firefox :green_circle:

Panel tab

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

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

Chrome :green_circle:

PanelTab_1_Chrome.webm

Firefox :green_circle:

PanelTab_1_Firefox.webm

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

Chrome :green_circle:

Firefox :green_circle:

• Use the search bar bottom filter bar :green_circle:

Chrome :green_circle:

Firefox :green_circle:

• Use the panels order row feature :green_circle:

Chrome :green_circle:

PanelTab_2_Chrome.webm

Firefox :green_circle:

PanelTab_2_Firefox.webm

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

Chrome :green_circle:

Firefox :green_circle:

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

Chrome :green_circle:

Firefox :green_circle:

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

Chrome :green_circle:

PanelTab_3_Chrome.webm

Firefox :green_circle:

PanelTab_3_Firefox.webm

• Use the inner panel data grid :green_circle:

Chrome :green_circle:

Firefox :green_circle:

Events tab (Discover)

Search bar

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

• Apply filters using search bar input :green_circle:

Chrome :green_circle:

Firefox :green_circle:

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

Chrome :green_circle:

Firefox :green_circle:

• Apply filters using the date picker :green_circle:

Chrome :green_circle:

Firefox :green_circle:

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

Chrome :green_circle:

Firefox :green_circle:

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

Chrome :green_circle:

Events_1_Chrome.webm

Firefox :green_circle:

Events_1_Firefox.webm

Histogram chart

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

• Check histogram chart hits consistency :green_circle:

Chrome :green_circle:

Firefox :green_circle:

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

Chrome :green_circle:

Histogram_1_Chrome.webm

Firefox :green_circle:

Histogram_1_Firefox.webm

Data grid

Test	Chrome	Firefox	Safari
Check all table header features (sort, show/hide columns, density, etc)	:yellow_circle:	:yellow_circle:	:black_circle:
Check table pagination and rows per page	:green_circle:	:green_circle:	:black_circle:
Check document detail flyout (list and JSON views)	:green_circle:	:green_circle:	:black_circle:

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

Column movement does not work correctly

Chrome :yellow_circle:

DataGrid_1_Chrome.webm

Firefox :yellow_circle:

DataGrid_1_Firefox.webm

• Check table pagination and rows per page :green_circle:

Chrome :green_circle:

DataGrid_2_Chrome.webm

Firefox :green_circle:

DataGrid_2_Firefox.webm

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

Chrome :green_circle:

Firefox :green_circle: