Skip to content

[9.0] [Performance][Security Solution][2/4] - Timeline Performance (#212478)#217362

Closed
michaelolo24 wants to merge 4 commits intoelastic:9.0from
michaelolo24:backport/9.0/pr-212478
Closed

[9.0] [Performance][Security Solution][2/4] - Timeline Performance (#212478)#217362
michaelolo24 wants to merge 4 commits intoelastic:9.0from
michaelolo24:backport/9.0/pr-212478

Conversation

@michaelolo24
Copy link
Contributor

Backport

This will backport the following commits from main to 9.0:

Questions ?

Please refer to the Backport tool documentation

…#212478)

## Summary
Part 2 of elastic#212173

### Testing
For setup see testing section here:
elastic#212173 (comment)

**Areas/How to test:**
- For the following pages, test there are no `fields` api requests in
the inspector network tab when visiting from another page. IF YOU
REFRESH on any of these pages, you will see these requests as they are
called by the Query Search Bar and the `useInitSourcerer` call
  - Cases Page
  - Dashboard Page
  - Timelines Page
- Timeline
  - All Tabs
    - Does it show the loading screen on first interaction?
    - Does the `fields` api fire on first interaction with the tab
    - When you navigate back to those tabs, do they not re-render?
- All other pages hosting timeline
 - Do you feel like the performance is generally better?

### Background

When investigating the performance of the security solution application,
one of the issues that was observed was queries to the `fields` api on
pages that had no reason making that request (such as Cases, or the
Dashboards list view). This was due to the background background loaded
tabs of timeline loading the relevant `dataView` necessary for their
search functionality. When the fields request is significantly large
this can have a massive impact on the experience of users on pages that
should be relatively responsive.

To fix this a few changes were made.

1. First the `withDataView` HOC was removed as it was only used in 2
components that shared a parent - child relationship, and the child
`UnifiedTimeline` was only used in the parent. The hook that HOC calls
was not caching the dataView being created, so `dataView.create` was
being called up to 6 times unnecessarily. Now it is only called once in
each tab.

2. A new wrapper `OnDemandRenderer` (open to different naming 😅) was
created that will not render any of the nested tabs until they are
opened. Once they are opened, they stay in memory, to avoid re-calling
expensive api's every time a user switches tabs.
_Note_: There is currently a known issue where navigating between
various routes in security solution causes the whole application to
unmount and re-mount. Which means every page change will lead to
timeline needing to be re-loaded when the tab is opened. This is being
resolved in a separate effort.

3. Additional checks were added to the `useTimelineEvents` hook to limit
additional re-renders caused by unnecessary reference changes when the
underlying values never actually change

### Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
### Identify risks

(cherry picked from commit 2d8f3c1)

# Conflicts:
#	x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
@michaelolo24 michaelolo24 added the backport This PR is a backport of another PR label Apr 7, 2025
@michaelolo24 michaelolo24 enabled auto-merge (squash) April 7, 2025 16:07
@elasticmachine
Copy link
Contributor

elasticmachine commented May 7, 2025

💔 Build Failed

Failed CI Steps

Test Failures

  • [job] [logs] Jest Tests #6 / Host Summary Component it renders the default Host Summary
  • [job] [logs] Jest Tests #6 / Host Summary Component it renders the default Host Summary
  • [job] [logs] Jest Tests #6 / Host Summary Component it renders the panel view Host Summary
  • [job] [logs] Jest Tests #6 / Host Summary Component it renders the panel view Host Summary
  • [job] [logs] Explore - Security Solution Cypress Tests #3 / Inspect Explore pages inspect Hosts page inspect Hosts page
  • [job] [logs] Explore - Security Solution Cypress Tests #3 / Inspect Explore pages inspect Users page inspect Users page
  • [job] [logs] Jest Tests #7 / IP Overview Component rendering it renders the default IP Overview
  • [job] [logs] Jest Tests #7 / IP Overview Component rendering it renders the default IP Overview
  • [job] [logs] Jest Tests #7 / IP Overview Component rendering it renders the side panel IP overview
  • [job] [logs] Jest Tests #7 / IP Overview Component rendering it renders the side panel IP overview
  • [job] [logs] Jest Tests #6 / User Summary Component it renders the default User Summary
  • [job] [logs] Jest Tests #6 / User Summary Component it renders the default User Summary
  • [job] [logs] Jest Tests #6 / User Summary Component it renders the panel view User Summary
  • [job] [logs] Jest Tests #6 / User Summary Component it renders the panel view User Summary
  • [job] [logs] Jest Tests #12 / UserToolTip renders the tooltip when hovering

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
securitySolution 6946 6948 +2

Async chunks

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

id before after diff
securitySolution 8.8MB 8.8MB -12.7KB

Page load bundle

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

id before after diff
securitySolution 88.5KB 88.5KB -5.0B

History

auto-merge was automatically disabled June 6, 2025 13:02

Pull request was closed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants