[Logs + Metrics UI] Clean up async plugin initialization

[weltenwort]

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

all infra bundles

After (in PR)

entry point

all infra bundles

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:

• Bump TypeScript to v3.9 #67666
• Enables tree shaking in production for plugins  #62390

[elasticmachine]

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

[afgomez]

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

[afgomez]

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

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 80efa79

History

• 💚 Build #52428 succeeded b43e62c
• 💚 Build #52142 succeeded d80b92b
• 💔 Build #52097 failed 9fcfc87
• 💔 Build #51871 failed cdcff8a
• 💔 Build #51783 failed 41873c5

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