[TSVB] Replaces EuiCodeEditor 👉 Monaco editor #100684

Kuznietsov · 2021-05-26T14:35:21Z

Closes: #99445.

In this PR:

EuiCodeEditor is replaced by Monaco editor in the 'vis_type_timeseries' plugin.
Added support of new languages (markdown, css, handlebars).
All languages are moved to kibana_react/code_editor. (from 'url_template_editor'), except though, which are defined at packages/kbn-monaco.

Markdown editor

Before:

After:

Css/scss/less editor

Before:

After:

Moved handlebars_url language registration to the code_editor. Changed the way of registration of languages.

Handlebars syntax breaks highlighting of special chars in markdown syntax.

VladLasitsa

LGTM! Tested localy in chrome

src/plugins/kibana_react/public/code_editor/languages/types.ts

src/plugins/kibana_react/public/code_editor/languages/helpers.ts

alexwizp · 2021-06-08T11:36:25Z

Double check it on my local, works as expected

timroes · 2021-06-08T12:04:31Z

@elasticmachine run elasticsearch-ci/docs

stratoula

I finally managed to make it work 😄
Kibana app code changes LGTM! I tested it locally and seems pretty cool 👏

Kuznietsov · 2021-06-10T09:42:36Z

I finally managed to make it work 😄
Kibana app code changes LGTM! I tested it locally and seems pretty cool 👏

Thanks a lot)

Kuznietsov · 2021-06-10T10:07:16Z

@elasticmachine merge upstream

alexwizp · 2021-06-14T06:47:50Z

@elastic/kibana-app-services , @elastic/kibana-presentation please review

Kuznietsov · 2021-06-14T06:59:08Z

@elasticmachine merge upstream

Kuznietsov · 2021-06-16T07:01:03Z

@elasticmachine merge upstream

poffdeluxe

Changes LGTM!

My one concern is that we have languages living in multiple shared places now. It just makes it more difficult to figure out what languages we support in the kibana monaco code editor.

Kuznietsov · 2021-06-18T07:03:15Z

@elasticmachine merge upstream

alexwizp · 2021-06-18T07:45:10Z

@elastic/kibana-app-services please have a look, we are are waiting only your review

jloleysens

Great work @Kunzetsov ! App services changes look good to me (although I did not test the Handlebars editor in drilldown locally). Left a couple of comments.

jloleysens · 2021-06-18T10:17:59Z

packages/kbn-monaco/src/esql/index.ts

 import { ID } from './constants';
 import { lexerRules } from './lexer_rules';

-export const EsqlLang = { ID, lexerRules };
+export const EsqlLang = { ID, lexerRules } as LangModuleType;


nit; could we update this to:

Suggested change

export const EsqlLang = { ID, lexerRules } as LangModuleType;

export const EsqlLang: LangModuleType = { ID, lexerRules };

Ok, not a problem. I was using the style of @kbn/monaco )

jloleysens · 2021-06-18T10:46:30Z

src/plugins/kibana_react/public/code_editor/languages/css/index.ts

