[Console] Migrate output editor to Monaco (#178696)

Closes #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="https://github.com/elastic/kibana/assets/59341489/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 in https://github.com/elastic/kibana/blob/b8c13babf1c24a2a50668bc5ed647ce87deec5f0/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="https://github.com/elastic/kibana/assets/59341489/898a3e48-5a3b-48b6-ac4e-92fa6e05403a"> Now: <img width="722" alt="Screenshot 2024-04-03 at 11 12 59" src="https://github.com/elastic/kibana/assets/59341489/503614db-946b-490e-9447-fd3cdcb83bcf"> When multiple requests are sent: <img width="1491" alt="Screenshot 2024-04-03 at 11 10 53" src="https://github.com/elastic/kibana/assets/59341489/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="https://github.com/elastic/kibana/assets/59341489/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="https://github.com/elastic/kibana/assets/59341489/f30cdfd6-be67-4d34-b54d-2a19d6dcb09d"> </details>  --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Apr 4, 2024 · 4a5acf3 · 4a5acf3
1 parent 82ccb8d
commit 4a5acf3
Show file tree

Hide file tree

Showing 18 changed files with 510 additions and 222 deletions.
diff --git a/packages/kbn-monaco/index.ts b/packages/kbn-monaco/index.ts
@@ -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';
diff --git a/packages/kbn-monaco/src/console/constants.ts b/packages/kbn-monaco/src/console/constants.ts
@@ -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';
diff --git a/packages/kbn-monaco/src/console/index.ts b/packages/kbn-monaco/src/console/index.ts
@@ -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,
+};
diff --git a/packages/kbn-monaco/src/console/lexer_rules/console_editor.ts b/packages/kbn-monaco/src/console/lexer_rules/console_editor.ts
@@ -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'
+      ),
+    ],
+  },
+};
diff --git a/packages/kbn-monaco/src/console/lexer_rules/console_output.ts b/packages/kbn-monaco/src/console/lexer_rules/console_output.ts
@@ -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,
+};
diff --git a/packages/kbn-monaco/src/console/lexer_rules/index.ts b/packages/kbn-monaco/src/console/lexer_rules/index.ts
@@ -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';