[ES UI Shared] Monaco XJSON #67485

jloleysens · 2020-05-27T14:23:08Z

Summary

Add XJSON mode support for Monaco. The intention is that this be used inside of Watcher, ML and any other new editors that we build so that we are able to use Monaco instead of Ace.

How to test

Start Kibana
Go to Painless Lab (this has been hacked to be an XJSON mode editor temporarily)
Paste the following XJSON into the editor:

{
  "test": """test""",
  "script": """ while if else true """,
  "test": "sweet!",
  "else": true,
  "canBe": false,
  "object": {
    "inside": {
      "is": "another"
    }
  }
}

The XJSON should be highlighted correctly and indicate that there is a duplicate key "test".

Owners of specific sections

Note to ops, created a new package called @kbn/langs. In future I would like to put the grammar parsers for Console here too. This is similar to the @kbn/interpreter folder which is apparently going to be removed before (8.0.0) CC (@ppisljar). The alternative is that we put this inside es-ui-shared too. Any alternate suggestions welcome of course. I was thinking we can also put SQL, EQL and any other parsers we build here (if we build them).
Note to ML (@darnautov) please test the painless lab as described above, and test that your previous use of useXJsonMode works as expected

TODO

Implement an analogous XJSON mode hook for use with monaco.
Revert the dummy Painless Lab integration

Screenshots

Additional Context

See this issue: #57435

elasticmachine · 2020-05-27T14:23:11Z

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

jloleysens · 2020-05-29T16:30:19Z

@spalger I've created a new package @kbn/monaco. This has a file monaco.ts that is directly imported and bundled into @kbn/ui-shared-deps as before. Let me know if this is out of order regarding what we had discussed.

packages/kbn-monaco/xjson/README.md

spalger · 2020-05-30T08:08:36Z

Summary of changes I made:

bundle the worker with webpack on bootstrap
don't bundle the rest of @kbn/monaco, @kbn/ui-shares-deps creates the final bundle
move all source files into a src directory so we can import the worker bundle from src and target with the same relative path
transpile source from TS to JS on bootstrap
reference @kbn/monaco The same way we reference other modules shared via @kbn/ui-shared-deps
use the module migration eslint rule to rewrite @kbn/ui-shared-deps/monaco imports to @kbn/monaco and disallow imports for monaco-editor
use the shared @kbn/babel-preset
added a basic read me to the root of the package

Hope you don't mind me jumping in and applying these changes directly!

spalger · 2020-05-31T06:04:26Z

@elasticmachine merge upstream

jloleysens · 2020-06-01T07:27:36Z

Summary of changes I made:

bundle the worker with webpack on bootstrap

don't bundle the rest of @kbn/monaco, @kbn/ui-shares-deps creates the final bundle

move all source files into a src directory so we can import the worker bundle from src and target with the same relative path

transpile source from TS to JS on bootstrap

reference @kbn/monaco The same way we reference other modules shared via @kbn/ui-shared-deps

use the module migration eslint rule to rewrite @kbn/ui-shared-deps/monaco imports to @kbn/monaco and disallow imports for monaco-editor

use the shared @kbn/babel-preset

added a basic read me to the root of the package

Hope you don't mind me jumping in and applying these changes directly!

Thanks a ton for sorting out the build and ops concerns @spalger ! This looks really great!

I was thinking the worker would change very infrequently, but I think building at bootstrap is so cheap to do so happy with that change too 👍

poffdeluxe

Canvas changes look good to me

kertal · 2020-06-02T07:36:42Z

@elasticmachine merge upstream

kertal

KibanaApp Timelion usage LGTM, but in Painless lab I don't get the duplicate key message.

jloleysens · 2020-06-02T08:51:33Z

Thanks for the reviews all!

KibanaApp Timelion usage LGTM, but in Painless lab I don't get the duplicate key message.

Looks like there was a minor issue with the worker bundle. Just fixed it, would you mind to taking another look @kertal @cjcenizal ?

I saw that it was erroring; this commit ad9f4d2 fixed the grammar parsing.

kertal

Kibana App owned Code LGTM, tested locally with Chrome, last issue I reported is fixed, the duplicate JSON property is indicated 👍

spalger · 2020-06-01T16:18:06Z

src/plugins/kibana_react/public/code_editor/code_editor.test.tsx

 import { shallow } from 'enzyme';

+// disabled because this is a test, but also it seems we shouldn't need this?
+/* eslint-disable-next-line @kbn/eslint/module_migration */
 import 'monaco-editor/esm/vs/basic-languages/html/html.contribution.js';


Do we know if this is something we should add to @kbn/monaco rather than importing it here? All other exclusions to this rule are in @kbn/monaco itself

Hm, not sure. @poffdeluxe Do you have any guidance for us on this?

darnautov

Thanks for working on this! It's extremely valuable for the ML and Transforms plugins.
monaco setup code LGTM, but some basic unit tests for tokenizers would be nice to have as it involves regexps.
nit: I've observed a bunch of commented code inside of painless_lab, you probably haven't finished with the clean up yet

jloleysens · 2020-06-03T09:02:14Z

Thanks for reviewing @darnautov !

nit: I've observed a bunch of commented code inside of painless_lab, you probably haven't finished with the clean up yet

Yep! I will need to revert all painless commits before merging. Good point about the unit tests!

cjcenizal

Tested locally and looked through the code. Code organization generally made sense to me (the README helped, thanks!) though I'm not familiar with how Monaco works so not the best judge of code quality in this case. :)

jloleysens · 2020-06-04T09:26:57Z

@elasticmachine merge upstream

kibanamachine · 2020-06-04T11:36:17Z

💚 Build Succeeded

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

History

💚 Build #51010 succeeded ad9f4d2
💚 Build #50722 succeeded 7beb2f4
💚 Build #50699 succeeded b2b7f20
💚 Build #50698 succeeded c18af02
💔 Build #50692 failed 7b135b5

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

jloleysens · 2020-06-04T11:43:09Z

I am going to merge this work, any other issues can be addressed in follow up PRs

* First iteration of xjson in monaco * Throwaway implementation in painless lab - THIS MUST BE REVERTED * WiP on build process for new kbn-lang package * new @kbn/langs package and update ui-shared-deps * Update jest config for new work files * Update painless lab -- REVERT THIS COMMIT * Create shared useXJson mode hook * Final update to using the new shared useXJsonMode hook -- REVERT * Created @kbn/monaco and share through shared deps * always access monaco through `@kbn/monaco` * use path.resolve to create path * add basic readme * remove console.log call * remove typescript support from ui-shared-deps webpack config * use `@kbn/babel-preset` * include the monaco styles in the kbn-ui-shared-deps * sort package.json * build worker at bootstrap rather than commiting to repo * only build worker, don't pre-bundle monaco * fix type check errors * remove section from readme about committed dist * keep editor.worker.js postfix * forgot to save update to import * license package as apache-2.0 * Added regenerator runtime for worker bundle * revert changes to painless lab Co-authored-by: spalger <spalger@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* master: (26 commits) [Console]remove completion for type for filter queries and aggs (elastic#68103) [ML] Transforms: Filter aggregation support (elastic#67591) [ES UI Shared] Monaco XJSON (elastic#67485) [Index Management] Add data streams functionality to indices tab (elastic#67940) [Discover] Fix renaming of saved search not displayed in breadcrumb (elastic#67577) [SECURITY] Rename siem plugin to security_solution (elastic#67902) [Uptime] Fix Telemetry Api flaky test (elastic#67358) [Data plugin] Add configuration property to enable / disable autocomplete (elastic#67847) remove scripts. prettire update has been done (elastic#68130) Closes elastic#68055 by detecting the local Kibana version and using that as (elastic#68198) [apm] docs: add deployment annotation example (elastic#67408) [ML] Extend population preview chart to show actual and typical value (elastic#67569) Refactor index management client integration tests for scalability (elastic#67917) Add generator function that creates multiple alerts (elastic#67713) chore(NA): remove config arg from os packages (elastic#67871) [Reporting] Move code out of Legacy (elastic#67904) [Metrics UI] Add overrides to Snapshot API to support alert previews (elastic#68125) [Security] [Cases] Manage timeline UI API (elastic#67719) [ENDPOINT][INGEST]Task/endpoint ingest update (elastic#67234) Fix code coverage for jest, upload merged reports (elastic#68149) ...

* First iteration of xjson in monaco * Throwaway implementation in painless lab - THIS MUST BE REVERTED * WiP on build process for new kbn-lang package * new @kbn/langs package and update ui-shared-deps * Update jest config for new work files * Update painless lab -- REVERT THIS COMMIT * Create shared useXJson mode hook * Final update to using the new shared useXJsonMode hook -- REVERT * Created @kbn/monaco and share through shared deps * always access monaco through `@kbn/monaco` * use path.resolve to create path * add basic readme * remove console.log call * remove typescript support from ui-shared-deps webpack config * use `@kbn/babel-preset` * include the monaco styles in the kbn-ui-shared-deps * sort package.json * build worker at bootstrap rather than commiting to repo * only build worker, don't pre-bundle monaco * fix type check errors * remove section from readme about committed dist * keep editor.worker.js postfix * forgot to save update to import * license package as apache-2.0 * Added regenerator runtime for worker bundle * revert changes to painless lab Co-authored-by: spalger <spalger@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: spalger <spalger@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

jloleysens added 2 commits May 27, 2020 16:16

First iteration of xjson in monaco

e2bcdc7

Throwaway implementation in painless lab - THIS MUST BE REVERTED

c584bc5

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.9.0 labels May 27, 2020

jloleysens added 6 commits May 28, 2020 13:34

WiP on build process for new kbn-lang package

573cb7d

new @kbn/langs package and update ui-shared-deps

86bb6ce

Update jest config for new work files

d5f7baa

Update painless lab -- REVERT THIS COMMIT

e19dd17

Create shared useXJson mode hook

44a12ea

Final update to using the new shared useXJsonMode hook -- REVERT

b1ca795

jloleysens marked this pull request as ready for review May 28, 2020 13:57

jloleysens requested review from a team as code owners May 28, 2020 13:57

jloleysens requested review from spalger, darnautov and cjcenizal May 28, 2020 13:58

Created @kbn/monaco and share through shared deps

bce6a27

spalger added 4 commits May 29, 2020 10:50

Merge branch 'master' of github.com:elastic/kibana into pr/67485

fb4cb4c

always access monaco through @kbn/monaco

a2e2550

use path.resolve to create path

e81c5d2

add basic readme

a81c892

jloleysens requested a review from a team May 29, 2020 18:25

jloleysens requested a review from a team as a code owner May 29, 2020 18:25

spalger reviewed May 29, 2020

View reviewed changes

packages/kbn-monaco/xjson/README.md Outdated Show resolved Hide resolved

spalger added 2 commits May 29, 2020 11:28

remove console.log call

9ad8888

remove typescript support from ui-shared-deps webpack config

b9a2b51

Merge branch 'master' into monaco-xjson

7beb2f4

poffdeluxe approved these changes Jun 1, 2020

View reviewed changes

Merge branch 'master' into monaco-xjson

8bb2c29

kertal reviewed Jun 2, 2020

View reviewed changes

Added regenerator runtime for worker bundle

ad9f4d2

kertal self-requested a review June 2, 2020 16:38

kertal approved these changes Jun 2, 2020

View reviewed changes

spalger reviewed Jun 2, 2020

View reviewed changes

darnautov approved these changes Jun 3, 2020

View reviewed changes

darnautov mentioned this pull request Jun 3, 2020

[ML] Advanced JSON editor enhancements #66716

Closed

4 tasks

cjcenizal approved these changes Jun 3, 2020

View reviewed changes

elasticmachine and others added 2 commits June 4, 2020 02:27

Merge branch 'master' into monaco-xjson

6e785d5

revert changes to painless lab

dcbf9c3

jloleysens merged commit 1346b15 into elastic:master Jun 4, 2020

jloleysens deleted the monaco-xjson branch June 4, 2020 11:43

jloleysens mentioned this pull request Jun 4, 2020

[7.x] [ES UI Shared] Monaco XJSON (#67485) #68234

Merged

alisonelizabeth mentioned this pull request Oct 19, 2020

Move painless lang support to @kbn/monaco #81010

Merged

alexwizp mentioned this pull request Sep 22, 2021

[CodeEditor] add support of triple quotes #112656

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ES UI Shared] Monaco XJSON #67485

[ES UI Shared] Monaco XJSON #67485

jloleysens commented May 27, 2020 •

edited

Loading

elasticmachine commented May 27, 2020

jloleysens commented May 29, 2020

spalger commented May 30, 2020

spalger commented May 31, 2020

jloleysens commented Jun 1, 2020

poffdeluxe left a comment

kertal commented Jun 2, 2020

kertal left a comment

jloleysens commented Jun 2, 2020

kertal left a comment

spalger Jun 1, 2020

jloleysens Jun 2, 2020

darnautov left a comment

jloleysens commented Jun 3, 2020

cjcenizal left a comment

jloleysens commented Jun 4, 2020

kibanamachine commented Jun 4, 2020

jloleysens commented Jun 4, 2020

[ES UI Shared] Monaco XJSON #67485

[ES UI Shared] Monaco XJSON #67485

Conversation

jloleysens commented May 27, 2020 • edited Loading

Summary

How to test

Owners of specific sections

TODO

Screenshots

Additional Context

elasticmachine commented May 27, 2020

jloleysens commented May 29, 2020

spalger commented May 30, 2020

spalger commented May 31, 2020

jloleysens commented Jun 1, 2020

poffdeluxe left a comment

Choose a reason for hiding this comment

kertal commented Jun 2, 2020

kertal left a comment

Choose a reason for hiding this comment

jloleysens commented Jun 2, 2020

kertal left a comment

Choose a reason for hiding this comment

spalger Jun 1, 2020

Choose a reason for hiding this comment

jloleysens Jun 2, 2020

Choose a reason for hiding this comment

darnautov left a comment

Choose a reason for hiding this comment

jloleysens commented Jun 3, 2020

cjcenizal left a comment

Choose a reason for hiding this comment

jloleysens commented Jun 4, 2020

kibanamachine commented Jun 4, 2020

💚 Build Succeeded

History

jloleysens commented Jun 4, 2020

jloleysens commented May 27, 2020 •

edited

Loading