opensearch-project / security-analytics-dashboards-plugin

Front end (UI) plugin to support security-analytics
Apache License 2.0
8 stars 41 forks source link

[UX] Correlation rules page improvements #826

Open xeniatup opened 7 months ago

xeniatup commented 7 months ago

Meta UX issue

The issue is tracking the individual tasks to improve list correlation rules user experience. See a more detailed description for each item below.

Note: the "Log types" search bar filter experience on the Correlation rules page is identical to the respective experience with "Log types" filter on the "Correlations" page. There is an opportunity to contribute the customizations to OUI components.

Page layout:

Log types filter:

Log types filter select popover:


Page layout:

1.1 Implement OuiPage as a wrapper for the page to place OuiPageHeader on the page content panel.

Current experience:

Screenshot 2023-12-05 at 12 44 52 PM

Proposed experience:

Screenshot 2023-12-05 at 12 46 03 PM

Log types filter:

2.1 Indicate the number of available options for “Log types” search bar filter (badge) by passing numFilters in the OuiFilterGroup component.

A badge should be added to the search bar filter in order to align with OuiFilterGroup component default behavior.

Current experience:

Screenshot 2023-12-04 at 4 47 39 PM

Proposed experience:

Screenshot 2023-12-05 at 12 46 03 PM

2.2 Implement isClearable set to true for the "Log types" search bar filter when user makes selections that differ from the default ("Select all")

Current experience:

Screenshot 2023-12-05 at 12 43 06 PM

Proposed experience:

Screenshot 2023-12-05 at 12 51 32 PM

Log types filter select popover:

3.1 Implement OuiButtonGroups with type="single" prop for “Select all” and “Deselect all” options in the “Log type” selector popover.

Current experience:

Screenshot 2023-12-05 at 12 54 10 PM

Proposed experience:

Screenshot 2023-12-05 at 12 54 36 PM

3.2. Implement multi-select experience for the "Log types" popover without moving selected items on the top of the list.

Current experience:

Screenshot 2023-12-05 at 1 08 04 PM

Proposed experience:

Screenshot 2023-12-05 at 1 23 57 PM

3.3 Implement selecting/deselecting all items within a group by selecting a group label. Remove the checked property from the group label when at least one option within the group is unselected.

Current experience: The group label is not clickable and is not selectable.

Screenshot 2023-12-05 at 1 08 04 PM

Proposed experience:

Screenshot 2023-12-05 at 1 23 57 PM
dblock commented 2 weeks ago

Catch All Triage - 1 2 3 4 5 - thanks for opening this

xeniatup commented 2 weeks ago

cc @amsiglan