mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
[Console] Migrate output editor to Monaco (#178696)
Closes https://github.com/elastic/kibana/issues/178941 ## Summary This PR migrates the output editor from Ace editor to Monaco editor. <img width="1491" alt="Screenshot 2024-04-03 at 11 22 27" src="fbff226d-8f6b-470a-b6c8-34f4aaf64200"> **How to test:** 1. Create a `config/kibana.dev.yml` file (if one doesn't exist already) and add the line: `console.dev.enableMonaco: true` 2. Change the condition inb8c13babf1/src/plugins/console/public/application/containers/editor/editor.tsx (L76)to `!isMonacoEnabled` to display the old Ace editor in the request panel for now so that we can test sending a request. 3. Send a request and verify the output panel displays the response correctly in json format and that the highlighting is the same as in the original output panel. Also test sending multiple requests at once. <details> <summary>JSON output screenshots:</summary> Ace editor: <img width="561" alt="Screenshot 2024-03-22 at 16 12 48" src="898a3e48-5a3b-48b6-ac4e-92fa6e05403a"> Now: <img width="722" alt="Screenshot 2024-04-03 at 11 12 59" src="503614db-946b-490e-9447-fd3cdcb83bcf"> When multiple requests are sent: <img width="1491" alt="Screenshot 2024-04-03 at 11 10 53" src="63b05227-a723-49ec-a9ac-3ae3269effd1"> </details> 4. Send a request with `?format=yaml` parameter (e.g. `GET _all?format=yaml`) and verify that the output panel displays the response correctly in yaml format. <details> <summary>YAML output screenshot:</summary> <img width="1459" alt="Screenshot 2024-03-27 at 11 29 45" src="c1967f0f-021e-4b68-bb8f-3098ef35ff1f"> </details> 5. The output also supports text output data. To test this format, delete line 29 and add the following code in line 34 in `src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx`: ``` const data = [ { response: { value: 'Hello World!' }, }, ]; ``` Then reload the Console page and verify the data is correctly displayed and highlighted. <details> <summary>TEXT output screenshot:</summary> <img width="285" alt="Screenshot 2024-03-22 at 18 06 31" src="f30cdfd6-be67-4d34-b54d-2a19d6dcb09d"> </details> <!--- ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Elena Stoeva
GitHub
parent
82ccb8d6d3
commit
4a5acf360d
18 changed files with 510 additions and 222 deletions
|
|
@ -32,4 +32,9 @@ import { registerLanguage } from './src/helpers';
|
|||
export { BarePluginApi, registerLanguage };
|
||||
export * from './src/types';
|
||||
|
||||
export { CONSOLE_LANG_ID, CONSOLE_THEME_ID } from './src/console';
|
||||
export {
|
||||
CONSOLE_LANG_ID,
|
||||
CONSOLE_OUTPUT_LANG_ID,
|
||||
CONSOLE_THEME_ID,
|
||||
CONSOLE_OUTPUT_THEME_ID,
|
||||
} from './src/console';
|
||||
|
|
|
|||
|
|
@ -8,4 +8,6 @@
|
|||
|
||||
export const CONSOLE_LANG_ID = 'console';
|
||||
export const CONSOLE_THEME_ID = 'consoleTheme';
|
||||
export const CONSOLE_OUTPUT_LANG_ID = 'consoleOutput';
|
||||
export const CONSOLE_OUTPUT_THEME_ID = 'consoleOutputTheme';
|
||||
export const CONSOLE_POSTFIX = '.console';
|
||||
|
|
|
|||
|
|
@ -12,15 +12,31 @@
|
|||
import './language';
|
||||
|
||||
import type { LangModuleType } from '../types';
|
||||
import { CONSOLE_LANG_ID } from './constants';
|
||||
import { lexerRules, languageConfiguration } from './lexer_rules';
|
||||
import { CONSOLE_LANG_ID, CONSOLE_OUTPUT_LANG_ID } from './constants';
|
||||
import {
|
||||
lexerRules,
|
||||
languageConfiguration,
|
||||
consoleOutputLexerRules,
|
||||
consoleOutputLanguageConfiguration,
|
||||
} from './lexer_rules';
|
||||
|
||||
export { CONSOLE_LANG_ID, CONSOLE_THEME_ID } from './constants';
|
||||
export {
|
||||
CONSOLE_LANG_ID,
|
||||
CONSOLE_OUTPUT_LANG_ID,
|
||||
CONSOLE_THEME_ID,
|
||||
CONSOLE_OUTPUT_THEME_ID,
|
||||
} from './constants';
|
||||
|
||||
export { buildConsoleTheme } from './theme';
|
||||
export { buildConsoleTheme, buildConsoleOutputTheme } from './theme';
|
||||
|
||||
export const ConsoleLang: LangModuleType = {
|
||||
ID: CONSOLE_LANG_ID,
|
||||
lexerRules,
|
||||
languageConfiguration,
|
||||
};
|
||||
|
||||
export const ConsoleOutputLang: LangModuleType = {
|
||||
ID: CONSOLE_OUTPUT_LANG_ID,
|
||||
lexerRules: consoleOutputLexerRules,
|
||||
languageConfiguration: consoleOutputLanguageConfiguration,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import {
|
||||
consoleSharedLanguageConfiguration,
|
||||
consoleSharedLexerRules,
|
||||
matchTokensWithEOL,
|
||||
matchToken,
|
||||
} from './shared';
|
||||
import { monaco } from '../../monaco_imports';
|
||||
|
||||
export const languageConfiguration: monaco.languages.LanguageConfiguration = {
|
||||
...consoleSharedLanguageConfiguration,
|
||||
};
|
||||
|
||||
export const lexerRules: monaco.languages.IMonarchLanguage = {
|
||||
...consoleSharedLexerRules,
|
||||
tokenizer: {
|
||||
...consoleSharedLexerRules.tokenizer,
|
||||
root: [
|
||||
...consoleSharedLexerRules.tokenizer.root,
|
||||
// method
|
||||
matchTokensWithEOL('method', /([a-zA-Z]+)/, 'root', 'method_sep'),
|
||||
// whitespace
|
||||
matchToken('whitespace', '\\s+'),
|
||||
// text
|
||||
matchToken('text', '.+?'),
|
||||
],
|
||||
method_sep: [
|
||||
// protocol host with slash
|
||||
matchTokensWithEOL(
|
||||
['whitespace', 'url.protocol_host', 'url.slash'],
|
||||
/(\s+)(https?:\/\/[^?\/,]+)(\/)/,
|
||||
'root',
|
||||
'url'
|
||||
),
|
||||
// variable template
|
||||
matchTokensWithEOL(['whitespace', 'variable.template'], /(\s+)(\${\w+})/, 'root', 'url'),
|
||||
// protocol host
|
||||
matchTokensWithEOL(
|
||||
['whitespace', 'url.protocol_host'],
|
||||
/(\s+)(https?:\/\/[^?\/,]+)/,
|
||||
'root',
|
||||
'url'
|
||||
),
|
||||
// slash
|
||||
matchTokensWithEOL(['whitespace', 'url.slash'], /(\s+)(\/)/, 'root', 'url'),
|
||||
// whitespace
|
||||
matchTokensWithEOL('whitespace', /(\s+)/, 'root', 'url'),
|
||||
],
|
||||
url: [
|
||||
// variable template
|
||||
matchTokensWithEOL('variable.template', /(\${\w+})/, 'root'),
|
||||
// pathname
|
||||
matchTokensWithEOL('url.part', /([^?\/,\s]+)\s*/, 'root'),
|
||||
// comma
|
||||
matchTokensWithEOL('url.comma', /(,)/, 'root'),
|
||||
// slash
|
||||
matchTokensWithEOL('url.slash', /(\/)/, 'root'),
|
||||
// question mark
|
||||
matchTokensWithEOL('url.questionmark', /(\?)/, 'root', 'urlParams'),
|
||||
// comment
|
||||
matchTokensWithEOL(
|
||||
['whitespace', 'comment.punctuation', 'comment.line'],
|
||||
/(\s+)(\/\/)(.*$)/,
|
||||
'root'
|
||||
),
|
||||
],
|
||||
urlParams: [
|
||||
// param with variable template
|
||||
matchTokensWithEOL(
|
||||
['url.param', 'url.equal', 'variable.template'],
|
||||
/([^&=]+)(=)(\${\w+})/,
|
||||
'root'
|
||||
),
|
||||
// param with value
|
||||
matchTokensWithEOL(['url.param', 'url.equal', 'url.value'], /([^&=]+)(=)([^&]*)/, 'root'),
|
||||
// param
|
||||
matchTokensWithEOL('url.param', /([^&=]+)/, 'root'),
|
||||
// ampersand
|
||||
matchTokensWithEOL('url.amp', /(&)/, 'root'),
|
||||
// comment
|
||||
matchTokensWithEOL(
|
||||
['whitespace', 'comment.punctuation', 'comment.line'],
|
||||
/(\s+)(\/\/)(.*$)/,
|
||||
'root'
|
||||
),
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { consoleSharedLanguageConfiguration, consoleSharedLexerRules } from './shared';
|
||||
import { monaco } from '../../monaco_imports';
|
||||
|
||||
export const consoleOutputLanguageConfiguration: monaco.languages.LanguageConfiguration = {
|
||||
...consoleSharedLanguageConfiguration,
|
||||
};
|
||||
|
||||
export const consoleOutputLexerRules: monaco.languages.IMonarchLanguage = {
|
||||
...consoleSharedLexerRules,
|
||||
};
|
||||
|
|
@ -6,192 +6,5 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { monaco } from '../../monaco_imports';
|
||||
import { globals } from '../../common/lexer_rules';
|
||||
import { buildXjsonRules } from '../../xjson/lexer_rules/xjson';
|
||||
|
||||
export const languageConfiguration: monaco.languages.LanguageConfiguration = {
|
||||
brackets: [
|
||||
['{', '}'],
|
||||
['[', ']'],
|
||||
],
|
||||
autoClosingPairs: [
|
||||
{ open: '{', close: '}' },
|
||||
{ open: '[', close: ']' },
|
||||
{ open: '"', close: '"' },
|
||||
],
|
||||
};
|
||||
|
||||
/*
|
||||
util function to build the action object
|
||||
*/
|
||||
const addNextStateToAction = (tokens: string[], nextState?: string) => {
|
||||
return tokens.map((token, index) => {
|
||||
// only last action needs to specify the next state
|
||||
if (index === tokens.length - 1 && nextState) {
|
||||
return { token, next: nextState };
|
||||
}
|
||||
return token;
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
if regex is matched, tokenize as "token" and move to the state "nextState" if defined
|
||||
*/
|
||||
const matchToken = (token: string, regex: string | RegExp, nextState?: string) => {
|
||||
if (nextState) {
|
||||
return { regex, action: { token, next: nextState } };
|
||||
}
|
||||
return { regex, action: { token } };
|
||||
};
|
||||
|
||||
/*
|
||||
if regex is matched, tokenize as "tokens" consecutively and move to the state "nextState"
|
||||
regex needs to have the same number of capturing group as the number of tokens
|
||||
*/
|
||||
const matchTokens = (tokens: string[], regex: string | RegExp, nextState?: string) => {
|
||||
const action = addNextStateToAction(tokens, nextState);
|
||||
return {
|
||||
regex,
|
||||
action,
|
||||
};
|
||||
};
|
||||
|
||||
const matchTokensWithEOL = (
|
||||
tokens: string | string[],
|
||||
regex: string | RegExp,
|
||||
nextIfEOL: string,
|
||||
normalNext?: string
|
||||
) => {
|
||||
if (Array.isArray(tokens)) {
|
||||
const endOfLineAction = addNextStateToAction(tokens, nextIfEOL);
|
||||
const action = addNextStateToAction(tokens, normalNext);
|
||||
return {
|
||||
regex,
|
||||
action: {
|
||||
cases: {
|
||||
'@eos': endOfLineAction,
|
||||
'@default': action,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
return {
|
||||
regex,
|
||||
action: {
|
||||
cases: {
|
||||
'@eos': { token: tokens, next: nextIfEOL },
|
||||
'@default': { token: tokens, next: normalNext },
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const xjsonRules = { ...buildXjsonRules('json_root') };
|
||||
// @ts-expect-error include comments into json
|
||||
xjsonRules.json_root = [{ include: '@comments' }, ...xjsonRules.json_root];
|
||||
xjsonRules.json_root = [
|
||||
// @ts-expect-error include variables into json
|
||||
matchToken('variable.template', /("\${\w+}")/),
|
||||
...xjsonRules.json_root,
|
||||
];
|
||||
|
||||
export const lexerRules: monaco.languages.IMonarchLanguage = {
|
||||
...(globals as any),
|
||||
|
||||
defaultToken: 'invalid',
|
||||
tokenizer: {
|
||||
root: [
|
||||
// warning comment
|
||||
matchToken('warning', '#!.*$'),
|
||||
// comments
|
||||
{ include: '@comments' },
|
||||
// start of json
|
||||
matchToken('paren.lparen', '{', 'json_root'),
|
||||
// method
|
||||
matchTokensWithEOL('method', /([a-zA-Z]+)/, 'root', 'method_sep'),
|
||||
// whitespace
|
||||
matchToken('whitespace', '\\s+'),
|
||||
// text
|
||||
matchToken('text', '.+?'),
|
||||
],
|
||||
method_sep: [
|
||||
// protocol host with slash
|
||||
matchTokensWithEOL(
|
||||
['whitespace', 'url.protocol_host', 'url.slash'],
|
||||
/(\s+)(https?:\/\/[^?\/,]+)(\/)/,
|
||||
'root',
|
||||
'url'
|
||||
),
|
||||
// variable template
|
||||
matchTokensWithEOL(['whitespace', 'variable.template'], /(\s+)(\${\w+})/, 'root', 'url'),
|
||||
// protocol host
|
||||
matchTokensWithEOL(
|
||||
['whitespace', 'url.protocol_host'],
|
||||
/(\s+)(https?:\/\/[^?\/,]+)/,
|
||||
'root',
|
||||
'url'
|
||||
),
|
||||
// slash
|
||||
matchTokensWithEOL(['whitespace', 'url.slash'], /(\s+)(\/)/, 'root', 'url'),
|
||||
// whitespace
|
||||
matchTokensWithEOL('whitespace', /(\s+)/, 'root', 'url'),
|
||||
],
|
||||
url: [
|
||||
// variable template
|
||||
matchTokensWithEOL('variable.template', /(\${\w+})/, 'root'),
|
||||
// pathname
|
||||
matchTokensWithEOL('url.part', /([^?\/,\s]+)\s*/, 'root'),
|
||||
// comma
|
||||
matchTokensWithEOL('url.comma', /(,)/, 'root'),
|
||||
// slash
|
||||
matchTokensWithEOL('url.slash', /(\/)/, 'root'),
|
||||
// question mark
|
||||
matchTokensWithEOL('url.questionmark', /(\?)/, 'root', 'urlParams'),
|
||||
// comment
|
||||
matchTokensWithEOL(
|
||||
['whitespace', 'comment.punctuation', 'comment.line'],
|
||||
/(\s+)(\/\/)(.*$)/,
|
||||
'root'
|
||||
),
|
||||
],
|
||||
urlParams: [
|
||||
// param with variable template
|
||||
matchTokensWithEOL(
|
||||
['url.param', 'url.equal', 'variable.template'],
|
||||
/([^&=]+)(=)(\${\w+})/,
|
||||
'root'
|
||||
),
|
||||
// param with value
|
||||
matchTokensWithEOL(['url.param', 'url.equal', 'url.value'], /([^&=]+)(=)([^&]*)/, 'root'),
|
||||
// param
|
||||
matchTokensWithEOL('url.param', /([^&=]+)/, 'root'),
|
||||
// ampersand
|
||||
matchTokensWithEOL('url.amp', /(&)/, 'root'),
|
||||
// comment
|
||||
matchTokensWithEOL(
|
||||
['whitespace', 'comment.punctuation', 'comment.line'],
|
||||
/(\s+)(\/\/)(.*$)/,
|
||||
'root'
|
||||
),
|
||||
],
|
||||
comments: [
|
||||
// line comment indicated by #
|
||||
matchTokens(['comment.punctuation', 'comment.line'], /(#)(.*$)/),
|
||||
// start a block comment indicated by /*
|
||||
matchToken('comment.punctuation', /\/\*/, 'block_comment'),
|
||||
// line comment indicated by //
|
||||
matchTokens(['comment.punctuation', 'comment.line'], /(\/\/)(.*$)/),
|
||||
],
|
||||
block_comment: [
|
||||
// match everything on a single line inside the comment except for chars / and *
|
||||
matchToken('comment', /[^\/*]+/),
|
||||
// end block comment
|
||||
matchToken('comment.punctuation', /\*\//, '@pop'),
|
||||
// match individual chars inside a multi-line comment
|
||||
matchToken('comment', /[\/*]/),
|
||||
],
|
||||
// include json rules
|
||||
...xjsonRules,
|
||||
},
|
||||
};
|
||||
export { lexerRules, languageConfiguration } from './console_editor';
|
||||
export { consoleOutputLexerRules, consoleOutputLanguageConfiguration } from './console_output';
|
||||
|
|
|
|||
133
packages/kbn-monaco/src/console/lexer_rules/shared.ts
Normal file
133
packages/kbn-monaco/src/console/lexer_rules/shared.ts
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { monaco } from '../../..';
|
||||
import { globals } from '../../common/lexer_rules';
|
||||
import { buildXjsonRules } from '../../xjson/lexer_rules/xjson';
|
||||
|
||||
export const consoleSharedLanguageConfiguration: monaco.languages.LanguageConfiguration = {
|
||||
brackets: [
|
||||
['{', '}'],
|
||||
['[', ']'],
|
||||
],
|
||||
autoClosingPairs: [
|
||||
{ open: '{', close: '}' },
|
||||
{ open: '[', close: ']' },
|
||||
{ open: '"', close: '"' },
|
||||
],
|
||||
};
|
||||
|
||||
/*
|
||||
util function to build the action object
|
||||
*/
|
||||
const addNextStateToAction = (tokens: string[], nextState?: string) => {
|
||||
return tokens.map((token, index) => {
|
||||
// only last action needs to specify the next state
|
||||
if (index === tokens.length - 1 && nextState) {
|
||||
return { token, next: nextState };
|
||||
}
|
||||
return token;
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
if regex is matched, tokenize as "token" and move to the state "nextState" if defined
|
||||
*/
|
||||
export const matchToken = (token: string, regex: string | RegExp, nextState?: string) => {
|
||||
if (nextState) {
|
||||
return { regex, action: { token, next: nextState } };
|
||||
}
|
||||
return { regex, action: { token } };
|
||||
};
|
||||
|
||||
/*
|
||||
if regex is matched, tokenize as "tokens" consecutively and move to the state "nextState"
|
||||
regex needs to have the same number of capturing group as the number of tokens
|
||||
*/
|
||||
export const matchTokens = (tokens: string[], regex: string | RegExp, nextState?: string) => {
|
||||
const action = addNextStateToAction(tokens, nextState);
|
||||
return {
|
||||
regex,
|
||||
action,
|
||||
};
|
||||
};
|
||||
|
||||
export const matchTokensWithEOL = (
|
||||
tokens: string | string[],
|
||||
regex: string | RegExp,
|
||||
nextIfEOL: string,
|
||||
normalNext?: string
|
||||
) => {
|
||||
if (Array.isArray(tokens)) {
|
||||
const endOfLineAction = addNextStateToAction(tokens, nextIfEOL);
|
||||
const action = addNextStateToAction(tokens, normalNext);
|
||||
return {
|
||||
regex,
|
||||
action: {
|
||||
cases: {
|
||||
'@eos': endOfLineAction,
|
||||
'@default': action,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
return {
|
||||
regex,
|
||||
action: {
|
||||
cases: {
|
||||
'@eos': { token: tokens, next: nextIfEOL },
|
||||
'@default': { token: tokens, next: normalNext },
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const xjsonRules = { ...buildXjsonRules('json_root') };
|
||||
// @ts-expect-error include comments into json
|
||||
xjsonRules.json_root = [{ include: '@comments' }, ...xjsonRules.json_root];
|
||||
xjsonRules.json_root = [
|
||||
// @ts-expect-error include variables into json
|
||||
matchToken('variable.template', /("\${\w+}")/),
|
||||
...xjsonRules.json_root,
|
||||
];
|
||||
|
||||
/*
|
||||
Lexer rules that are shared between the Console editor and the Console output panel.
|
||||
*/
|
||||
export const consoleSharedLexerRules: monaco.languages.IMonarchLanguage = {
|
||||
...(globals as any),
|
||||
defaultToken: 'invalid',
|
||||
tokenizer: {
|
||||
root: [
|
||||
// warning comment
|
||||
matchToken('warning', '#!.*$'),
|
||||
// comments
|
||||
{ include: '@comments' },
|
||||
// start of json
|
||||
matchToken('paren.lparen', '{', 'json_root'),
|
||||
],
|
||||
comments: [
|
||||
// line comment indicated by #
|
||||
matchTokens(['comment.punctuation', 'comment.line'], /(#)(.*$)/),
|
||||
// start a block comment indicated by /*
|
||||
matchToken('comment.punctuation', /\/\*/, 'block_comment'),
|
||||
// line comment indicated by //
|
||||
matchTokens(['comment.punctuation', 'comment.line'], /(\/\/)(.*$)/),
|
||||
],
|
||||
block_comment: [
|
||||
// match everything on a single line inside the comment except for chars / and *
|
||||
matchToken('comment', /[^\/*]+/),
|
||||
// end block comment
|
||||
matchToken('comment.punctuation', /\*\//, '@pop'),
|
||||
// match individual chars inside a multi-line comment
|
||||
matchToken('comment', /[\/*]/),
|
||||
],
|
||||
// include json rules
|
||||
...xjsonRules,
|
||||
},
|
||||
};
|
||||
31
packages/kbn-monaco/src/console/theme/editor_theme.ts
Normal file
31
packages/kbn-monaco/src/console/theme/editor_theme.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { makeHighContrastColor } from '@elastic/eui';
|
||||
import { euiThemeVars } from '@kbn/ui-theme';
|
||||
|
||||
import { themeRuleGroupBuilderFactory } from '../../common/theme';
|
||||
import { monaco } from '../../monaco_imports';
|
||||
import { buildConsoleSharedTheme } from './shared';
|
||||
|
||||
const buildRuleGroup = themeRuleGroupBuilderFactory();
|
||||
|
||||
const background = euiThemeVars.euiColorLightestShade;
|
||||
const methodTextColor = '#DD0A73';
|
||||
const urlTextColor = '#00A69B';
|
||||
export const buildConsoleTheme = (): monaco.editor.IStandaloneThemeData => {
|
||||
const sharedTheme = buildConsoleSharedTheme();
|
||||
return {
|
||||
...sharedTheme,
|
||||
rules: [
|
||||
...sharedTheme.rules,
|
||||
...buildRuleGroup(['method'], makeHighContrastColor(methodTextColor)(background)),
|
||||
...buildRuleGroup(['url'], makeHighContrastColor(urlTextColor)(background)),
|
||||
],
|
||||
};
|
||||
};
|
||||
10
packages/kbn-monaco/src/console/theme/index.ts
Normal file
10
packages/kbn-monaco/src/console/theme/index.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
export { buildConsoleTheme } from './editor_theme';
|
||||
export { buildConsoleOutputTheme } from './output_theme';
|
||||
17
packages/kbn-monaco/src/console/theme/output_theme.ts
Normal file
17
packages/kbn-monaco/src/console/theme/output_theme.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { monaco } from '../../monaco_imports';
|
||||
import { buildConsoleSharedTheme } from './shared';
|
||||
|
||||
export const buildConsoleOutputTheme = (): monaco.editor.IStandaloneThemeData => {
|
||||
const sharedTheme = buildConsoleSharedTheme();
|
||||
return {
|
||||
...sharedTheme,
|
||||
};
|
||||
};
|
||||
|
|
@ -9,26 +9,22 @@
|
|||
import { makeHighContrastColor } from '@elastic/eui';
|
||||
import { darkMode, euiThemeVars } from '@kbn/ui-theme';
|
||||
|
||||
import { themeRuleGroupBuilderFactory } from '../common/theme';
|
||||
import { monaco } from '../monaco_imports';
|
||||
import { themeRuleGroupBuilderFactory } from '../../common/theme';
|
||||
import { monaco } from '../../monaco_imports';
|
||||
|
||||
const buildRuleGroup = themeRuleGroupBuilderFactory();
|
||||
|
||||
const background = euiThemeVars.euiColorLightestShade;
|
||||
const methodTextColor = '#DD0A73';
|
||||
const urlTextColor = '#00A69B';
|
||||
const stringTextColor = '#009926';
|
||||
const commentTextColor = '#4C886B';
|
||||
const variableTextColor = '#0079A5';
|
||||
const booleanTextColor = '#585CF6';
|
||||
const numericTextColor = variableTextColor;
|
||||
export const buildConsoleTheme = (): monaco.editor.IStandaloneThemeData => {
|
||||
export const buildConsoleSharedTheme = (): monaco.editor.IStandaloneThemeData => {
|
||||
return {
|
||||
base: darkMode ? 'vs-dark' : 'vs',
|
||||
inherit: true,
|
||||
rules: [
|
||||
...buildRuleGroup(['method'], makeHighContrastColor(methodTextColor)(background)),
|
||||
...buildRuleGroup(['url'], makeHighContrastColor(urlTextColor)(background)),
|
||||
...buildRuleGroup(
|
||||
['string', 'string-literal', 'multi-string', 'punctuation.end-triple-quote'],
|
||||
makeHighContrastColor(stringTextColor)(background)
|
||||
|
|
@ -13,7 +13,14 @@ import { monaco } from './monaco_imports';
|
|||
import { ESQL_THEME_ID, ESQLLang, buildESQlTheme } from './esql';
|
||||
import { YAML_LANG_ID } from './yaml';
|
||||
import { registerLanguage, registerTheme } from './helpers';
|
||||
import { ConsoleLang, CONSOLE_THEME_ID, buildConsoleTheme } from './console';
|
||||
import {
|
||||
ConsoleLang,
|
||||
ConsoleOutputLang,
|
||||
CONSOLE_THEME_ID,
|
||||
CONSOLE_OUTPUT_THEME_ID,
|
||||
buildConsoleTheme,
|
||||
buildConsoleOutputTheme,
|
||||
} from './console';
|
||||
|
||||
export const DEFAULT_WORKER_ID = 'default';
|
||||
const langSpecificWorkerIds = [
|
||||
|
|
@ -23,6 +30,7 @@ const langSpecificWorkerIds = [
|
|||
monaco.languages.json.jsonDefaults.languageId,
|
||||
YAML_LANG_ID,
|
||||
ConsoleLang.ID,
|
||||
ConsoleOutputLang.ID,
|
||||
];
|
||||
|
||||
/**
|
||||
|
|
@ -33,12 +41,14 @@ registerLanguage(PainlessLang);
|
|||
registerLanguage(SQLLang);
|
||||
registerLanguage(ESQLLang);
|
||||
registerLanguage(ConsoleLang);
|
||||
registerLanguage(ConsoleOutputLang);
|
||||
|
||||
/**
|
||||
* Register custom themes
|
||||
*/
|
||||
registerTheme(ESQL_THEME_ID, buildESQlTheme());
|
||||
registerTheme(CONSOLE_THEME_ID, buildConsoleTheme());
|
||||
registerTheme(CONSOLE_OUTPUT_THEME_ID, buildConsoleOutputTheme());
|
||||
|
||||
const monacoBundleDir = (window as any).__kbnPublicPath__?.['kbn-monaco'];
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { Editor as EditorUI, EditorOutput } from './legacy/console_editor';
|
|||
import { getAutocompleteInfo, StorageKeys } from '../../../services';
|
||||
import { useEditorReadContext, useServicesContext, useRequestReadContext } from '../../contexts';
|
||||
import type { SenseEditor } from '../../models';
|
||||
import { MonacoEditor } from './monaco/monaco_editor';
|
||||
import { MonacoEditor, MonacoEditorOutput } from './monaco';
|
||||
|
||||
const INITIAL_PANEL_WIDTH = 50;
|
||||
const PANEL_MIN_WIDTH = '100px';
|
||||
|
|
@ -86,7 +86,13 @@ export const Editor = memo(({ loading, setEditorInstance }: Props) => {
|
|||
style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
|
||||
initialWidth={secondPanelWidth}
|
||||
>
|
||||
{loading ? <EditorContentSpinner /> : <EditorOutput />}
|
||||
{loading ? (
|
||||
<EditorContentSpinner />
|
||||
) : isMonacoEnabled ? (
|
||||
<MonacoEditorOutput />
|
||||
) : (
|
||||
<EditorOutput />
|
||||
)}
|
||||
</Panel>
|
||||
</PanelsContainer>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ import 'brace/mode/text';
|
|||
import 'brace/mode/hjson';
|
||||
import 'brace/mode/yaml';
|
||||
|
||||
import { expandLiteralStrings } from '../../../../../shared_imports';
|
||||
import {
|
||||
useEditorReadContext,
|
||||
useRequestReadContext,
|
||||
|
|
@ -27,23 +26,7 @@ import {
|
|||
import { createReadOnlyAceEditor, CustomAceEditor } from '../../../../models/legacy_core_editor';
|
||||
import { subscribeResizeChecker } from '../subscribe_console_resize_checker';
|
||||
import { applyCurrentSettings } from './apply_editor_settings';
|
||||
|
||||
const isJSONContentType = (contentType?: string) =>
|
||||
Boolean(contentType && contentType.indexOf('application/json') >= 0);
|
||||
|
||||
const isMapboxVectorTile = (contentType?: string) =>
|
||||
contentType?.includes('application/vnd.mapbox-vector-tile') ?? false;
|
||||
|
||||
/**
|
||||
* Best effort expand literal strings
|
||||
*/
|
||||
const safeExpandLiteralStrings = (data: string): string => {
|
||||
try {
|
||||
return expandLiteralStrings(data);
|
||||
} catch (e) {
|
||||
return data;
|
||||
}
|
||||
};
|
||||
import { isJSONContentType, isMapboxVectorTile, safeExpandLiteralStrings } from '../../utilities';
|
||||
|
||||
function modeForContentType(contentType?: string) {
|
||||
if (!contentType) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
export { MonacoEditor } from './monaco_editor';
|
||||
export { MonacoEditorOutput } from './monaco_editor_output';
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import React, { FunctionComponent, useEffect, useState } from 'react';
|
||||
import { CodeEditor } from '@kbn/code-editor';
|
||||
import { css } from '@emotion/react';
|
||||
import { VectorTile } from '@mapbox/vector-tile';
|
||||
import Protobuf from 'pbf';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { EuiScreenReaderOnly } from '@elastic/eui';
|
||||
import { CONSOLE_OUTPUT_THEME_ID, CONSOLE_OUTPUT_LANG_ID } from '@kbn/monaco';
|
||||
import { useEditorReadContext, useRequestReadContext } from '../../../contexts';
|
||||
import { convertMapboxVectorTileToJson } from '../legacy/console_editor/mapbox_vector_tile';
|
||||
import {
|
||||
isJSONContentType,
|
||||
isMapboxVectorTile,
|
||||
safeExpandLiteralStrings,
|
||||
languageForContentType,
|
||||
} from '../utilities';
|
||||
|
||||
export const MonacoEditorOutput: FunctionComponent = () => {
|
||||
const { settings: readOnlySettings } = useEditorReadContext();
|
||||
const {
|
||||
lastResult: { data },
|
||||
} = useRequestReadContext();
|
||||
const [value, setValue] = useState('');
|
||||
const [mode, setMode] = useState('text');
|
||||
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
const isMultipleRequest = data.length > 1;
|
||||
setMode(
|
||||
isMultipleRequest
|
||||
? CONSOLE_OUTPUT_LANG_ID
|
||||
: languageForContentType(data[0].response.contentType)
|
||||
);
|
||||
setValue(
|
||||
data
|
||||
.map((result) => {
|
||||
const { value: newValue, contentType } = result.response;
|
||||
|
||||
let editorOutput;
|
||||
if (readOnlySettings.tripleQuotes && isJSONContentType(contentType)) {
|
||||
editorOutput = safeExpandLiteralStrings(newValue as string);
|
||||
} else if (isMapboxVectorTile(contentType)) {
|
||||
const vectorTile = new VectorTile(new Protobuf(newValue as ArrayBuffer));
|
||||
const vectorTileJson = convertMapboxVectorTileToJson(vectorTile);
|
||||
editorOutput = safeExpandLiteralStrings(vectorTileJson as string);
|
||||
} else {
|
||||
editorOutput = newValue;
|
||||
}
|
||||
|
||||
return editorOutput;
|
||||
})
|
||||
.join('\n')
|
||||
);
|
||||
} else {
|
||||
setValue('');
|
||||
}
|
||||
}, [readOnlySettings, data, value]);
|
||||
|
||||
return (
|
||||
<div
|
||||
css={css`
|
||||
width: 100%;
|
||||
`}
|
||||
>
|
||||
<EuiScreenReaderOnly>
|
||||
<label htmlFor={'ConAppOutputTextarea'}>
|
||||
{i18n.translate('console.outputTextarea', {
|
||||
defaultMessage: 'Dev Tools Console output',
|
||||
})}
|
||||
</label>
|
||||
</EuiScreenReaderOnly>
|
||||
<CodeEditor
|
||||
languageId={mode}
|
||||
value={value}
|
||||
fullWidth={true}
|
||||
options={{
|
||||
fontSize: readOnlySettings.fontSize,
|
||||
wordWrap: readOnlySettings.wrapMode === true ? 'on' : 'off',
|
||||
theme: mode === CONSOLE_OUTPUT_LANG_ID ? CONSOLE_OUTPUT_THEME_ID : undefined,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
export * from './output_data';
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { YAML_LANG_ID, CONSOLE_OUTPUT_LANG_ID } from '@kbn/monaco';
|
||||
import { expandLiteralStrings } from '../../../../shared_imports';
|
||||
|
||||
export const isJSONContentType = (contentType?: string) =>
|
||||
Boolean(contentType && contentType.indexOf('application/json') >= 0);
|
||||
|
||||
export const isMapboxVectorTile = (contentType?: string) =>
|
||||
contentType?.includes('application/vnd.mapbox-vector-tile') ?? false;
|
||||
|
||||
/**
|
||||
* Best effort expand literal strings
|
||||
*/
|
||||
export const safeExpandLiteralStrings = (data: string): string => {
|
||||
try {
|
||||
return expandLiteralStrings(data);
|
||||
} catch (e) {
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
const TEXT_LANGUAGE_ID = 'text';
|
||||
|
||||
export const languageForContentType = (contentType?: string) => {
|
||||
if (!contentType) {
|
||||
return TEXT_LANGUAGE_ID;
|
||||
}
|
||||
if (isJSONContentType(contentType) || isMapboxVectorTile(contentType)) {
|
||||
// Using hjson will allow us to use comments in editor output and solves the problem with error markers
|
||||
return CONSOLE_OUTPUT_LANG_ID;
|
||||
} else if (contentType.indexOf('application/yaml') >= 0) {
|
||||
return YAML_LANG_ID;
|
||||
}
|
||||
return TEXT_LANGUAGE_ID;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue