[Security Solution][POC] Add event navigation in expandable flyout

[christineweng]

Summary

This PR builds on this POC and adds event navigation within the new expandable flyout framework in explore pages. This mimics the current discover experience, when an user open the flyout, the row is highlighted. When user navigate to the next/prev document, the row highlight is also updated.

Screen.Recording.2023-10-10.at.2.39.59.PM.mov

Not included in this PR

• Handle paging when the table row index changes (i.e. user sort table). In current discover table, the navigation is hidden when index changes
• Revisit the loading stage, currently loading spinner causes flyout to flash
• Handle resetting highlighting when closing the flyout. setExpandedDoc is passed in as context for this POC, but for it to be accessible when flyout closes, may need to bring this up higher level...

Considerations for future (actual) implementation

• This POC passes the entire data array (docs) to flyout context due to discover table requires the document for expandedDoc and setExpandedDoc. Obviously this is not good on performance, since alert table currently capped at 100,000 records
  • Should investigate if it is possible to change the prop to be an array of docs without data, i.e. array of object that has id and index.

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
• Documentation was added for features that require explanation or tutorials
• 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)
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release.

When forming the risk matrix, consider some of the following examples and how they may potentially impact the change:

Risk	Probability	Severity	Mitigation/Notes
Multiple Spaces—unexpected behavior in non-default Kibana Space.	Low	High	Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces.
Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks.	High	Low	Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure.
Code should gracefully handle cases when feature X or plugin Y are disabled.	Medium	High	Unit tests will verify that any feature flag or plugin combination still results in our service operational.
See more potential risk examples

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[kibana-ci]

💔 Build Failed

• Buildkite Build
• Commit: bccf64e
• Interpreting CI Failures

Failed CI Steps

• Build API Docs
• Jest Tests #7
• Jest Tests #9
• Serverless Investigations - Security Solution Cypress Tests #1
• Serverless Investigations - Security Solution Cypress Tests #1
• Serverless Investigations - Security Solution Cypress Tests #2
• Serverless Investigations - Security Solution Cypress Tests #2
• Serverless Investigations - Security Solution Cypress Tests #3
• Serverless Investigations - Security Solution Cypress Tests #3
• Serverless Investigations - Security Solution Cypress Tests #4
• Serverless Investigations - Security Solution Cypress Tests #4
• Security Solution Cypress Tests #9
• Security Solution Cypress Tests #14
• Security Solution Cypress Tests #14
• Explore - Security Solution Cypress Tests #4
• Explore - Security Solution Cypress Tests #4
• Investigations - Security Solution Cypress Tests #1
• Investigations - Security Solution Cypress Tests #1
• Investigations - Security Solution Cypress Tests #2
• Investigations - Security Solution Cypress Tests #2
• Investigations - Security Solution Cypress Tests #3
• Investigations - Security Solution Cypress Tests #3
• Investigations - Security Solution Cypress Tests #4
• Investigations - Security Solution Cypress Tests #4
• Investigations - Security Solution Cypress Tests #5
• Investigations - Security Solution Cypress Tests #5
• Investigations - Security Solution Cypress Tests #6
• Investigations - Security Solution Cypress Tests #6
• Investigations - Security Solution Cypress Tests #7
• Investigations - Security Solution Cypress Tests #7
• Investigations - Security Solution Cypress Tests #8
• Investigations - Security Solution Cypress Tests #8
• Osquery Cypress Tests #2
• Osquery Cypress Tests #2
• Osquery Cypress Tests #3
• Osquery Cypress Tests #3
• Security Solution Cypress tests, burning changed specs #1
• Osquery Cypress Tests, burning changed specs
• Check Types

Test Failures

• [job] [logs] Jest Tests #7 / should not render chat button in the title if should not be shown
• [job] [logs] Jest Tests #7 / should not render share button in the title if alert is missing url info
• [job] [logs] Jest Tests #7 / should render chat button in the title
• [job] [logs] Jest Tests #7 / should render component
• [job] [logs] Jest Tests #7 / should render default document detail title if document is not an alert
• [job] [logs] Jest Tests #7 / should render rule name in the title if document is an alert
• [job] [logs] Jest Tests #7 / should render share button in the title
• [job] [logs] Jest Tests #7 / should not render expand details button if flyout is not expandable
• [job] [logs] Jest Tests #7 / should render expand details button if flyout is expandable
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #1 / Alert details expandable flyout left panel entities "before each" hook for "should display host details and user details under Insights Entities" "before each" hook for "should display host details and user details under Insights Entities"
• [job] [logs] Investigations - Security Solution Cypress Tests #7 / Alert details expandable flyout left panel entities "before each" hook for "should display host details and user details under Insights Entities" "before each" hook for "should display host details and user details under Insights Entities"
• [job] [logs] Investigations - Security Solution Cypress Tests #7 / Alert details expandable flyout left panel entities "before each" hook for "should display host details and user details under Insights Entities" "before each" hook for "should display host details and user details under Insights Entities"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #4 / Alert details expandable flyout left panel investigation "before each" hook for "should display empty response message" "before each" hook for "should display empty response message"
• [job] [logs] Investigations - Security Solution Cypress Tests #2 / Alert details expandable flyout left panel investigation "before each" hook for "should display empty response message" "before each" hook for "should display empty response message"
• [job] [logs] Investigations - Security Solution Cypress Tests #2 / Alert details expandable flyout left panel investigation "before each" hook for "should display empty response message" "before each" hook for "should display empty response message"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #4 / Alert details expandable flyout left panel investigation "before each" hook for "should display empty response message" "before each" hook for "should display empty response message"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #2 / Alert details expandable flyout left panel investigation "before each" hook for "should display investigation guide" "before each" hook for "should display investigation guide"
• [job] [logs] Investigations - Security Solution Cypress Tests #8 / Alert details expandable flyout left panel investigation "before each" hook for "should display investigation guide" "before each" hook for "should display investigation guide"
• [job] [logs] Investigations - Security Solution Cypress Tests #8 / Alert details expandable flyout left panel investigation "before each" hook for "should display investigation guide" "before each" hook for "should display investigation guide"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #2 / Alert details expandable flyout left panel investigation "before each" hook for "should display investigation guide" "before each" hook for "should display investigation guide"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #3 / Alert details expandable flyout left panel prevalence "before each" hook for "should display prevalence tab" "before each" hook for "should display prevalence tab"
• [job] [logs] Investigations - Security Solution Cypress Tests #1 / Alert details expandable flyout left panel prevalence "before each" hook for "should display prevalence tab" "before each" hook for "should display prevalence tab"
• [job] [logs] Investigations - Security Solution Cypress Tests #1 / Alert details expandable flyout left panel prevalence "before each" hook for "should display prevalence tab" "before each" hook for "should display prevalence tab"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #3 / Alert details expandable flyout left panel prevalence "before each" hook for "should display prevalence tab" "before each" hook for "should display prevalence tab"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #4 / Alert details expandable flyout right panel json tab "before each" hook for "should display the json component" "before each" hook for "should display the json component"
• [job] [logs] Investigations - Security Solution Cypress Tests #6 / Alert details expandable flyout right panel json tab "before each" hook for "should display the json component" "before each" hook for "should display the json component"
• [job] [logs] Investigations - Security Solution Cypress Tests #6 / Alert details expandable flyout right panel json tab "before each" hook for "should display the json component" "before each" hook for "should display the json component"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #4 / Alert details expandable flyout right panel json tab "before each" hook for "should display the json component" "before each" hook for "should display the json component"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #1 / Alert details expandable flyout right panel overview tab about section should display about section should display about section
• [job] [logs] Investigations - Security Solution Cypress Tests #7 / Alert details expandable flyout right panel overview tab about section should display about section should display about section
• [job] [logs] Investigations - Security Solution Cypress Tests #7 / Alert details expandable flyout right panel overview tab about section should display about section should display about section
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #1 / Alert details expandable flyout right panel overview tab insights section should display entities section should display entities section
• [job] [logs] Investigations - Security Solution Cypress Tests #7 / Alert details expandable flyout right panel overview tab insights section should display entities section should display entities section
• [job] [logs] Investigations - Security Solution Cypress Tests #7 / Alert details expandable flyout right panel overview tab insights section should display entities section should display entities section
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #1 / Alert details expandable flyout right panel overview tab insights section should display threat intelligence section should display threat intelligence section
• [job] [logs] Investigations - Security Solution Cypress Tests #7 / Alert details expandable flyout right panel overview tab insights section should display threat intelligence section should display threat intelligence section
• [job] [logs] Investigations - Security Solution Cypress Tests #7 / Alert details expandable flyout right panel overview tab insights section should display threat intelligence section should display threat intelligence section
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #1 / Alert details expandable flyout right panel overview tab investigation section should display investigation section should display investigation section
• [job] [logs] Investigations - Security Solution Cypress Tests #7 / Alert details expandable flyout right panel overview tab investigation section should display investigation section should display investigation section
• [job] [logs] Investigations - Security Solution Cypress Tests #7 / Alert details expandable flyout right panel overview tab investigation section should display investigation section should display investigation section
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #1 / Alert details expandable flyout right panel overview tab response section should display empty message should display empty message
• [job] [logs] Investigations - Security Solution Cypress Tests #7 / Alert details expandable flyout right panel overview tab response section should display empty message should display empty message
• [job] [logs] Investigations - Security Solution Cypress Tests #7 / Alert details expandable flyout right panel overview tab response section should display empty message should display empty message
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #2 / Alert details expandable flyout right panel table tab "before each" hook for "should display and filter the table" "before each" hook for "should display and filter the table"
• [job] [logs] Investigations - Security Solution Cypress Tests #8 / Alert details expandable flyout right panel table tab "before each" hook for "should display and filter the table" "before each" hook for "should display and filter the table"
• [job] [logs] Investigations - Security Solution Cypress Tests #8 / Alert details expandable flyout right panel table tab "before each" hook for "should display and filter the table" "before each" hook for "should display and filter the table"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #2 / Alert details expandable flyout right panel table tab "before each" hook for "should display and filter the table" "before each" hook for "should display and filter the table"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #2 / Alert details expandable flyout rule preview panel alert reason preview "before each" hook for "should display alert reason preview" "before each" hook for "should display alert reason preview"
• [job] [logs] Investigations - Security Solution Cypress Tests #4 / Alert details expandable flyout rule preview panel alert reason preview "before each" hook for "should display alert reason preview" "before each" hook for "should display alert reason preview"
• [job] [logs] Investigations - Security Solution Cypress Tests #4 / Alert details expandable flyout rule preview panel alert reason preview "before each" hook for "should display alert reason preview" "before each" hook for "should display alert reason preview"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #2 / Alert details expandable flyout rule preview panel alert reason preview "before each" hook for "should display alert reason preview" "before each" hook for "should display alert reason preview"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #3 / Alert details expandable flyout rule preview panel rule preview "before each" hook for "should display rule preview and its sub sections" "before each" hook for "should display rule preview and its sub sections"
• [job] [logs] Investigations - Security Solution Cypress Tests #5 / Alert details expandable flyout rule preview panel rule preview "before each" hook for "should display rule preview and its sub sections" "before each" hook for "should display rule preview and its sub sections"
• [job] [logs] Investigations - Security Solution Cypress Tests #5 / Alert details expandable flyout rule preview panel rule preview "before each" hook for "should display rule preview and its sub sections" "before each" hook for "should display rule preview and its sub sections"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #3 / Alert details expandable flyout rule preview panel rule preview "before each" hook for "should display rule preview and its sub sections" "before each" hook for "should display rule preview and its sub sections"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #4 / Bulk Investigate in Timeline Host -> Events Viewer "before each" hook for "Adding multiple events to the timeline should be successful" "before each" hook for "Adding multiple events to the timeline should be successful"
• [job] [logs] Investigations - Security Solution Cypress Tests #5 / Bulk Investigate in Timeline Host -> Events Viewer "before each" hook for "Adding multiple events to the timeline should be successful" "before each" hook for "Adding multiple events to the timeline should be successful"
• [job] [logs] Investigations - Security Solution Cypress Tests #5 / Bulk Investigate in Timeline Host -> Events Viewer "before each" hook for "Adding multiple events to the timeline should be successful" "before each" hook for "Adding multiple events to the timeline should be successful"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #4 / Bulk Investigate in Timeline Host -> Events Viewer "before each" hook for "Adding multiple events to the timeline should be successful" "before each" hook for "Adding multiple events to the timeline should be successful"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #4 / Bulk Investigate in Timeline Host -> Sessions Viewer "before each" hook for "Adding multiple events to the timeline should be successful" "before each" hook for "Adding multiple events to the timeline should be successful"
• [job] [logs] Investigations - Security Solution Cypress Tests #5 / Bulk Investigate in Timeline Host -> Sessions Viewer "before each" hook for "Adding multiple events to the timeline should be successful" "before each" hook for "Adding multiple events to the timeline should be successful"
• [job] [logs] Investigations - Security Solution Cypress Tests #5 / Bulk Investigate in Timeline Host -> Sessions Viewer "before each" hook for "Adding multiple events to the timeline should be successful" "before each" hook for "Adding multiple events to the timeline should be successful"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #4 / Bulk Investigate in Timeline Host -> Sessions Viewer "before each" hook for "Adding multiple events to the timeline should be successful" "before each" hook for "Adding multiple events to the timeline should be successful"
• [job] [logs] Security Solution Cypress Tests #14 / EQL rules Detection rules, EQL Creates and enables a new EQL rule Creates and enables a new EQL rule
• [job] [logs] Security Solution Cypress Tests #14 / EQL rules Detection rules, EQL Creates and enables a new EQL rule Creates and enables a new EQL rule
• [job] [logs] Security Solution Cypress Tests #14 / EQL rules Detection rules, sequence EQL Creates and enables a new EQL rule with a sequence Creates and enables a new EQL rule with a sequence
• [job] [logs] Security Solution Cypress Tests #14 / EQL rules Detection rules, sequence EQL Creates and enables a new EQL rule with a sequence Creates and enables a new EQL rule with a sequence
• [job] [logs] Explore - Security Solution Cypress Tests #4 / Events Viewer Events behavior "before each" hook for "filters the events by applying filter criteria from the search bar at the top of the page" "before each" hook for "filters the events by applying filter criteria from the search bar at the top of the page"
• [job] [logs] Explore - Security Solution Cypress Tests #4 / Events Viewer Events behavior "before each" hook for "filters the events by applying filter criteria from the search bar at the top of the page" "before each" hook for "filters the events by applying filter criteria from the search bar at the top of the page"
• [job] [logs] Explore - Security Solution Cypress Tests #4 / Events Viewer Events viewer fields behaviour "before each" hook for "adds a field to the events viewer when the user clicks the checkbox" "before each" hook for "adds a field to the events viewer when the user clicks the checkbox"
• [job] [logs] Explore - Security Solution Cypress Tests #4 / Events Viewer Events viewer fields behaviour "before each" hook for "adds a field to the events viewer when the user clicks the checkbox" "before each" hook for "adds a field to the events viewer when the user clicks the checkbox"
• [job] [logs] Explore - Security Solution Cypress Tests #4 / Events Viewer Fields rendering "before each" hook for "displays "view all" option by default" "before each" hook for "displays "view all" option by default"
• [job] [logs] Explore - Security Solution Cypress Tests #4 / Events Viewer Fields rendering "before each" hook for "displays "view all" option by default" "before each" hook for "displays "view all" option by default"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #4 / Expandable flyout left panel correlations "before each" hook for "should render correlations details correctly" "before each" hook for "should render correlations details correctly"
• [job] [logs] Investigations - Security Solution Cypress Tests #6 / Expandable flyout left panel correlations "before each" hook for "should render correlations details correctly" "before each" hook for "should render correlations details correctly"
• [job] [logs] Investigations - Security Solution Cypress Tests #6 / Expandable flyout left panel correlations "before each" hook for "should render correlations details correctly" "before each" hook for "should render correlations details correctly"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #4 / Expandable flyout left panel correlations "before each" hook for "should render correlations details correctly" "before each" hook for "should render correlations details correctly"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #1 / Expandable flyout left panel threat intelligence "before each" hook for "should serialize its state to url" "before each" hook for "should serialize its state to url"
• [job] [logs] Investigations - Security Solution Cypress Tests #3 / Expandable flyout left panel threat intelligence "before each" hook for "should serialize its state to url" "before each" hook for "should serialize its state to url"
• [job] [logs] Investigations - Security Solution Cypress Tests #3 / Expandable flyout left panel threat intelligence "before each" hook for "should serialize its state to url" "before each" hook for "should serialize its state to url"
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #3 / Expandable flyout state sync should test flyout url sync should test flyout url sync
• [job] [logs] Investigations - Security Solution Cypress Tests #1 / Expandable flyout state sync should test flyout url sync should test flyout url sync
• [job] [logs] Investigations - Security Solution Cypress Tests #1 / Expandable flyout state sync should test flyout url sync should test flyout url sync
• [job] [logs] Serverless Investigations - Security Solution Cypress Tests #3 / Expandable flyout state sync should test flyout url sync should test flyout url sync
• [job] [logs] Explore - Security Solution Cypress Tests #4 / Pagination Host uncommon processes table) pagination keeps track of page results when tabs change pagination keeps track of page results when tabs change
• [job] [logs] Explore - Security Solution Cypress Tests #4 / Pagination Host uncommon processes table) pagination keeps track of page results when tabs change pagination keeps track of page results when tabs change
• [job] [logs] Investigations - Security Solution Cypress Tests #6 / persistent timeline "before all" hook for "persist the deletion of a column" "before all" hook for "persist the deletion of a column"
• [job] [logs] Investigations - Security Solution Cypress Tests #6 / persistent timeline "before all" hook for "persist the deletion of a column" "before all" hook for "persist the deletion of a column"
• [job] [logs] Jest Tests #9 / PreviewHistogram when there is no data it renders an empty histogram and table
• [job] [logs] Security Solution Cypress Tests #9 / Ransomware Detection Alerts Ransomware in Timelines Renders ransomware entries in timelines table Renders ransomware entries in timelines table

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	4636	4729	+93

Async chunks

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

id	before	after	diff
securitySolution	13.0MB	13.0MB	+70.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	63.0KB	63.1KB	+63.0B

Unknown metric groups

async chunk count

id	before	after	diff
securitySolution	51	53	+2

History

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