Skip to content

[Security Solutions] Create a new User Details Flyout #154310

Merged
machadoum merged 7 commits intoelastic:mainfrom
machadoum:siem-explore-6154
Apr 18, 2023
Merged

[Security Solutions] Create a new User Details Flyout #154310
machadoum merged 7 commits intoelastic:mainfrom
machadoum:siem-explore-6154

Conversation

@machadoum
Copy link
Copy Markdown
Member

@machadoum machadoum commented Apr 4, 2023 •
edited
Loading

issue: https://github.com/elastic/security-team/issues/6154

Summary

Screenshot 2023-04-11 at 12 50 53Screenshot 2023-04-11 at 12 51 09

Screenshot 2023-04-11 at 12 51 01Screenshot 2023-04-11 at 12 47 21

Main changes

  • Creates a new user details flyout displayed on the Alerts page and timeline.
  • Introduce a new experimental feature newUserDetailsFlyout (disabled by default)
  • Create managedUserDetails API which fetches data from the index created by the Azure integration.

Miscellaneous

  • Delete unused lastSeen and first_seen types.
  • Delete unused jobKeyproperty from anomaly score components
  • Rename userDetails API and hook to observedUserDetails.
  • Add filterQuery property to useFirstLastSeen .
    • To use it inside the flyout, since the user flyout show data in the time range.
  • Create a simplified TestProvidersComponent for Storybook named StorybookProviders
    • It should allow us to render more complex components that require access to the redux store, theme, and kibana context.
    • Add experimentalFeatures property to queryFactory.buildDsl.

Out of scope:

  • The user can Snooze or Dismiss this prompt.
  • Displaying integration errors inside the flyout
  • User page

Storybook

Please check the "💚 Build Succeeded" message

How to test it

  • You need a kibana instance with user data and alerts
  • Enable the experimental feature newUserDetailsFlyout
  • Go to the alerts page or timeline
  • Open the user flyout

How to install the new Azure integration

The integration is under development, so you have to follow a series of steps:

  1. Install docker desktop for Mac (only for macOS)
  2. Install elastic-package https://github.com/elastic/elastic-package
  3. Add elastic-package to $PATH
  4. Download the integration source code from GitHub branch https://github.com/taylor-swanson/integrations/tree/entityanalytics_azure
  5. Start the local K8 cluster elastic-package stack up -vd --version 8.8.0-SNAPSHOT
  6. Enter the integration folder cd packages/entityanalytics_azure/
  7. Build the integration elastic-package build
  8. Update the registry with the new integration build elastic-package stack up -vd --services package-registry
  9. Open kibana integrations

Screenshot 2023-04-11 at 11 24 14

  1. Find entity analytics Azure integration (you need to check the 'display beta integrations' box)

Screenshot 2023-04-11 at 11 24 29

  1. Configured the integration with Azure tenant id, application id, and secret (ask @machadoum)
  2. Configured the integration with login URL, Login scopes, and API URL (ask @machadoum)

Checklist

Delete any items that are not applicable to this PR.

@machadoum machadoum added Feature:Entity Analytics Security Solution Entity Analytics features Feature:Users Security Solution Users feature labels Apr 4, 2023
@machadoum machadoum force-pushed the siem-explore-6154 branch 2 times, most recently from 1c4f619 to ad33d0f Compare April 5, 2023 11:56
@machadoum machadoum self-assigned this Apr 5, 2023
@machadoum machadoum added Team:Threat Hunting Security Solution Threat Hunting Team Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Explore release_note:skip Skip the PR/issue when compiling release notes labels Apr 5, 2023
@machadoum machadoum force-pushed the siem-explore-6154 branch 3 times, most recently from 92dc72e to 7a90532 Compare April 11, 2023 07:46
@machadoum machadoum force-pushed the siem-explore-6154 branch 3 times, most recently from b810197 to ab23557 Compare April 11, 2023 10:57
@machadoum machadoum marked this pull request as ready for review April 11, 2023 11:22
@machadoum machadoum requested review from a team as code owners April 11, 2023 11:22
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Apr 11, 2023

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Apr 11, 2023

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

@machadoum machadoum changed the title Siem explore 6154 [Security Solutions] Create a new User Details Flyout Apr 11, 2023
@angorayc
Copy link
Copy Markdown
Contributor

angorayc commented Apr 12, 2023 •
edited
Loading

Desk tested with
entityanalytics_azure.zip

  1. Move the file to security_solution_cypress/es_archives

  2. In security_solution folder
    node ../../../scripts/es_archiver load ../../test/security_solution_cypress/es_archives/entityanalytics_azure --config ../../test/functional/config.base.js --es-url=http://username:password@localhost:9200 --kibana-url=http://username:password@localhost:5601

Screenshot 2023-04-12 at 13 38 09

Screenshot 2023-04-12 at 13 47 52

angorayc
angorayc approved these changes Apr 13, 2023
View reviewed changes
Copy link
Copy Markdown
Contributor

@angorayc angorayc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work Pablo, thanks for adding this feature!

logeekal
logeekal approved these changes Apr 17, 2023
View reviewed changes
Copy link
Copy Markdown
Contributor

@logeekal logeekal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM mostly. Commented some comments/queries?

x-pack/plugins/security_solution/public/common/mock/storybook_providers.tsx Outdated
Copy link
Copy Markdown
Contributor

@logeekal logeekal Apr 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 . @PhilippeOberti , I guess you might have already implemented this in your own flyout PR. In case not, this might help you.

...ck/plugins/security_solution/public/timelines/components/side_panel/new_user_detail/hooks.ts Outdated
Comment on lines 32 to 61
Copy link
Copy Markdown
Contributor

@logeekal logeekal Apr 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Might make sense to extract it out to a separate config.

Copy link
Copy Markdown
Member Author

@machadoum machadoum Apr 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mean placing it in a constants.ts file?

Copy link
Copy Markdown
Contributor

@logeekal logeekal Apr 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes something like that. The reason I said it because labels and fields are hard coded and the array is quite big for both userData and managedUserDetails. You will have to pass userData/ managedUserDetails to get the complete object.

I don't have strong opinion about it.. you can decide. But at a later stage if more fields are added, I would prefer that /plugins/security_solution/public/timelines/components/side_panel/new_user_detail/hooks.ts is not changed at all.

...gins/security_solution/public/timelines/components/side_panel/new_user_detail/mocks/index.ts Outdated
Copy link
Copy Markdown
Contributor

@logeekal logeekal Apr 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this file be under __mocks__ directory or was it intentional?

Copy link
Copy Markdown
Member Author

@machadoum machadoum Apr 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just noticed that sometimes the mock folder is called mocks and other times __mocks__. I will rename it to __mock__ because it is used more often.

@logeekal Do you know what the difference is?

Copy link
Copy Markdown
Contributor

@logeekal logeekal Apr 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so from __mocks__ folder jest automatically picks up the mocks. It is a good way to create typesafe mocks. Here is the documentation: https://jestjs.io/docs/manual-mocks#mocking-user-modules.

But mocks can be used to mock one module in one file. Advantage is that you do not need to separately import mocks. It is automatically used.

Copy link
Copy Markdown
Member Author

@machadoum machadoum Apr 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't know that. It is very convenient. I will use it frequently. Thanks!

@machadoum
Copy link
Copy Markdown
Member Author

machadoum commented Apr 18, 2023

@elasticmachine merge upstream

@machadoum machadoum enabled auto-merge (squash) April 18, 2023 13:44
@kibana-ci
Copy link
Copy Markdown

kibana-ci commented Apr 18, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
securitySolution 3817 3826 +9

Async chunks

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

id before after diff
securitySolution 15.9MB 16.0MB +65.4KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
securitySolution 58.2KB 58.3KB +24.0B
Unknown metric groups

ESLint disabled line counts

id before after diff
securitySolution 432 435 +3

Total ESLint disabled count

id before after diff
securitySolution 512 515 +3

History

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

cc @machadoum

@machadoum machadoum merged commit 9ab0c45 into elastic:main Apr 18, 2023
@kibanamachine kibanamachine added v8.8.0 backport:skip This PR does not require backporting labels Apr 18, 2023
@spong spong mentioned this pull request Apr 25, 2023
Merged
spong added a commit that referenced this pull request Apr 26, 2023
@spong
[Security Solution] Fixes security_solution storybooks always renderi…
c7c5717 
…ng in a flyout (#155814)

With #154310 a global decorator
was added which caused all `security_solution` stories to be rendered in
a flyout. This PR changes the decorator to be local instead so the
`UserDetailsContentComponent` still renders in a flyout as expected, but
all other components are still within the main canvas.

### Before
<p align="center">
<img width="400"
src="https://user-images.githubusercontent.com/2946766/234429269-46cf527d-f7f2-4229-9ca1-ae227ce8e1b6.png"
/> <img width="400" alt="image"
src="https://user-images.githubusercontent.com/2946766/234429444-f38229ef-1113-4416-9bb4-233cc058ee44.png">
</p> 


### After
<p align="center">
<img width="400"
src="https://user-images.githubusercontent.com/2946766/234429580-82c99bb1-9064-4fc3-8b16-446fc418729d.png"
/> <img width="400" alt="image"
src="https://user-images.githubusercontent.com/2946766/234429444-f38229ef-1113-4416-9bb4-233cc058ee44.png">
</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@logeekal logeekal logeekal approved these changes

@angorayc angorayc angorayc approved these changes

Assignees

@machadoum machadoum

Labels

backport:skip This PR does not require backporting Feature:Entity Analytics Security Solution Entity Analytics features Feature:Users Security Solution Users feature release_note:skip Skip the PR/issue when compiling release notes Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting Security Solution Threat Hunting Team v8.8.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@machadoum @elasticmachine @angorayc @kibana-ci @logeekal @kibanamachine