@@ -0,0 +1,12 @@
+/*


Sorry if someone already asked this; what is the reason for having these language definitions live here and not in the @kbn/monaco package (with painless etc)?

I'm not sure if it is a good idea to put some custom languages, required only in kibana plugins, to the core package. If the code owners will say, that it is a good idea, I'll do it)

@jloleysens, what do you think about it? Is there any reasons for storing custom languages in the global package?

Right, as far as I understand it, the languages defined in kbn/monaco are intended for use in plugins, or at least that plugins are the biggest consumers of that functionality. Could you help me understand the distinction with, for e.g., Handlebars vs Painless?

IMO it would be best to have a single place where languages are created and registered for easy reuse and discoverability - similar to @poffdeluxe comment.

Is part of the concern JS bundle size?

With the current kbn/monaco package plugins can't cherry-pick/declare languages they want to use and there is no good way to audit what languages are being used where (searching I suppose). But with monaco language definitions I don't think there is a lot of JS being loaded typically.

Painless, xjson and Esql are specific for elastic stack. But markdown, css and handlebars are common and they are just imported from monaco. I was thinking about that languages, which require syntax implementation, need to be located at kbn/monaco, all other - at plugins. But if somebody want to move languages, please, feel free to do it) I'm sorry, right now I'm working on the other task.

Kuznietsov · 2021-06-18T14:29:05Z

Changes LGTM!

My one concern is that we have languages living in multiple shared places now. It just makes it more difficult to figure out what languages we support in the kibana monaco code editor.

I agree with you. But I'm not sure if somebody really need that languages, except some kibana plugins, which are using component of an editor from kibana_react.

kibanamachine · 2021-06-18T16:35:43Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`kibanaReact`	367	378	+11
`visTypeTimeseries`	505	499	-6
total			+5

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`kibanaReact`	216	228	+12

Any counts in public APIs

Total count of every any typed public API. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats any for more detailed information.

id	before	after	diff
`kibanaReact`	1	5	+4

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`kibanaReact`	312.1KB	312.1KB	-2.0B
`visTypeTimeseries`	1.7MB	986.0KB	-796.0KB
total			-796.0KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`kbnUiSharedDeps-elastic`	2.6MB	2.6MB	+1.0B
`kbnUiSharedDeps-js`	6.4MB	6.4MB	-12.0B
`kibanaReact`	133.7KB	141.9KB	+8.2KB
total			+8.2KB

Unknown metric groups

API count

id	before	after	diff
`kibanaReact`	245	257	+12

History

💛 Build #132325 was flaky c2448cd
💚 Build #131577 succeeded 5398a81
💚 Build #130806 succeeded 5437e26
💚 Build #130413 succeeded 1b72e92
💚 Build #129722 succeeded 1601e66

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

cc @Kunzetsov

* Сhanged EuiCodeEditor to CodeEditor (monaco) at markdown_editor.js * Added css lang support for monaco-editor. * Added .d.ts for css lang import directly from monaco. * Moved handlebars_url language to the code_editor. Moved handlebars_url language registration to the code_editor. Changed the way of registration of languages. * Added merge for markdown_handlebars lang. * Changed to simple markdown syntax. Handlebars syntax breaks highlighting of special chars in markdown syntax. * Removed useless mergeConfig function. * Removed legacy import. * Refactor export from monaco-editor. * Fixed 'Could not find a declaration file for module' * Fixed tests. * Fixed typings errors. * Added comment to typings. * Fixed clearMarkdown for Monaco editor. * Made changes based on suggestions. * Fixed types errors. * Fixed function tests types errors. * Fixes, based on nits. * Fixes based on nits. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine · 2021-06-18T18:27:52Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

* Сhanged EuiCodeEditor to CodeEditor (monaco) at markdown_editor.js * Added css lang support for monaco-editor. * Added .d.ts for css lang import directly from monaco. * Moved handlebars_url language to the code_editor. Moved handlebars_url language registration to the code_editor. Changed the way of registration of languages. * Added merge for markdown_handlebars lang. * Changed to simple markdown syntax. Handlebars syntax breaks highlighting of special chars in markdown syntax. * Removed useless mergeConfig function. * Removed legacy import. * Refactor export from monaco-editor. * Fixed 'Could not find a declaration file for module' * Fixed tests. * Fixed typings errors. * Added comment to typings. * Fixed clearMarkdown for Monaco editor. * Made changes based on suggestions. * Fixed types errors. * Fixed function tests types errors. * Fixes, based on nits. * Fixes based on nits. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>

…-png-pdf-report-type * 'master' of github.com:elastic/kibana: (447 commits) skip flaky suite (elastic#102366) [Security Solution][Endpoint][Host Isolation] Isolation status badge from alert details (elastic#102274) Add email connector info for Elastic Cloud (elastic#91363) [Workplace Search] remove or replace xs props for text on source connect view (elastic#102663) Do not double register dashboard url generator (elastic#102599) [TSVB] Replaces EuiCodeEditor 👉 Monaco editor (elastic#100684) [Discover] Update kibana.json adding owner and description (elastic#102292) [Exploratory View] Mobile experience (elastic#99565) chore(NA): moving @kbn/ui-shared-deps into bazel (elastic#101669) [TSVB] Index pattern select field disappear in Annotation tab (elastic#102314) [Security Solution][Endpoint][Host Isolation] Fixes bug where host isolation/unisolation works from alert details (elastic#102581) TSVB visualizations with no timefield do not render after upgrading from 7.12.1 to 7.13.0 (elastic#102494) [Logs UI] Add `event.original` fallback to message reconstruction rules (elastic#102236) [ML] Remove blank job definition as it is unused and out-of-sync with Elasticsearch (elastic#102506) [Lens] Fix wrong error detection on transition to Top values operation (elastic#102384) [ML] Anomaly detection job custom_settings improvements (elastic#102099) [Cases] Route: Get all alerts attach to a case (elastic#101878) Fixes wrong list exception type when creating endpoint event filters list (elastic#102522) remove search bar that's not working yet (elastic#102550) Migrated Ingest Node Pipeline Functional Tests to use test_user (elastic#102409) ... # Conflicts: # x-pack/plugins/reporting/public/share_context_menu/register_pdf_png_reporting.tsx

Kuznietsov added 7 commits May 26, 2021 10:17

Сhanged EuiCodeEditor to CodeEditor (monaco) at markdown_editor.js

bc993ee

Added css lang support for monaco-editor.

e37fcfb

Added .d.ts for css lang import directly from monaco.

d9ee143

Moved handlebars_url language to the code_editor.

0787ffa

Moved handlebars_url language registration to the code_editor. Changed the way of registration of languages.

Added merge for markdown_handlebars lang.

2eb0ac8

Changed to simple markdown syntax.

713ea21

Handlebars syntax breaks highlighting of special chars in markdown syntax.

Removed useless mergeConfig function.

f772f7a

Kuznietsov added WIP Work in progress auto-backport Deprecated - use backport:version if exact versions are needed labels May 26, 2021

Kuznietsov added 7 commits May 26, 2021 17:40

Removed legacy import.

bb46bfc

Refactor export from monaco-editor.

670da6e

Fixed 'Could not find a declaration file for module'

b21a93a

Fixed tests.

47b3b22

Fixed typings errors.

2a0aa06

Added comment to typings.

ea2bcf0

Fixed clearMarkdown for Monaco editor.

55f8e07

Kuznietsov requested a review from alexwizp May 27, 2021 14:54

Kuznietsov removed the WIP Work in progress label May 28, 2021

Kuznietsov changed the title ~~[WIP] [TSVB] Replace EuiCodeEditor 👉 Monaco editor~~ [TSVB] Improves: replace EuiCodeEditor 👉 Monaco editor May 28, 2021

alexwizp requested a review from VladLasitsa June 1, 2021 08:20

Kuznietsov self-assigned this Jun 1, 2021

VladLasitsa approved these changes Jun 1, 2021

View reviewed changes

Kuznietsov added Feature:TSVB TSVB (Time Series Visual Builder) v7.14.0 Team:Visualizations Visualization editors, elastic-charts and infrastructure v8.0.0 labels Jun 2, 2021

alexwizp reviewed Jun 3, 2021

View reviewed changes

src/plugins/kibana_react/public/code_editor/languages/types.ts Outdated Show resolved Hide resolved

alexwizp reviewed Jun 3, 2021

View reviewed changes

src/plugins/kibana_react/public/code_editor/languages/helpers.ts Outdated Show resolved Hide resolved

Kuznietsov added 2 commits June 7, 2021 10:57

Made changes based on suggestions.

3f1c0b9

Merge branch 'master' into elastic#99445

a42f32f

Merge branch 'master' into elastic#99445

1601e66

stratoula approved these changes Jun 10, 2021

View reviewed changes

Merge branch 'master' into elastic#99445

1b72e92

Merge branch 'master' into elastic#99445

5437e26

Merge branch 'master' into elastic#99445

5398a81

poffdeluxe approved these changes Jun 16, 2021

View reviewed changes

Merge branch 'master' into elastic#99445

c2448cd

jloleysens approved these changes Jun 18, 2021

View reviewed changes

Fixes based on nits.

ed05215

Kuznietsov merged commit a744483 into elastic:master Jun 18, 2021

kibanamachine mentioned this pull request Jun 18, 2021

[7.x] [TSVB] Replaces EuiCodeEditor 👉 Monaco editor (#100684) #102665

Merged

Kuznietsov deleted the #99445 branch June 19, 2021 04:25

This was referenced Aug 16, 2021

[TSVB] Support custom field format #101245

Merged

[TSVB] Markdown variables should be clickable #108844

Merged

stratoula mentioned this pull request Jun 22, 2022

[TSVB] Some css properties on markdown styling need !important to be applied #134878

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TSVB] Replaces EuiCodeEditor 👉 Monaco editor #100684

[TSVB] Replaces EuiCodeEditor 👉 Monaco editor #100684

Kuznietsov commented May 26, 2021 •

edited

Loading

VladLasitsa left a comment

alexwizp commented Jun 8, 2021

timroes commented Jun 8, 2021

stratoula left a comment

Kuznietsov commented Jun 10, 2021

Kuznietsov commented Jun 10, 2021

alexwizp commented Jun 14, 2021

Kuznietsov commented Jun 14, 2021

Kuznietsov commented Jun 16, 2021

poffdeluxe left a comment

Kuznietsov commented Jun 18, 2021

alexwizp commented Jun 18, 2021

jloleysens left a comment

jloleysens Jun 18, 2021

Kuznietsov Jun 18, 2021

Kuznietsov Jun 18, 2021

jloleysens Jun 18, 2021

Kuznietsov Jun 18, 2021 •

edited

Loading

Kuznietsov Jun 18, 2021 •

edited

Loading

jloleysens Jun 21, 2021

Kuznietsov Jun 21, 2021

Kuznietsov commented Jun 18, 2021

kibanamachine commented Jun 18, 2021

API count

kibanamachine commented Jun 18, 2021

	export const EsqlLang = { ID, lexerRules } as LangModuleType;
	export const EsqlLang: LangModuleType = { ID, lexerRules };

[TSVB] Replaces EuiCodeEditor 👉 Monaco editor #100684

[TSVB] Replaces EuiCodeEditor 👉 Monaco editor #100684

Conversation

Kuznietsov commented May 26, 2021 • edited Loading

Closes: #99445.

In this PR:

Markdown editor

Before:

After:

Css/scss/less editor

Before:

After:

VladLasitsa left a comment

Choose a reason for hiding this comment

alexwizp commented Jun 8, 2021

timroes commented Jun 8, 2021

stratoula left a comment

Choose a reason for hiding this comment

Kuznietsov commented Jun 10, 2021

Kuznietsov commented Jun 10, 2021

alexwizp commented Jun 14, 2021

Kuznietsov commented Jun 14, 2021

Kuznietsov commented Jun 16, 2021

poffdeluxe left a comment

Choose a reason for hiding this comment

Kuznietsov commented Jun 18, 2021

alexwizp commented Jun 18, 2021

jloleysens left a comment

Choose a reason for hiding this comment

jloleysens Jun 18, 2021

Choose a reason for hiding this comment

Kuznietsov Jun 18, 2021

Choose a reason for hiding this comment

Kuznietsov Jun 18, 2021

Choose a reason for hiding this comment

jloleysens Jun 18, 2021

Choose a reason for hiding this comment

Kuznietsov Jun 18, 2021 • edited Loading

Choose a reason for hiding this comment

Kuznietsov Jun 18, 2021 • edited Loading

Choose a reason for hiding this comment

jloleysens Jun 21, 2021

Choose a reason for hiding this comment

Kuznietsov Jun 21, 2021

Choose a reason for hiding this comment

Kuznietsov commented Jun 18, 2021

kibanamachine commented Jun 18, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Any counts in public APIs

Async chunks

Page load bundle

API count

History

kibanamachine commented Jun 18, 2021

💚 Backport successful

Kuznietsov commented May 26, 2021 •

edited

Loading

Kuznietsov Jun 18, 2021 •

edited

Loading

Kuznietsov Jun 18, 2021 •

edited

Loading