Implement embeddable dashboard on FIM module

[yenienserrano]

Description

This pull request replaces the Dashboard tab on FIM application.

Issues Resolved

#6608

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

[Tostti]

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

Safari

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

Safari

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

Safari

• Check pinned agent filter on tabs 🟢

Safari

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

Enable the hideManagerAlerts settings on App Settings

• Check the fixed filter cannot be removed from the filter bar 🔴 Solved in fa35cbe

Safari

If I just enter the page or reload it, I can remove the filters. However, after switching tabs, I cannot remove them anymore.

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 🟢

Safari

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

Safari

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

Safari

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

Safari

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 🟢

Safari

• Apply filters using the search bar add filter feature 🟢

Safari

• Apply filters using the date picker 🟢

Safari

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

Safari

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

Safari

Histogram chart

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

• Check histogram chart hits consistency 🟢

Safari

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

Safari

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

Safari

• Check table pagination and rows per page 🟢

Safari

• Check document detail flyout 🟡

Safari

Thought It may be good to have also the JSON visualization in the flyout, as it has been requested previously for another module. It was added to Vulnerability Detector in #6590, the code may be reusable to also add it here.

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

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-26.094523.mp4

• Check table pagination and rows per page 🟢

• Check document detail flyout 🟢

[Tostti]

Test ❌
CR ✅

[Tostti]

LGTM