Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Logs + Metrics UI] Clean up async plugin initialization #67654

Merged

Conversation

weltenwort
Copy link
Member

@weltenwort weltenwort commented May 28, 2020

Summary

This refactors the browser-side plugin bootstrap code such that the eagerly loaded bundle infra.plugin.js is minimal and the rest of the logs and metrics app bundles are loaded only when the apps are visited.

closes #62413
closes #66190

Changes

Reaching the goal stated above required a refactoring of the code paths to enable code splitting and asynchronous imports. More specifically, the following changes were made:

There now are singular entry points for the render trees of the metrics and logs apps in public/apps/metrics_app.tsx and public/apps/logs_app.tsx respectively. They each mount a set of kibana-core- and infra-specific providers from common_providers.tsx. The app registrations in public/plugin.ts now feature a single async import() of the respective renderApp function.

This alone didn't have the full intended effect, though, because the import chain of the alert definitions registered during the setup() phase pulled in large parts of the UI. Fortunately the the alerting team had the foresight to support lazily loaded React components for the alert condition editing UI. Introducing default exports (expression_lazy.ts and editor_lazy.ts) for the alert condition components and importing them wrapped in React.lazy components, though, caused the bundler to split out a large chunk of infra and core code for lazy loading.

At that point the largest part of the entry point bundle consisted of lodash. Replacing the single used isNumber function with a naive local implementation caused the bundle size to drop further once more.

Size Comparison

measurement size in master size in PR ratio
input (dev) 1480 KiB 136 KiB 0.09
output (dev) 2067 KiB 197 KiB 0.10
gzipped output (dev) 318 KiB 32 KiB 0.10
input (dist) 1660 KiB 157 KiB 0.09
output (dist) 1020 KiB 104 KiB 0.1
gzipped output (dev) 201 KiB 22 KiB 0.11

Before (in master)

entry point
image

all infra bundles
image

After (in PR)

entry point
image

all infra bundles
image

Testing

From the user's perspective everything should work as before. The infra.plugin.js bundle loaded eagerly should be significantly smaller.

IMHO there are some aspects that should be verified particularly thoroughly:

  • URL state handling
  • lazy loading of the alert flyouts from the inventory, metrics explorer, logs as well as the alerting management ui for all three alert types

Task breakdown

  • clean up app registration
  • clean up provider hierarchy
  • fix a problem with the inventory view URL state
  • remove unused files
  • remove old router files
  • fix logs app re-mounting problem

Future work

The platform rule of only allowing imports from the index files combined with the lack of tree shaking means that plugins statically import an unnecessarily large portion of other plugins even when they just access a single type definition. There is not much that can be done right now, but the introduction of type imports in TypeScript 3.8 will allow for most of these to disappear. There are platform efforts that work towards that:

@weltenwort weltenwort self-assigned this May 28, 2020
@weltenwort weltenwort force-pushed the logs-metrics-ui-cleanup-plugin-init branch from dad7aae to f4325d6 Compare June 2, 2020 17:21
@weltenwort weltenwort force-pushed the logs-metrics-ui-cleanup-plugin-init branch from f4325d6 to 8d2862a Compare June 3, 2020 11:53
@weltenwort weltenwort modified the milestones: Logs UI 7.9, Metrics UI 7.9 Jun 3, 2020
@weltenwort weltenwort added Feature:Logs UI Logs UI feature Feature:Metrics UI Metrics UI feature Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services labels Jun 3, 2020
@jasonrhodes jasonrhodes modified the milestones: Logs UI 7.9, Logs + ML Integration Jun 3, 2020
@weltenwort weltenwort marked this pull request as ready for review June 8, 2020 09:58
@weltenwort weltenwort requested a review from a team as a code owner June 8, 2020 09:58
@elasticmachine
Copy link
Contributor

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

@weltenwort weltenwort marked this pull request as draft June 8, 2020 09:59
@weltenwort weltenwort marked this pull request as ready for review June 8, 2020 09:59
Copy link
Contributor

@afgomez afgomez left a comment

Choose a reason for hiding this comment

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

I downloaded the branch and everything works. I'm taking a look at the code now.

@weltenwort weltenwort added release_note:skip Skip the PR/issue when compiling release notes v7.9.0 labels Jun 9, 2020
Copy link
Contributor

@afgomez afgomez left a comment

Choose a reason for hiding this comment

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

Very nice! I left some comments/questions but maybe you tried those already. If that's the case it is good to go.

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

History

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

@weltenwort weltenwort changed the title [Logs+Metrics UI] Clean up async plugin initialization [Logs + Metrics UI] Clean up async plugin initialization Jun 9, 2020
@weltenwort weltenwort merged commit 938771a into elastic:master Jun 9, 2020
@weltenwort weltenwort deleted the logs-metrics-ui-cleanup-plugin-init branch June 9, 2020 21:37
weltenwort added a commit to weltenwort/kibana that referenced this pull request Jun 9, 2020
This refactors the browser-side plugin bootstrap code such that the eagerly loaded bundle `infra.plugin.js` is minimal and the rest of the logs and metrics app bundles are loaded only when the apps are visited.
weltenwort added a commit that referenced this pull request Jun 10, 2020
… (#68715)

Backports the following commits to 7.x:
 - [Logs + Metrics UI] Clean up async plugin initialization (#67654)
gmmorris added a commit to gmmorris/kibana that referenced this pull request Jun 10, 2020
* master: (22 commits)
  Partial revert of "Sync Kerberos + Anonymous access tests with the latest `security/_authenticate` API (user roles now include roles of anonymous user)." (elastic#68624)
  adapt some snapshot test (elastic#68489)
  [APM] Service maps - Fix missing ML status for services with jobs but no anomalies (elastic#68486)
  [skip test] apis Kerberos security Kerberos authentication finishing SPNEGO should properly set cookie and authenticate user
  [SIEM][Exceptions] - ExceptionsViewer UI component part 2 (elastic#68294)
  Surface data streams in Index Management. (elastic#67806)
  Fix edit datasource not working following changes in elastic#67234 (elastic#68583)
  [Logs + Metrics UI] Clean up async plugin initialization (elastic#67654)
  APM Storybook fixes (elastic#68671)
  Upgrade EUI to v24.1.0 (elastic#68141)
  [ML] DF Analytics: Creation wizard part 2 (elastic#68462)
  [Uptime] Fix race on overview page query (elastic#67843)
  Prefer using npm_execpath when spawning Yarn (elastic#68673)
  [Security] [Cases] Attach timeline to existing case (elastic#68580)
  Use Search API in Vega (elastic#68257)
  [Component templates] Table view (elastic#68031)
  [Uptime] Added relative date info in cert status column (elastic#67612)
  [Endpoint] Re-enable Functional test case for Endpoint related pages (elastic#68445)
  run page_load_metrics tests in visual regresssion jobs (elastic#68570)
  Enable exhaustive-deps; correct any lint warnings (elastic#68453)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Logs UI Logs UI feature Feature:Metrics UI Metrics UI feature release_note:skip Skip the PR/issue when compiling release notes Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services v7.9.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add lazy loading to Infra AlertTypes [Logs + Metrics UI] Clean up async plugin bootstrapping
5 participants