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

[ES UI Shared] Remove 'brace' from es_ui_shared public #78033

Merged
merged 8 commits into from
Sep 24, 2020

Conversation

jloleysens
Copy link
Contributor

@jloleysens jloleysens commented Sep 21, 2020

Summary

Actions taken:

  • Move src/plugins/es_ui_shared/public/console_lang to packages/kbn-ace, creating @kbn/ace. The primary reason for this move is to reduce the initial amount of JS loaded when first starting Kibana.
  • Refactored useXJsonMode to not bundle an editor specific mode with it.
  • Moved all ace specific functionality, and import ... 'brace' statements to @kbn/ace.

The result of this is a ~50% shrink in es_ui_shared. From 1.9mb to 1.0mb unoptimised JS. es_ui_shared will shrink by a further ~30% once #74539 is merged.

To plugin owners

  • After these refactors it is important to check that your editors are working as expected (i.e., with triple quotes in JSON). I expect everything should work as before.

- moved expand and collapse logic back to es_ui_shared. It has
  nothing to do with ace
- refactor the useXJson hook which bundled XJsonMode with it.
  This was convenient but ultimately inflates the amount of code
  Kibana needs to first load up in the client. Users will need to
  import XJsonMode and instantiate it when they want to use it.
  Updated existing usage.
- Cleaned up Monaco namespace from es_ui_shared because of how
  useXJsonMode was refactored -- no longer exporting an editor
  specific instance means this code does not know about anything
  to do with code editors so it is decoupled from ace and monaco.
@jloleysens jloleysens added v8.0.0 Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more release_note:skip Skip the PR/issue when compiling release notes v7.10.0 labels Sep 21, 2020
@spalger
Copy link
Contributor

spalger commented Sep 21, 2020

Nice, I support this approach. It looks like the code is asynchronously loaded by plugins because they are all loading ace in their async bundles and now the code from es_ui_shared is also being loaded async as a by product. Thanks for working to find a good option and I hope that we can start to transition some of the existing ACE usage to monaco in the coming months.

@jloleysens
Copy link
Contributor Author

@elasticmachine merge upstream

@jloleysens jloleysens marked this pull request as ready for review September 22, 2020 11:42
@jloleysens jloleysens requested review from a team as code owners September 22, 2020 11:42
@elasticmachine
Copy link
Contributor

Pinging @elastic/es-ui (Team:Elasticsearch UI)

Copy link
Contributor

@YulNaumenko YulNaumenko left a comment

Choose a reason for hiding this comment

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

triggers_actions_ui changes LGTM

Copy link
Contributor

@spalger spalger left a comment

Choose a reason for hiding this comment

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

LGTM, the 500kb increases of specific application async assets is offset by the 500kb decrease in page load asset size in my eyes.

@jloleysens
Copy link
Contributor Author

@elasticmachine merge upstream

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

id value diff baseline
console 174 +11 163
esUiShared 210 -19 229
ml 1422 +14 1408
searchprofiler 89 +13 76
transform 516 +16 500
triggers_actions_ui 276 +15 261
watcher 239 +15 224
total +65

async chunks size

id value diff baseline
console 1.2MB +84.3KB 1.1MB
enterpriseSearch 632.2KB +82.0B 632.1KB
ingestPipelines 769.3KB +2.0B 769.3KB
ml 8.9MB ⚠️ +756.8KB 8.1MB
searchprofiler 847.6KB +132.7KB 714.9KB
transform 1.4MB ⚠️ +750.6KB 660.4KB
triggers_actions_ui 1.5MB ⚠️ +593.4KB 978.6KB
watcher 1.2MB ⚠️ +608.1KB 602.5KB
total ⚠️ +2.9MB

page load bundle size

id value diff baseline
esUiShared 397.6KB -596.6KB 994.2KB
ingestPipelines 40.9KB -1.0B 40.9KB
transform 25.3KB -254.0B 25.5KB
triggers_actions_ui 288.3KB +117.0B 288.2KB
upgradeAssistant 64.6KB +41.0B 64.5KB
watcher 28.1KB -253.0B 28.3KB
total -596.9KB

distributable file count

id value diff baseline
default 45896 +19 45877
oss 26629 +13 26616
total +32

History

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

Copy link
Contributor

@sebelga sebelga left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks for creating those packages 👍

Copy link
Contributor

@darnautov darnautov left a comment

Choose a reason for hiding this comment

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

ML and Transforms changes LGTM

@jloleysens jloleysens merged commit 38e63d1 into elastic:master Sep 24, 2020
@jloleysens jloleysens deleted the es-ui-shared/create-kbn-ace branch September 24, 2020 14:02
jloleysens added a commit to jloleysens/kibana that referenced this pull request Sep 24, 2020
* major wip

* major wip

* fix worker creation leak

* just copy the file over for now

* Remove xjson from static and from es_ui_shared entirely

- moved expand and collapse logic back to es_ui_shared. It has
  nothing to do with ace
- refactor the useXJson hook which bundled XJsonMode with it.
  This was convenient but ultimately inflates the amount of code
  Kibana needs to first load up in the client. Users will need to
  import XJsonMode and instantiate it when they want to use it.
  Updated existing usage.
- Cleaned up Monaco namespace from es_ui_shared because of how
  useXJsonMode was refactored -- no longer exporting an editor
  specific instance means this code does not know about anything
  to do with code editors so it is decoupled from ace and monaco.

* fix export of collapse and expand string literals

Co-authored-by: Elastic Machine <[email protected]>
# Conflicts:
#	.github/CODEOWNERS
#	src/plugins/es_ui_shared/kibana.json
jloleysens added a commit that referenced this pull request Sep 28, 2020
…#78427)

* [ES UI Shared] Remove 'brace' from es_ui_shared public (#78033)

* major wip

* major wip

* fix worker creation leak

* just copy the file over for now

* Remove xjson from static and from es_ui_shared entirely

- moved expand and collapse logic back to es_ui_shared. It has
  nothing to do with ace
- refactor the useXJson hook which bundled XJsonMode with it.
  This was convenient but ultimately inflates the amount of code
  Kibana needs to first load up in the client. Users will need to
  import XJsonMode and instantiate it when they want to use it.
  Updated existing usage.
- Cleaned up Monaco namespace from es_ui_shared because of how
  useXJsonMode was refactored -- no longer exporting an editor
  specific instance means this code does not know about anything
  to do with code editors so it is decoupled from ace and monaco.

* fix export of collapse and expand string literals

Co-authored-by: Elastic Machine <[email protected]>
# Conflicts:
#	.github/CODEOWNERS
#	src/plugins/es_ui_shared/kibana.json

* import brace json mode in raw vis editor

Co-authored-by: Elastic Machine <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release_note:skip Skip the PR/issue when compiling release notes Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more v7.10.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants