[ML] Limit exposing shared static code through ml/public/index.ts. #77745

walterra · 2020-09-17T11:31:05Z

Summary

Fixes #77041

This PR is inspired by the fixes for the APM/Logs/Metrics to reduce the page load bundle size (see #71843, #67654).

The bundle size of the page load bundle gets reduced from 873.6KB to 40.2KB.

Clean up of lodash import methods, now all imports are done with just lodash instead of individual imports. Note this PR intentionally doesn't get rid of lodash imports we might be able to migrate away from to reduce code churn for this PR. lodash related tree shaking was fixed recently so it's fine again to import from the main lodash import (see Adding comment about importing lodash library #78156).
One problem we had is that we exported a lot of static code through plugins/ml/public. This increased the bundle size even if it wasn't needed at runtime. To avoid that, this PR exposes the async function getMlSharedImports(). This allows sharing public static code without making it part of the ml page load bundle. This is now used by the transforms plugin. I kept the exports getSeverityColor, getSeverityType, ANOMALY_SEVERITY as is to avoid having to refactor other consuming plugins. I changed a bit how this functions get exported though so the impact on bundle size is minimal. The platform team is exploring ways to improve export linting rules so hopefully all of this is just a temporary solution and at some point we'll be able to just do plain exports again.
Where applicable, files directly related to the page load bundle make use of import type to avoid importing runtime code.
<OverviewPage /> and <EmbeddableSwimLaneContainer /> use React.lazy() with React's Suspense to load code for an inner React tree on demand. I didn't do this for all routes since the other changes in this PR satisfy the reduction of the page load bundle, but it might be something we want to explore further in a follow up.
Code related to register-functions in public/plugin.ts now get loaded on demand to avoid making their code part of the page load bundle.

Checklist

Unit or functional tests were updated or added to match the most common scenarios
This was checked for breaking API changes and was labeled appropriately

elasticmachine · 2020-09-28T10:11:00Z

Pinging @elastic/ml-ui (:ml)

jgowdyelastic · 2020-09-28T11:20:13Z

x-pack/plugins/ml/public/plugin.ts

        }
      } else {
        // if ml is disabled in elasticsearch, disable ML in kibana
        this.appUpdater.next(() => ({
          status: AppStatus.inaccessible,
        }));
-        if (managementApp) {
-          managementApp.disable();


is this no longer needed? or was it never actually needed?

I ran into issues with a race condition with loading related code asynchronously for the management section when the section was first registered and only later a decision was made wether to enabled/disable it. I was able to solve it by flipping the checks around and both register and enable the ML part for management only inside the check where the decision is made to enable it here: https://github.com/elastic/kibana/pull/77745/files/98223ebfe878487f69933d3c7a142a0e42df46ef#diff-c9362f58636a69dc517555a6f0c7f28aR139

peteharverson

Tested and LGTM

jgowdyelastic

LGTM

walterra · 2020-09-29T08:14:51Z

@elasticmachine merge upstream

darnautov

LGTM! Great job 👍

kibanamachine · 2020-09-29T09:46:22Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: b15332d

Metrics [docs]

@kbn/optimizer bundle module count

id	value	diff	baseline
`ml`	1184	-237	1421
`transform`	335	-180	515
total		-417

async chunks size

id	value	diff	baseline
`ml`	10.5MB	⚠️ +1.6MB	8.9MB
`transform`	1.2MB	-70.2KB	1.2MB
total		⚠️ +1.6MB

distributable file count

id	value	diff	baseline
`default`	45843	+21	45822

page load bundle size

id	value	diff	baseline
`ml`	40.3KB	-694.5KB	734.8KB
`transform`	25.5KB	+229.0B	25.3KB
total		-694.3KB

History

💚 Build #77342 succeeded f0148ff
💔 Build #77319 failed 98223eb
💚 Build #77304 succeeded 9313f87
💚 Build #76759 succeeded 3fc99f9
💔 Build #76515 failed 59826c9

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

walterra · 2020-09-29T15:39:31Z

backport is waiting for #78667

…-to-timeline * 'master' of github.com:elastic/kibana: (22 commits) update apm index pattern (elastic#78732) 78024: move transform out of dataset (elastic#78216) [QA][Code Coverage] Upload the coverage static site before ingestion (elastic#78695) [Discover] Make _source field not clickable (elastic#78698) [Fleet] Rename Ingest Manager => Fleet, Fleet => Agents in the UI (elastic#78685) [APM] Review feedback from distribution + transaction metrics (elastic#78752) [Ingest pipelines] Add ability to stop pipeline simulation (elastic#78183) [CSM] Fix core vital legend background (elastic#78273) [Usage Collection] [schema] Support spreads + `canvas` definition (elastic#78481) fix lodash imports (elastic#78456) [Maps] Add layer type preview icons (elastic#78650) [APM] Use transaction metrics for distribution charts (elastic#78484) [Uptime] Ml anomaly alert edit (elastic#76909) [ML] Limit exposing shared static code through ml/public/index.ts. (elastic#77745) making expression debug info serializable (elastic#78727) fix lodahs imports in app-arch code (elastic#78582) Make Field a React.lazy export (elastic#78483) [Security Solution] Improves detections tests (elastic#77295) [TSVB] Different field format on different series is ignored (elastic#78138) RFC: Improve saved object migrations (elastic#66056) ...

kibanamachine · 2020-10-01T10:04:39Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 77745 or prevent reminders by adding the backport:skip label.

…lastic#77745) - Clean up lodash imports. - Import types only where applicable. - Reduce page load bundle size by fetching more code asynchronously. # Conflicts: # x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.test.tsx

…77745) (#79252) - Clean up lodash imports. - Import types only where applicable. - Reduce page load bundle size by fetching more code asynchronously.

walterra added :ml refactoring v7.10.0 labels Sep 17, 2020

walterra self-assigned this Sep 17, 2020

walterra added the release_note:skip Skip the PR/issue when compiling release notes label Sep 17, 2020

walterra force-pushed the ml-bundle branch 4 times, most recently from b72faee to 99a78f5 Compare September 23, 2020 12:08

walterra added 18 commits September 23, 2020 15:30

[ML] Avoid exposing shared static code through ml/public/index.ts.

31afb9d

[ML] Remove ml as dependency from transform.

8a34311

[ML] Disable import check for testing.

811e818

[ML] Fix import.

4366510

[ML] Import types only where applicable.

29635e8

[ML] Refactor lodash imports.

8623d94

[ML] Optimize exports.

b60094a

[ML] webpack tweaks.

0909c08

[ML] Fix loading overview page.

4800269

[ML] Fix imports across plugins.

c8be970

[ML] Get rid of lodash/chain. Fix reimports to transforms.

fd548b5

[ML] Restore accidentally deleted comment.

49a5af0

[ML] Fix Suspense related error with embedabble swim lane.

319eebd

[ML] Fix mock.

96f62c2

[ML] Fix imports.

8fb91bc

[ML] Hack to allow static cross plugin imports.

3f38edd

[ML] Tweak bundle setup.

d9501ad

[ML] Fix tests.

59826c9

walterra force-pushed the ml-bundle branch from 99a78f5 to 59826c9 Compare September 23, 2020 13:31

walterra added 2 commits September 23, 2020 18:22

Merge branch 'master' into ml-bundle

d0b75d9

[ML] Fix management section register.

3fc99f9

walterra added 4 commits September 28, 2020 10:38

Merge remote-tracking branch 'upstream/master' into ml-bundle

4aab13c

[ML] Improve lodash imports.

9313f87

[ML] Improve lodash imports for transform plugin.

f503dd4

[ML] Rename shared imports.

98223eb

walterra marked this pull request as ready for review September 28, 2020 10:10

walterra requested a review from a team as a code owner September 28, 2020 10:10

walterra requested review from jgowdyelastic, darnautov and peteharverson September 28, 2020 10:11

jgowdyelastic reviewed Sep 28, 2020

View reviewed changes

[ML] Fix types.

f0148ff

peteharverson approved these changes Sep 28, 2020

View reviewed changes

jgowdyelastic approved these changes Sep 29, 2020

View reviewed changes

Merge branch 'master' into ml-bundle

b15332d

darnautov approved these changes Sep 29, 2020

View reviewed changes

walterra merged commit 61aac71 into elastic:master Sep 29, 2020

walterra deleted the ml-bundle branch September 29, 2020 09:57

pheyos mentioned this pull request Sep 30, 2020

[ML] File upload card sometimes missing on Kibana home page #78965

Closed

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Oct 1, 2020

walterra mentioned this pull request Oct 2, 2020

[7.x] [ML] Limit exposing shared static code through ml/public/index.ts. (#77745) #79252

Merged

kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Oct 2, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Limit exposing shared static code through ml/public/index.ts. #77745

[ML] Limit exposing shared static code through ml/public/index.ts. #77745

walterra commented Sep 17, 2020 •

edited

Loading

elasticmachine commented Sep 28, 2020

jgowdyelastic Sep 28, 2020 •

edited

Loading

walterra Sep 28, 2020

peteharverson left a comment

jgowdyelastic left a comment

walterra commented Sep 29, 2020

darnautov left a comment

kibanamachine commented Sep 29, 2020

walterra commented Sep 29, 2020

kibanamachine commented Oct 1, 2020

[ML] Limit exposing shared static code through ml/public/index.ts. #77745

[ML] Limit exposing shared static code through ml/public/index.ts. #77745

Conversation

walterra commented Sep 17, 2020 • edited Loading

Summary

Checklist

elasticmachine commented Sep 28, 2020

jgowdyelastic Sep 28, 2020 • edited Loading

Choose a reason for hiding this comment

walterra Sep 28, 2020

Choose a reason for hiding this comment

peteharverson left a comment

Choose a reason for hiding this comment

jgowdyelastic left a comment

Choose a reason for hiding this comment

walterra commented Sep 29, 2020

darnautov left a comment

Choose a reason for hiding this comment

kibanamachine commented Sep 29, 2020

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

async chunks size

distributable file count

page load bundle size

History

walterra commented Sep 29, 2020

kibanamachine commented Oct 1, 2020

walterra commented Sep 17, 2020 •

edited

Loading

jgowdyelastic Sep 28, 2020 •

edited

Loading