Skip to content

[Security Solution][Timeline] - Open Host & Network details in side panel#90064

Merged
michaelolo24 merged 2 commits intoelastic:masterfrom
michaelolo24:add-flyout-details
Feb 11, 2021
Merged

[Security Solution][Timeline] - Open Host & Network details in side panel#90064
michaelolo24 merged 2 commits intoelastic:masterfrom
michaelolo24:add-flyout-details

Conversation

@michaelolo24
Copy link
Copy Markdown
Contributor

@michaelolo24 michaelolo24 commented Feb 2, 2021

Summary

This PR introduces the network details and host details to the side panel. When clicking on the host.name or any IP fields (i.e. host.ip, destination.ip, or source.ip) within timeline, it will first open those details in a side panel (pictured below) from which you can then click View details page to visit their associated pages.

Completes: https://github.com/elastic/security-team/issues/630

General Component Changes

  1. Consolidated event_details and event_details_flyout to the timeline/components/side_panel/event_details under the DetailsPanel component.
  2. Created side_panel/host_details which utilizes the Host_Overview component
  3. Created side_panel/network_details which utilizes the IP_Overview component
  4. Updated Host_Overview and IP_Overview to take the isFlyoutView property to display sections in a single column

General Reducer/State Changes

  1. Changed expandedEvent to expandedDetail which now stores the panelView as well as params for that view's request (we use a similar pattern in the analyze event tool)
  2. Made the same change in the active_timeline_context component as well
  3. Added a stateful_event_context which for now only stores timelineId and tabType. This was done to avoid some prop drilling.

Screen Shot 2021-02-04 at 3 24 49 PM

Screen Shot 2021-02-04 at 3 24 38 PM

Checklist

@michaelolo24 michaelolo24 added v8.0.0 v7.12.0 Team:Threat Hunting Security Solution Threat Hunting Team Feature:Timeline Security Solution Timeline feature labels Feb 2, 2021
@michaelolo24 michaelolo24 force-pushed the add-flyout-details branch 3 times, most recently from 9119393 to 4b72fe2 Compare February 3, 2021 00:13
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

NOTE: The changes in this file were ported over from this PR till it's merged (#88642)

@michaelolo24 michaelolo24 force-pushed the add-flyout-details branch 2 times, most recently from dcf0b5a to 7ba851d Compare February 3, 2021 17:57
@michaelolo24 michaelolo24 added release_note:enhancement Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. labels Feb 4, 2021
@michaelolo24 michaelolo24 marked this pull request as ready for review February 4, 2021 21:14
@michaelolo24 michaelolo24 requested review from a team as code owners February 4, 2021 21:14
@elasticmachine
Copy link
Copy Markdown
Contributor

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

@elasticmachine
Copy link
Copy Markdown
Contributor

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

@spalger
Copy link
Copy Markdown
Contributor

spalger commented Feb 4, 2021

jenkins test this

@michaelolo24 michaelolo24 requested a review from a team as a code owner February 9, 2021 01:03
@michaelolo24 michaelolo24 force-pushed the add-flyout-details branch 3 times, most recently from 13df001 to 2a7aeca Compare February 10, 2021 14:19
Copy link
Copy Markdown
Contributor

@XavierM XavierM left a comment

Choose a reason for hiding this comment

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

@michaelolo24 thank you so much for doing this feature, I really do enjoy the new flow of the app inside of the timeline and detection page.

Also your implementation will be really useful to add new fly out inside of the timeline, I think it will be really cool to add endpoint details soon ;)

@kibanamachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
securitySolution 2180 2186 +6

Async chunks

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

id before after diff
securitySolution 7.5MB 7.5MB +17.5KB

Page load bundle

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

id before after diff
securitySolution 234.0KB 233.9KB -8.0B

History

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

@michaelolo24 michaelolo24 merged commit 1fdd6ad into elastic:master Feb 11, 2021
@michaelolo24 michaelolo24 deleted the add-flyout-details branch February 11, 2021 16:15
michaelolo24 added a commit to michaelolo24/kibana that referenced this pull request Feb 11, 2021
…anel (elastic#90064)

# Conflicts:
#	x-pack/plugins/security_solution/public/timelines/components/timeline/notes_tab_content/index.tsx
michaelolo24 added a commit that referenced this pull request Feb 11, 2021
…side panel (#90064) (#91190)

# Conflicts:
#	x-pack/plugins/security_solution/public/timelines/components/timeline/notes_tab_content/index.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature:Timeline Security Solution Timeline feature release_note:enhancement Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting Security Solution Threat Hunting Team v7.12.0 v8.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants