[UX] View correlations page improvements #828
Description
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
isClearableset totruefor 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
checkedproperty 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
compressedprop 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:
