[SIEM][Exceptions] - Part 1 of ExceptionViewer UI #68027

yctercero · 2020-06-02T21:36:16Z

Summary

The ExceptionViewer is a component that displays all of a user's exception list items. It will allow them to delete, edit, search and add exception items.

This is part 1 of the UI for the ExceptionViewer. Trying to keep PRs relatively small and found this was one way to split it up. This first part accomplishes the following:

adds helper functions that will be used in the ExceptionBuilder as well and offer ways to format and access the new exception list item structure
creates ExceptionItem component, this is the component that displays the exception item information
moves the and_or_badge component into the common folder
adds stories for the ExceptionItem to easily test changes (Note that the color of some things like the and_or_badge is a bit off, as the light gray color used for it isn't picked up in the mock eui theme)

To come in part 2:

ExceptionViewer component that includes search bar, add exception button and logic to view endpoint exceptions vs. detection exceptions

NOTE: temporarily created an ExceptionListItemSchema with the updated structure. Once the schema is updated in lists, all will be updated to use that

Testing

To test, run yarn storybook siem. A webpage will automatically open up once it's ready and you can view the different possible states of the ExceptionItem component.

Alternatively, you can plop the component in anywhere to render locally.

Screenshots

ExceptionItem comments hidden

ExceptionItem comments expanded

ExceptionItem dark mode

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
This was checked for keyboard-only and screenreader accessibility
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility, including a check against IE11

elasticmachine · 2020-06-02T21:36:19Z

Pinging @elastic/siem (Team:SIEM)

FrankHassanabad · 2020-06-02T22:09:28Z

x-pack/plugins/siem/public/common/components/exceptions/__examples__/index.stories.tsx

+      value: 'Global Signer',
+    },
+  ],
+});


You might be able to pull the mock items from the lists plugin since they live within the common section and be able to avoid adding another mock item here. The less mock data items we have, the less areas we have to update when we change structures.

If you have to expand that mock to include entries which it might not have:

x-pack/plugins/lists/common/schemas/response/exception_list_schema.mock.ts

I think that is ok, as well. Otherwise if this is just very specific for here, it is ok to leave IMHO.

Yea, I should've added a to do there. This was just temporary until the structures are updated in the lists plugin. But def, will remove these then.

yctercero · 2020-06-03T02:24:21Z

x-pack/plugins/siem/public/common/components/exceptions/mocks.ts

@@ -0,0 +1,89 @@
+/*


These will be deleted once exceptions structure is updated to use those mocks.

yctercero · 2020-06-03T12:37:05Z

x-pack/plugins/siem/public/common/components/exceptions/types.ts

@@ -0,0 +1,78 @@
+/*


NOTE: Many of these types will go away when exceptions structure updated and will use those types instead.

x-pack/plugins/siem/public/graphql/types.ts

x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx

x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx

FrankHassanabad

Thanks for all the updates and the nice and easy to read code.

LGTM

peluja1012

Looks great!

kibanamachine · 2020-06-04T16:00:25Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 878547e

History

💔 Build #51754 failed 8b91e10
💚 Build #51572 succeeded c24c1ff
💚 Build #51434 succeeded b19237f
💔 Build #51418 failed f0aeda8
💔 Build #51388 failed a8a68fa

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

### Summary The ExceptionViewer is a component that displays all of a user's exception list items. It will allow them to delete, edit, search and add exception items. This is part 1 of the UI for the ExceptionViewer. Trying to keep PRs relatively small and found this was one way to split it up. This first part accomplishes the following: - adds helper functions that will be used in the ExceptionBuilder as well and offer ways to format and access the new exception list item structure - creates ExceptionItem component, this is the component that displays the exception item information - moves the and_or_badge component into the common folder - adds stories for the ExceptionItem to easily test changes (Note that the color of some things like the and_or_badge is a bit off, as the light gray color used for it isn't picked up in the mock eui theme) # Conflicts: # x-pack/plugins/siem/public/common/components/and_or_badge/__examples__/index.stories.tsx # x-pack/plugins/siem/public/common/components/and_or_badge/index.test.tsx # x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx # x-pack/plugins/siem/public/common/components/and_or_badge/translations.ts # x-pack/plugins/siem/public/common/components/exceptions/__examples__/index.stories.tsx # x-pack/plugins/siem/public/common/components/exceptions/helpers.test.tsx # x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx # x-pack/plugins/siem/public/common/components/exceptions/mocks.ts # x-pack/plugins/siem/public/common/components/exceptions/operators.ts # x-pack/plugins/siem/public/common/components/exceptions/translations.ts # x-pack/plugins/siem/public/common/components/exceptions/types.ts # x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.test.tsx # x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx # x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.test.tsx # x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_entries.tsx # x-pack/plugins/siem/public/common/components/exceptions/viewer/index.test.tsx # x-pack/plugins/siem/public/common/components/exceptions/viewer/index.tsx # x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/__examples__/index.stories.tsx # x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/index.tsx

rylnd

Sorry for the late review, but it's mostly just some tips/tricks anyway. Nice work!

x-pack/plugins/siem/scripts/storybook.js

x-pack/plugins/siem/public/common/components/and_or_badge/__examples__/index.stories.tsx

x-pack/plugins/siem/public/common/components/and_or_badge/index.tsx

rylnd · 2020-06-03T19:06:21Z

x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx

+    },
+    {
+      title: i18n.DATE_CREATED,
+      value: moment(exceptionItem.created_at).format('MMMM Do YYYY @ HH:mm:ss'),


Should these respect the user's dateFormat settings?

rylnd · 2020-06-03T19:07:05Z

x-pack/plugins/siem/public/common/components/exceptions/helpers.tsx

+export const getFormattedComments = (comments: Comment[]): EuiCommentProps[] =>
+  comments.map((comment) => ({
+    username: comment.user,
+    timestamp: moment(comment.timestamp).format('on MMM Do YYYY @ HH:mm:ss'),


Ditto on respecting the dateFormat UI setting

x-pack/plugins/siem/public/common/components/exceptions/viewer/exception_details.tsx

kibanamachine · 2020-06-08T16:08:46Z

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

### Summary The ExceptionViewer is a component that displays all of a user's exception list items. It will allow them to delete, edit, search and add exception items. This is part 1 of the UI for the ExceptionViewer. Trying to keep PRs relatively small and found this was one way to split it up. This first part accomplishes the following: - adds helper functions that will be used in the ExceptionBuilder as well and offer ways to format and access the new exception list item structure - creates ExceptionItem component, this is the component that displays the exception item information - moves the and_or_badge component into the common folder - adds stories for the ExceptionItem to easily test changes (Note that the color of some things like the and_or_badge is a bit off, as the light gray color used for it isn't picked up in the mock eui theme)

yctercero · 2020-06-09T13:58:44Z

Sorry for the late review, but it's mostly just some tips/tricks anyway. Nice work!

Thanks @rylnd ! I followed up with your suggestions here: #68651

### Summary This PR is a follow up to #68027 . It brings it all together to complete the exceptions viewer component. This component is meant to display all exception items and allow a user to create, edit, delete, and search these exception items. - Moves ExceptionItem (from part 1) into its own folder - Adds exceptions_viewer_header component that includes the search, list toggle, and add exception buttons - Adds actual ExceptionViewer component - Updates the useExceptionList hook refresh function logic. Noticed that the previous version was creating some issues

) ### Summary This PR is a follow up to elastic#68027 . It brings it all together to complete the exceptions viewer component. This component is meant to display all exception items and allow a user to create, edit, delete, and search these exception items. - Moves ExceptionItem (from part 1) into its own folder - Adds exceptions_viewer_header component that includes the search, list toggle, and add exception buttons - Adds actual ExceptionViewer component - Updates the useExceptionList hook refresh function logic. Noticed that the previous version was creating some issues

…68729) ### Summary This PR is a follow up to #68027 . It brings it all together to complete the exceptions viewer component. This component is meant to display all exception items and allow a user to create, edit, delete, and search these exception items. - Moves ExceptionItem (from part 1) into its own folder - Adds exceptions_viewer_header component that includes the search, list toggle, and add exception buttons - Adds actual ExceptionViewer component - Updates the useExceptionList hook refresh function logic. Noticed that the previous version was creating some issues

### Summary This PR is a follow up to #68027 where some feedback didn't make it in. It cleans up the and_or_badge component, updates some css, and cleans up stories.

### Summary This PR is a follow up to elastic#68027 where some feedback didn't make it in. It cleans up the and_or_badge component, updates some css, and cleans up stories.

### Summary This PR is a follow up to #68027 where some feedback didn't make it in. It cleans up the and_or_badge component, updates some css, and cleans up stories.

elasticmachine · 2021-09-23T14:34:03Z

Pinging @elastic/security-solution (Team: SecuritySolution)

yctercero added 5 commits June 2, 2020 17:14

moved and_or_badge to common folder and added tests

24ed91f

updated references to new and_or_badge location

629b832

built out exception item component for viewer

335a720

added exception item component stories for easy testing

dd2b8c8

updated text to use i18n in spots missed

990d656

yctercero added release_note:enhancement Team:SIEM v8.0.0 v7.9.0 labels Jun 2, 2020

yctercero requested review from a team as code owners June 2, 2020 21:36

yctercero self-assigned this Jun 2, 2020

FrankHassanabad reviewed Jun 2, 2020

View reviewed changes

yctercero added 2 commits June 2, 2020 19:42

added tests for exception detail component and updated braking tests

bac11c9

finished adding tests and fixing lint issue

9496085

yctercero commented Jun 3, 2020

View reviewed changes

fixed test timestamps to be UTC

f3a1fba

yctercero commented Jun 3, 2020

View reviewed changes

yctercero added 3 commits June 3, 2020 09:46

fix failing test that was passing locally

a8a68fa

tests

f0aeda8

fix dates

b19237f

yctercero commented Jun 3, 2020

View reviewed changes

x-pack/plugins/siem/public/graphql/types.ts Outdated Show resolved Hide resolved