[UX] View correlations page improvements

[xeniatup]

Meta UX issue

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

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

Page layout:

• 1.1 Implement search bar and move the time range to the page header

Search bar filters:

• 2.1 Indicate the number of available options for “Log types” and "Severity" search bar filter (badge) by passing numFilters in the OuiFilterGroup component.
• 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")

Log types filter select popover:

• 3.1 Implement OuiButtonGroups with type="single" prop for “Select all” and “Deselect all” options in the “Log types” selector popover.
• 3.2 Display "Select all" button to "Selected" by default.
• 3.3 Remove the checked property from the group label when at least one option within the group is unselected.

Findings side panel

• 4.1 Tighten up the spacing within correlated findings cards
• 4.2 Use compressed prop for the OuiDescriptionList description list items
• 4.3 Apply smaller font size and $ouiTextSubdued color to the time stamp for each finding
• 4.4 Add "Info" icon with a tooltip explaining the correlation score
• 4.5 Make the parent finding card sticky so it doesn't scroll with the rest of the side panel

Visualization graph

TBD

Page layout

1.1 Implement search bar and move the time range to the page header (OuiPageHeader)

Current experience:

Proposed experience:

Search bar filters :

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

Current experience:

Proposed experience:

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:

Proposed experience:

Log types filter select popover:

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

Current experience:

Proposed experience:

3.2 Display "Select all" button to "Selected" by default.

Current experience:

Proposed experience:

3.3 Remove the checked property from the group label when at least one option within the group is unselected.

Current experience:

Proposed experience:

Findings side panel

4.1 Tighten up the spacing within correlated findings cards

Current experience:

Proposed experience:

4.2 Use compressed prop for the OuiDescriptionList description list items

Current experience:

Proposed experience:

4.3 Apply smaller font size and $ouiTextSubdued color to the time stamp for each finding

Current experience:

Proposed experience:

4.4 Add "Info" icon with a tooltip explaining the correlation score

Tooltip content: The score is based on the proximity of relevant findings in the threat scenario defined by the correlation rule.

Current experience:

Proposed experience:

4.5 Make the parent finding card sticky so it doesn't scroll with the rest of the side panel

Current experience:

Proposed experience:

[dblock]

Catch All Triage - 1 2 3 4 5 thanks for opening this, was this addressed in #855?