[Security Solution][Detections] Improves UX for Rules and Exceptions tables #118940

vitaliidm · 2021-11-17T20:22:08Z

Issues:

[Security Solution][Detections] Table UI: consistent "See all" buttons #117029
[Security Solution][Detections] Table UI: sizing columns efficiently #117030
[Security Solution][Detections] Table UI: Use truncation + tooltip for Rule, Rule Monitoring, and Exceptions table #118630

Summary

Rules & Rules Monitoring tables now truncate text in columns and display tooltips
Exceptions table now has tooltips and proper truncation for columns
Tags column completely redesigned for Rules table: now it doesn't display tags but only button(labeled by number of tags) with popover. See Figma
Popover component redesigned. Created a common component PopoverItems instead of 2 similar DisplayTags & ExceptionOverflow. For reference [Security Solution] Create a common component for table overview popovers #103782
Exceptions table reconfigured to use Actions column properly. I.e. using property actions in column config, rather having action as column itself Eui table actions guide
Capitalized Rule status name in Rules tables

Rules

Before

After

Rules Monitoring

Before

After

Exceptions

Before

After

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

- common component for popover - table alignments

vitaliidm · 2021-11-18T11:22:15Z

@elasticmachine merge upstream

vitaliidm · 2021-11-19T14:20:08Z

@elasticmachine merge upstream

spong · 2021-11-22T23:10:14Z

These are great improvements @vitaliidm -- thank you! In testing I opened this issue for setting max-length on our inputs and providing better truncation/overflow within the Rule Creation/Edit/Details pages.

While these test strings are definitely not in good-faith of actual user values 😅 , I do wonder if a scrollable popover (vs current tooltip) would be a better general purpose solution for these types of situations. While less of a concern for Rule Name (as shown below), this would probably be beneficial for Descriptions, Investigation Guides, and other free text fields, etc. Could always just do it as a fallback to the tooltip if field is > certain length.

No changes requested here, just commenting 🙂 cc @yiyangliu9286

spong · 2021-11-22T23:20:14Z

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/columns.tsx

@@ -363,6 +381,7 @@ export const getMonitoringColumns = (
        </EuiText>
      ),
      width: '14%',
+      truncateText: true,


Looks like there's some overlap with the tooltip hover icon:

Looks to be just the EuiTooltip ones -- the Last Gap custom one seems to be 👍 though:

done, fixed that

spong · 2021-11-22T23:26:44Z

x-pack/plugins/security_solution/public/common/components/popover_items/index.tsx

+
+const PopoverWrapper = styled(EuiBadgeGroup)`
+  max-height: 200px;
+  max-width: 600px;


All hail max-width (and height)! 😎 Keeps this popup in check for ridiculously large (and large number of) tags 👍

spong

Checked out, tested locally and performed cursory code review -- LGTM! 👍 🚀 Thanks for all the UI/UX enhancement and general code cleanup + tests here @vitaliidm! 🙂

I did leave a couple nits (overlap w/ column tooltips, and using , instead of CSS if possible), but they're not not blockers. Also as mentioned in a separate comment, created this issue for addressing some max-length/overflow issues we've got floating around that I found in testing.

x-pack/plugins/security_solution/public/common/components/popover_items/index.test.tsx

- tooltip overlap - remove unnecessary casting

kibana-ci · 2021-11-23T12:26:28Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	2754	2755	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	4.5MB	4.5MB	+69.0B

History

💚 Build #8498 succeeded 2862717
💚 Build #8201 succeeded 74a356b
💔 Build #8189 failed 84fe972
💚 Build #8082 succeeded d8db91b
💛 Build #7994 was flaky ea90ad6
💛 Build #7793 was flaky 6bb3287

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @vitaliidm

xcrzx

LGTM 👍

…tables (elastic#118940) [Security Solution][Detections] Improves UX for Rules and Exceptions tables

kibanamachine · 2021-11-24T10:46:19Z

💚 Backport successful

Status	Branch	Result
✅	8.0

This backport PR will be merged automatically after passing CI.

…tables (#118940) (#119585) [Security Solution][Detections] Improves UX for Rules and Exceptions tables Co-authored-by: Vitalii Dmyterko <[email protected]>

…tables (#118940) [Security Solution][Detections] Improves UX for Rules and Exceptions tables

…tables (elastic#118940) [Security Solution][Detections] Improves UX for Rules and Exceptions tables

vitaliidm added 6 commits November 17, 2021 20:20

Initial commit:

982d9e7

- common component for popover - table alignments

styling improvements

8836f1f

update config

5e163b5

update tests

3d868a8

rename props

796fdf9

cleanup

65ef047

Merge branch 'main' into security-solution/ui-tables-enhancements

7aca51b

vitaliidm self-assigned this Nov 18, 2021

vitaliidm added the release_note:enhancement label Nov 18, 2021

vitaliidm added 5 commits November 18, 2021 16:36

restyle link anchor

7ee3a35

remove unused import

7d36461

linkAnchor refactor

e911192

capitalize Last run cell

00ac96b

small improvements

6bb3287

vitaliidm changed the title ~~[Security Solution][Detections] Enhances Rules are UI tables [Draft]~~ [Security Solution][Detections] Improves UX for Rules and Exceptions tables Nov 19, 2021

vitaliidm added 4 commits November 19, 2021 12:30

small refactoring

e3faa5b

create LastResponse

ea13f15

create RuleExecutionStatus component

b7bc77e

refactor and enhancements

ea1098e

Merge branch 'main' into security-solution/ui-tables-enhancements

ea90ad6

CR: remove unused import

2862717

spong reviewed Nov 22, 2021

View reviewed changes

spong approved these changes Nov 22, 2021

View reviewed changes

xcrzx reviewed Nov 23, 2021

View reviewed changes

x-pack/plugins/security_solution/public/common/components/popover_items/index.test.tsx Outdated Show resolved Hide resolved

vitaliidm added 3 commits November 23, 2021 10:32

CR:

5cd5080

- tooltip overlap - remove unnecessary casting

CR: change separator approach

1cba50d

CR: remove unused import

a6b9498

xcrzx approved these changes Nov 24, 2021

View reviewed changes

vitaliidm added the v8.0.0 label Nov 24, 2021

vitaliidm merged commit 7927bd4 into elastic:main Nov 24, 2021

vitaliidm added the auto-backport Deprecated - use backport:version if exact versions are needed label Nov 24, 2021

kibanamachine mentioned this pull request Nov 24, 2021

[8.0] [Security Solution][Detections] Improves UX for Rules and Exceptions tables (#118940) #119585

Merged

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Nov 24, 2021

[Security Solution][Detections] Improves UX for Rules and Exceptions …

85f93d8

…tables (elastic#118940) [Security Solution][Detections] Improves UX for Rules and Exceptions tables

vitaliidm deleted the security-solution/ui-tables-enhancements branch November 24, 2021 12:28

vitaliidm mentioned this pull request Nov 24, 2021

[Security Solution][Detections] Table UI: Use truncation + tooltip for Rule, Rule Monitoring, and Exceptions table #118630

Closed

vitaliidm linked an issue Nov 24, 2021 that may be closed by this pull request

[Security Solution] Create a common component for table overview popovers #103782

Closed

vitaliidm mentioned this pull request Nov 24, 2021

[Security Solution] Create a common component for table overview popovers #103782

Closed

yiyangliu9286 mentioned this pull request Nov 25, 2021

[Meta] [UX] Table truncation / UI enhancements for Rules / Rule monitoring / Exceptions tables #117460

Closed

dmlemeshko pushed a commit that referenced this pull request Nov 29, 2021

[Security Solution][Detections] Improves UX for Rules and Exceptions …

2c0fe1e

…tables (#118940) [Security Solution][Detections] Improves UX for Rules and Exceptions tables

TinLe pushed a commit to TinLe/kibana that referenced this pull request Dec 22, 2021

[Security Solution][Detections] Improves UX for Rules and Exceptions …

adfbaa2

…tables (elastic#118940) [Security Solution][Detections] Improves UX for Rules and Exceptions tables

nastasha-solomon mentioned this pull request Feb 7, 2022

[DOCS] 8.0.0 Release Notes elastic/security-docs#1492

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution][Detections] Improves UX for Rules and Exceptions tables #118940

[Security Solution][Detections] Improves UX for Rules and Exceptions tables #118940

vitaliidm commented Nov 17, 2021 •

edited

Loading

vitaliidm commented Nov 18, 2021

vitaliidm commented Nov 19, 2021

spong commented Nov 22, 2021 •

edited

Loading

spong Nov 22, 2021

vitaliidm Nov 23, 2021

spong Nov 22, 2021 •

edited

Loading

spong left a comment

kibana-ci commented Nov 23, 2021

xcrzx left a comment

kibanamachine commented Nov 24, 2021

[Security Solution][Detections] Improves UX for Rules and Exceptions tables #118940

[Security Solution][Detections] Improves UX for Rules and Exceptions tables #118940

Conversation

vitaliidm commented Nov 17, 2021 • edited Loading

Summary

Rules

Before

After

Rules Monitoring

Before

After

Exceptions

Before

After

Checklist

For maintainers

vitaliidm commented Nov 18, 2021

vitaliidm commented Nov 19, 2021

spong commented Nov 22, 2021 • edited Loading

spong Nov 22, 2021

Choose a reason for hiding this comment

vitaliidm Nov 23, 2021

Choose a reason for hiding this comment

spong Nov 22, 2021 • edited Loading

Choose a reason for hiding this comment

spong left a comment

Choose a reason for hiding this comment

kibana-ci commented Nov 23, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

xcrzx left a comment

Choose a reason for hiding this comment

kibanamachine commented Nov 24, 2021

💚 Backport successful

vitaliidm commented Nov 17, 2021 •

edited

Loading

spong commented Nov 22, 2021 •

edited

Loading

spong Nov 22, 2021 •

edited

Loading