From 7ff85c49405faa46ada51acd7a5f75541b4efdce Mon Sep 17 00:00:00 2001 From: Elena Stoeva Date: Fri, 13 Sep 2024 17:45:09 +0300 Subject: [PATCH 1/6] [Console] Improve status code highlighting --- .../src/console/lexer_rules/console_output.ts | 22 +++++--- packages/kbn-monaco/src/console/theme.ts | 30 ++++------- .../editor/monaco/utils/constants.ts | 6 +-- .../containers/editor/monaco/utils/index.ts | 6 +-- .../utils/status_code_decoration_utils.ts | 54 ++++++++----------- .../use_send_current_request/send_request.ts | 2 +- src/plugins/console/public/styles/_app.scss | 45 ++++++++++------ 7 files changed, 81 insertions(+), 84 deletions(-) diff --git a/packages/kbn-monaco/src/console/lexer_rules/console_output.ts b/packages/kbn-monaco/src/console/lexer_rules/console_output.ts index c9ebd0cb6e876..fe0db92f38fd4 100644 --- a/packages/kbn-monaco/src/console/lexer_rules/console_output.ts +++ b/packages/kbn-monaco/src/console/lexer_rules/console_output.ts @@ -25,21 +25,31 @@ export const consoleOutputLexerRules: monaco.languages.IMonarchLanguage = { comments: [ // Line comment indicated by # // Everything after the # character is matched, stopping right before the status code and status text at the end if they are present - matchTokensWithEOL('comment', /# .+?(?=\s+\d{3}(?: \w+)*$)/, 'root', 'status'), + matchTokensWithEOL('comment.info', /# .+?(?=\s+\[\b1\d{2}(?: \w+)*\]$)/, 'root', 'status'), + matchTokensWithEOL('comment.success', /# .+?(?=\s+\[\b2\d{2}(?: \w+)*\]$)/, 'root', 'status'), + matchTokensWithEOL( + 'comment.redirect', + /# .+?(?=\s+\[\b3\d{2}(?: \w+)*\]$)/, + 'root', + 'status' + ), + matchTokensWithEOL('comment.warning', /# .+?(?=\s+\[\b4\d{2}(?: \w+)*\]$)/, 'root', 'status'), + matchTokensWithEOL('comment.error', /# .+?(?=\s+\[\b5\d{2}(?: \w+)*\]$)/, 'root', 'status'), + // matchTokensWithEOL('comment', /# .+?(?=\s+\[\d{3}(?: \w+)*$)/, 'root', 'status'), ...consoleSharedLexerRules.tokenizer.comments, ], status: [ // Following HTTP response status codes conventions // Informational responses (status codes 100 – 199) - matchTokensWithEOL('status.info', /\b1\d{2}(?: \w+)*$/, 'root'), + matchTokensWithEOL('status.info', /\[\b1\d{2}(?: \w+)*\]$/, 'root'), // Successful responses (status codes 200 – 299) - matchTokensWithEOL('status.success', /\b2\d{2}(?: \w+)*$/, 'root'), + matchTokensWithEOL('status.success', /\[\b2\d{2}(?: \w+)*\]$/, 'root'), // Redirection messages (status codes 300 – 399) - matchTokensWithEOL('status.redirect', /\b3\d{2}(?: \w+)*$/, 'root'), + matchTokensWithEOL('status.redirect', /\[\b3\d{2}(?: \w+)*\]$/, 'root'), // Client error responses (status codes 400 – 499) - matchTokensWithEOL('status.warning', /\b4\d{2}(?: \w+)*$/, 'root'), + matchTokensWithEOL('status.warning', /\[\b4\d{2}(?: \w+)*\]$/, 'root'), // Server error responses (status codes 500 – 599) - matchTokensWithEOL('status.error', /\b5\d{2}(?: \w+)*$/, 'root'), + matchTokensWithEOL('status.error', /\[\b5\d{2}(?: \w+)*\]$/, 'root'), ], }, }; diff --git a/packages/kbn-monaco/src/console/theme.ts b/packages/kbn-monaco/src/console/theme.ts index bcb3d93368018..82d62f8f15f14 100644 --- a/packages/kbn-monaco/src/console/theme.ts +++ b/packages/kbn-monaco/src/console/theme.ts @@ -38,26 +38,16 @@ export const buildConsoleTheme = (): monaco.editor.IStandaloneThemeData => { ['constant.numeric'], makeHighContrastColor(euiThemeVars.euiColorAccentText)(background) ), - ...buildRuleGroup( - ['status.info'], - makeHighContrastColor(euiThemeVars.euiTextColor)(background) - ), - ...buildRuleGroup( - ['status.success'], - makeHighContrastColor(euiThemeVars.euiTextColor)(euiThemeVars.euiColorSuccess) - ), - ...buildRuleGroup( - ['status.redirect'], - makeHighContrastColor(euiThemeVars.euiTextColor)(background) - ), - ...buildRuleGroup( - ['status.warning'], - makeHighContrastColor(euiThemeVars.euiTextColor)(euiThemeVars.euiColorWarning) - ), - ...buildRuleGroup( - ['status.error'], - makeHighContrastColor('#FFFFFF')(euiThemeVars.euiColorDanger) - ), + ...buildRuleGroup(['comment.info'], euiThemeVars.euiTextColor), + ...buildRuleGroup(['comment.success'], euiThemeVars.euiColorSuccessText), + ...buildRuleGroup(['comment.redirect'], euiThemeVars.euiTextColor), + ...buildRuleGroup(['comment.warning'], euiThemeVars.euiColorWarningText), + ...buildRuleGroup(['comment.error'], euiThemeVars.euiColorDangerText), + ...buildRuleGroup(['status.info'], euiThemeVars.euiTextColor, true), + ...buildRuleGroup(['status.success'], euiThemeVars.euiColorSuccessText, true), + ...buildRuleGroup(['status.redirect'], euiThemeVars.euiTextColor, true), + ...buildRuleGroup(['status.warning'], euiThemeVars.euiColorWarningText, true), + ...buildRuleGroup(['status.error'], euiThemeVars.euiColorDangerText, true), ...buildRuleGroup(['method'], makeHighContrastColor(methodTextColor)(background)), ...buildRuleGroup(['url'], makeHighContrastColor(urlTextColor)(background)), ], diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/constants.ts b/src/plugins/console/public/application/containers/editor/monaco/utils/constants.ts index f97c9b4ef1d69..e6e5c1f622366 100644 --- a/src/plugins/console/public/application/containers/editor/monaco/utils/constants.ts +++ b/src/plugins/console/public/application/containers/editor/monaco/utils/constants.ts @@ -17,11 +17,7 @@ export const SELECTED_REQUESTS_CLASSNAME = 'console__monaco_editor__selectedRequ /* * CSS class names used for the styling of multiple-response status codes */ -export const PRIMARY_STATUS_BADGE_CLASSNAME = 'monaco__status_badge--primary'; -export const SUCCESS_STATUS_BADGE_CLASSNAME = 'monaco__status_badge--success'; -export const DEFAULT_STATUS_BADGE_CLASSNAME = 'monaco__status_badge--default'; -export const WARNING_STATUS_BADGE_CLASSNAME = 'monaco__status_badge--warning'; -export const DANGER_STATUS_BADGE_CLASSNAME = 'monaco__status_badge--danger'; +export const STATUS_CODE_LINE_CLASSNAME = 'monaco__status_code_line'; export const whitespacesRegex = /\s+/; export const newLineRegex = /\n/; diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/index.ts b/src/plugins/console/public/application/containers/editor/monaco/utils/index.ts index 41a303933f80a..8875e8559639f 100644 --- a/src/plugins/console/public/application/containers/editor/monaco/utils/index.ts +++ b/src/plugins/console/public/application/containers/editor/monaco/utils/index.ts @@ -10,11 +10,7 @@ export { AutocompleteType, SELECTED_REQUESTS_CLASSNAME, - SUCCESS_STATUS_BADGE_CLASSNAME, - WARNING_STATUS_BADGE_CLASSNAME, - PRIMARY_STATUS_BADGE_CLASSNAME, - DEFAULT_STATUS_BADGE_CLASSNAME, - DANGER_STATUS_BADGE_CLASSNAME, + STATUS_CODE_LINE_CLASSNAME, } from './constants'; export { getRequestStartLineNumber, diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.ts b/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.ts index f9d88a90e1fa2..415fe710ac83c 100644 --- a/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.ts +++ b/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.ts @@ -9,28 +9,22 @@ import { monaco } from '@kbn/monaco'; import { RequestResult } from '../../../../hooks/use_send_current_request/send_request'; -import { - DEFAULT_STATUS_BADGE_CLASSNAME, - SUCCESS_STATUS_BADGE_CLASSNAME, - PRIMARY_STATUS_BADGE_CLASSNAME, - WARNING_STATUS_BADGE_CLASSNAME, - DANGER_STATUS_BADGE_CLASSNAME, -} from './constants'; +import { STATUS_CODE_LINE_CLASSNAME } from './constants'; -const getStatusCodeClassName = (statusCode: number) => { +const getStatusCodeClassNameSuffix = (statusCode: number) => { if (statusCode <= 199) { - return DEFAULT_STATUS_BADGE_CLASSNAME; + return '--default'; } if (statusCode <= 299) { - return SUCCESS_STATUS_BADGE_CLASSNAME; + return '--success'; } if (statusCode <= 399) { - return PRIMARY_STATUS_BADGE_CLASSNAME; + return '--primary'; } if (statusCode <= 499) { - return WARNING_STATUS_BADGE_CLASSNAME; + return '--warning'; } - return DANGER_STATUS_BADGE_CLASSNAME; + return '--danger'; }; export const getStatusCodeDecorations = (data: RequestResult[]) => { @@ -39,25 +33,21 @@ export const getStatusCodeDecorations = (data: RequestResult[]) => { data.forEach(({ response }) => { if (response?.value) { - const totalStatus = - response.statusCode && response.statusText - ? response.statusCode + ' ' + response.statusText - : ''; - const startColumn = (response.value as string).indexOf(totalStatus) + 1; - if (totalStatus && startColumn !== 0) { - const range = { - startLineNumber: lastResponseEndLine + 1, - startColumn, - endLineNumber: lastResponseEndLine + 1, - endColumn: startColumn + totalStatus.length, - }; - decorations.push({ - range, - options: { - inlineClassName: getStatusCodeClassName(response.statusCode), - }, - }); - } + const range = { + startLineNumber: lastResponseEndLine + 1, + startColumn: 1, + endLineNumber: lastResponseEndLine + 1, + endColumn: 100, + }; + const classNameSuffix = getStatusCodeClassNameSuffix(response.statusCode); + decorations.push({ + range, + options: { + isWholeLine: true, + blockClassName: `${STATUS_CODE_LINE_CLASSNAME}${classNameSuffix}`, + marginClassName: `${STATUS_CODE_LINE_CLASSNAME}_number${classNameSuffix}`, + }, + }); lastResponseEndLine += (response.value as string).split(/\\n|\n/).length; } }); diff --git a/src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts b/src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts index 41f7a66b4640e..877cd1b7b2c6f 100644 --- a/src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts +++ b/src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts @@ -129,7 +129,7 @@ export function sendRequest(args: RequestArgs): Promise { } if (isMultiRequest) { - value = `# ${req.method} ${req.url} ${statusCode} ${statusText}\n${value}`; + value = `# ${req.method} ${req.url} [${statusCode} ${statusText}]\n${value}`; } results.push({ diff --git a/src/plugins/console/public/styles/_app.scss b/src/plugins/console/public/styles/_app.scss index fdeaf67963fa1..9a387c27b2851 100644 --- a/src/plugins/console/public/styles/_app.scss +++ b/src/plugins/console/public/styles/_app.scss @@ -151,29 +151,44 @@ max-width: 100%; } -.monaco__status_badge--primary { - @extend %monaco__status_badge; - background-color: $euiColorVis1; +.monaco__status_code_line--primary { + background-color: transparentize($euiColorVis1, .8); } -.monaco__status_badge--success { - @extend %monaco__status_badge; - background-color: $euiColorSuccess; +.monaco__status_code_line_number--primary { + background-color: transparentize($euiColorVis1, .4); } -.monaco__status_badge--default { - @extend %monaco__status_badge; - background-color: $euiColorLightShade; +.monaco__status_code_line--success { + background-color: transparentize($euiColorSuccess, .8);; } -.monaco__status_badge--warning { - @extend %monaco__status_badge; - background-color: $euiColorWarning; +.monaco__status_code_line_number--success { + background-color: transparentize($euiColorSuccess, .3);; } -.monaco__status_badge--danger { - @extend %monaco__status_badge; - background-color: $euiColorDanger; +.monaco__status_code_line--default { + background-color: transparentize($euiColorLightShade, .8); +} + +.monaco__status_code_line_number--default { + background-color: transparentize($euiColorLightShade, .4); +} + +.monaco__status_code_line--warning { + background-color: transparentize($euiColorWarning, .8); +} + +.monaco__status_code_line_number--warning { + background-color: transparentize($euiColorWarning, .4); +} + +.monaco__status_code_line--danger { + background-color: transparentize($euiColorDanger, .8); +} + +.monaco__status_code_line_number--danger { + background-color: transparentize($euiColorDanger, .4); } /* From 99a2b92e23fab30f39a9e0400e5f7cb9cf8c35e9 Mon Sep 17 00:00:00 2001 From: Elena Stoeva Date: Mon, 16 Sep 2024 15:19:53 +0100 Subject: [PATCH 2/6] Small fixes --- .../src/console/lexer_rules/console_output.ts | 29 +++++++------------ packages/kbn-monaco/src/console/theme.ts | 12 ++++---- src/plugins/console/public/styles/_app.scss | 2 +- 3 files changed, 18 insertions(+), 25 deletions(-) diff --git a/packages/kbn-monaco/src/console/lexer_rules/console_output.ts b/packages/kbn-monaco/src/console/lexer_rules/console_output.ts index fe0db92f38fd4..30b846d529fe5 100644 --- a/packages/kbn-monaco/src/console/lexer_rules/console_output.ts +++ b/packages/kbn-monaco/src/console/lexer_rules/console_output.ts @@ -25,31 +25,24 @@ export const consoleOutputLexerRules: monaco.languages.IMonarchLanguage = { comments: [ // Line comment indicated by # // Everything after the # character is matched, stopping right before the status code and status text at the end if they are present - matchTokensWithEOL('comment.info', /# .+?(?=\s+\[\b1\d{2}(?: \w+)*\]$)/, 'root', 'status'), + matchTokensWithEOL('comment.default', /# .+?(?=\s+\[\b1\d{2}(?: \w+)*\]$)/, 'root', 'status'), matchTokensWithEOL('comment.success', /# .+?(?=\s+\[\b2\d{2}(?: \w+)*\]$)/, 'root', 'status'), - matchTokensWithEOL( - 'comment.redirect', - /# .+?(?=\s+\[\b3\d{2}(?: \w+)*\]$)/, - 'root', - 'status' - ), + matchTokensWithEOL('comment.primary', /# .+?(?=\s+\[\b3\d{2}(?: \w+)*\]$)/, 'root', 'status'), matchTokensWithEOL('comment.warning', /# .+?(?=\s+\[\b4\d{2}(?: \w+)*\]$)/, 'root', 'status'), - matchTokensWithEOL('comment.error', /# .+?(?=\s+\[\b5\d{2}(?: \w+)*\]$)/, 'root', 'status'), - // matchTokensWithEOL('comment', /# .+?(?=\s+\[\d{3}(?: \w+)*$)/, 'root', 'status'), + matchTokensWithEOL('comment.danger', /# .+?(?=\s+\[\b5\d{2}(?: \w+)*\]$)/, 'root', 'status'), ...consoleSharedLexerRules.tokenizer.comments, ], status: [ - // Following HTTP response status codes conventions - // Informational responses (status codes 100 – 199) - matchTokensWithEOL('status.info', /\[\b1\d{2}(?: \w+)*\]$/, 'root'), - // Successful responses (status codes 200 – 299) + // Status codes 100 – 199 + matchTokensWithEOL('status.default', /\[\b1\d{2}(?: \w+)*\]$/, 'root'), + // Status codes 200 – 299 matchTokensWithEOL('status.success', /\[\b2\d{2}(?: \w+)*\]$/, 'root'), - // Redirection messages (status codes 300 – 399) - matchTokensWithEOL('status.redirect', /\[\b3\d{2}(?: \w+)*\]$/, 'root'), - // Client error responses (status codes 400 – 499) + // Status codes 300 – 399 + matchTokensWithEOL('status.primary', /\[\b3\d{2}(?: \w+)*\]$/, 'root'), + // Status codes 400 – 499 matchTokensWithEOL('status.warning', /\[\b4\d{2}(?: \w+)*\]$/, 'root'), - // Server error responses (status codes 500 – 599) - matchTokensWithEOL('status.error', /\[\b5\d{2}(?: \w+)*\]$/, 'root'), + // Status codes 500 – 599 + matchTokensWithEOL('status.danger', /\[\b5\d{2}(?: \w+)*\]$/, 'root'), ], }, }; diff --git a/packages/kbn-monaco/src/console/theme.ts b/packages/kbn-monaco/src/console/theme.ts index 82d62f8f15f14..d489cf81b1f30 100644 --- a/packages/kbn-monaco/src/console/theme.ts +++ b/packages/kbn-monaco/src/console/theme.ts @@ -38,16 +38,16 @@ export const buildConsoleTheme = (): monaco.editor.IStandaloneThemeData => { ['constant.numeric'], makeHighContrastColor(euiThemeVars.euiColorAccentText)(background) ), - ...buildRuleGroup(['comment.info'], euiThemeVars.euiTextColor), + ...buildRuleGroup(['comment.default'], euiThemeVars.euiTextColor), ...buildRuleGroup(['comment.success'], euiThemeVars.euiColorSuccessText), - ...buildRuleGroup(['comment.redirect'], euiThemeVars.euiTextColor), + ...buildRuleGroup(['comment.primary'], euiThemeVars.euiTextColor), ...buildRuleGroup(['comment.warning'], euiThemeVars.euiColorWarningText), - ...buildRuleGroup(['comment.error'], euiThemeVars.euiColorDangerText), - ...buildRuleGroup(['status.info'], euiThemeVars.euiTextColor, true), + ...buildRuleGroup(['comment.danger'], euiThemeVars.euiColorDangerText), + ...buildRuleGroup(['status.default'], euiThemeVars.euiTextColor, true), ...buildRuleGroup(['status.success'], euiThemeVars.euiColorSuccessText, true), - ...buildRuleGroup(['status.redirect'], euiThemeVars.euiTextColor, true), + ...buildRuleGroup(['status.primary'], euiThemeVars.euiTextColor, true), ...buildRuleGroup(['status.warning'], euiThemeVars.euiColorWarningText, true), - ...buildRuleGroup(['status.error'], euiThemeVars.euiColorDangerText, true), + ...buildRuleGroup(['status.danger'], euiThemeVars.euiColorDangerText, true), ...buildRuleGroup(['method'], makeHighContrastColor(methodTextColor)(background)), ...buildRuleGroup(['url'], makeHighContrastColor(urlTextColor)(background)), ], diff --git a/src/plugins/console/public/styles/_app.scss b/src/plugins/console/public/styles/_app.scss index 9a387c27b2851..9707479f50da1 100644 --- a/src/plugins/console/public/styles/_app.scss +++ b/src/plugins/console/public/styles/_app.scss @@ -188,7 +188,7 @@ } .monaco__status_code_line_number--danger { - background-color: transparentize($euiColorDanger, .4); + background-color: transparentize($euiColorDanger, .6); } /* From 8fa90005992adb8b179566a20c1ed5130dabc711 Mon Sep 17 00:00:00 2001 From: Elena Stoeva Date: Mon, 16 Sep 2024 16:01:28 +0100 Subject: [PATCH 3/6] Update unit tests --- .../status_code_decoration_utils.test.ts | 107 ++++-------------- .../utils/status_code_decoration_utils.ts | 2 +- 2 files changed, 25 insertions(+), 84 deletions(-) diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.test.ts b/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.test.ts index 42287acd9de5b..50b3fdf0a625a 100644 --- a/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.test.ts +++ b/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.test.ts @@ -8,13 +8,17 @@ */ import { getStatusCodeDecorations } from './status_code_decoration_utils'; -import { - SUCCESS_STATUS_BADGE_CLASSNAME, - WARNING_STATUS_BADGE_CLASSNAME, - DANGER_STATUS_BADGE_CLASSNAME, -} from './constants'; +import { STATUS_CODE_LINE_CLASSNAME } from './constants'; import { RequestResult } from '../../../../hooks/use_send_current_request/send_request'; +const SUCCESS_STATUS_CODE_CLASSNAME = `${STATUS_CODE_LINE_CLASSNAME}--success`; +const WARNING_STATUS_CODE_CLASSNAME = `${STATUS_CODE_LINE_CLASSNAME}--warning`; +const DANGER_STATUS_CODE_CLASSNAME = `${STATUS_CODE_LINE_CLASSNAME}--danger`; + +const SUCCESS_STATUS_CODE_LINE_CLASSNAME = `${STATUS_CODE_LINE_CLASSNAME}_number--success`; +const WARNING_STATUS_CODE_LINE_CLASSNAME = `${STATUS_CODE_LINE_CLASSNAME}_number--warning`; +const DANGER_STATUS_CODE_LINE_CLASSNAME = `${STATUS_CODE_LINE_CLASSNAME}_number--danger`; + describe('getStatusCodeDecorations', () => { it('correctly returns all decorations on full data', () => { // Sample multiple-response data returned from ES: @@ -91,108 +95,45 @@ describe('getStatusCodeDecorations', () => { const EXPECTED_DECORATIONS = [ { range: { - endColumn: 21, + endColumn: 1, endLineNumber: 1, - startColumn: 15, + startColumn: 1, startLineNumber: 1, }, options: { - inlineClassName: SUCCESS_STATUS_BADGE_CLASSNAME, + isWholeLine: true, + blockClassName: SUCCESS_STATUS_CODE_CLASSNAME, + marginClassName: SUCCESS_STATUS_CODE_LINE_CLASSNAME, }, }, { range: { - endColumn: 28, + endColumn: 1, endLineNumber: 12, - startColumn: 13, + startColumn: 1, startLineNumber: 12, }, options: { - inlineClassName: WARNING_STATUS_BADGE_CLASSNAME, + isWholeLine: true, + blockClassName: WARNING_STATUS_CODE_CLASSNAME, + marginClassName: WARNING_STATUS_CODE_LINE_CLASSNAME, }, }, { range: { - endColumn: 47, + endColumn: 1, endLineNumber: 18, - startColumn: 22, + startColumn: 1, startLineNumber: 18, }, options: { - inlineClassName: DANGER_STATUS_BADGE_CLASSNAME, + isWholeLine: true, + blockClassName: DANGER_STATUS_CODE_CLASSNAME, + marginClassName: DANGER_STATUS_CODE_LINE_CLASSNAME, }, }, ]; expect(getStatusCodeDecorations(SAMPLE_COMPLETE_DATA)).toEqual(EXPECTED_DECORATIONS); }); - - it('only returns decorations for data with complete status code and text', () => { - // This sample data is same as in previous test but some of it has incomplete status code or status text - const SAMPLE_INCOMPLETE_DATA: RequestResult[] = [ - { - response: { - timeMs: 50, - // @ts-ignore - statusCode: undefined, - statusText: 'OK', - contentType: 'application/json', - value: - '# GET _search OK\n{\n"took": 1,\n"timed_out": false,\n"hits": {\n"total": {\n"value": 0,\n"relation": "eq"\n}\n}\n}', - }, - request: { - data: '', - method: 'GET', - path: '_search', - }, - }, - { - response: { - timeMs: 22, - statusCode: 400, - statusText: 'Bad Request', - contentType: 'application/json', - value: '# GET _test 400 Bad Request\n{\n"error": {\n"root_cause": [],\n"status": 400\n}', - }, - request: { - data: '', - method: 'GET', - path: '_test', - }, - }, - { - response: { - timeMs: 23, - // @ts-ignore - statusCode: undefined, - // @ts-ignore - statusText: undefined, - contentType: 'application/json', - value: '# PUT /library/_bulk\n{\n"error": {\n"root_cause": [],\n"status": 500\n}', - }, - request: { - data: '', - method: 'PUT', - path: '/library/_bulk?refresh', - }, - }, - ]; - - // Only the second response has complete status code and text - const EXPECTED_DECORATIONS = [ - { - range: { - endColumn: 28, - endLineNumber: 12, - startColumn: 13, - startLineNumber: 12, - }, - options: { - inlineClassName: WARNING_STATUS_BADGE_CLASSNAME, - }, - }, - ]; - - expect(getStatusCodeDecorations(SAMPLE_INCOMPLETE_DATA)).toEqual(EXPECTED_DECORATIONS); - }); }); diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.ts b/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.ts index 415fe710ac83c..5a049c237899a 100644 --- a/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.ts +++ b/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.ts @@ -37,7 +37,7 @@ export const getStatusCodeDecorations = (data: RequestResult[]) => { startLineNumber: lastResponseEndLine + 1, startColumn: 1, endLineNumber: lastResponseEndLine + 1, - endColumn: 100, + endColumn: 1, // It doesn't matter what endColumn we set as the decoration will be applied to the whole line }; const classNameSuffix = getStatusCodeClassNameSuffix(response.statusCode); decorations.push({ From 8b0b58e7812898f89443053a5c182f2b27e8f978 Mon Sep 17 00:00:00 2001 From: Elena Stoeva Date: Mon, 16 Sep 2024 16:09:21 +0100 Subject: [PATCH 4/6] Update functional test --- test/functional/apps/console/monaco/_console.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/functional/apps/console/monaco/_console.ts b/test/functional/apps/console/monaco/_console.ts index c27b23c828212..78a37b4694e06 100644 --- a/test/functional/apps/console/monaco/_console.ts +++ b/test/functional/apps/console/monaco/_console.ts @@ -133,8 +133,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await retry.try(async () => { const response = await PageObjects.console.monaco.getOutputText(); log.debug(response); - expect(response).to.contain('# PUT test-index 200'); - expect(response).to.contain('# DELETE test-index 200'); + expect(response).to.contain('# PUT test-index [200]'); + expect(response).to.contain('# DELETE test-index [200]'); }); }); From fd60c2a2532d487861b3cf9cfacc07a8174d5536 Mon Sep 17 00:00:00 2001 From: Elena Stoeva Date: Tue, 17 Sep 2024 12:19:29 +0100 Subject: [PATCH 5/6] Improve color contrast and fix a test --- packages/kbn-monaco/src/console/theme.ts | 64 ++++++++++++++++--- .../use_send_current_request/send_request.ts | 2 +- src/plugins/console/public/styles/_app.scss | 20 +++--- .../apps/console/monaco/_console.ts | 4 +- 4 files changed, 67 insertions(+), 23 deletions(-) diff --git a/packages/kbn-monaco/src/console/theme.ts b/packages/kbn-monaco/src/console/theme.ts index d489cf81b1f30..6f5a1e78618fb 100644 --- a/packages/kbn-monaco/src/console/theme.ts +++ b/packages/kbn-monaco/src/console/theme.ts @@ -20,6 +20,11 @@ const background = euiThemeVars.euiFormBackgroundColor; const booleanTextColor = '#585CF6'; const methodTextColor = '#DD0A73'; const urlTextColor = '#00A69B'; +const defaultStatusBackgroundColor = darkMode ? '#191B20' : '#F7F8FA'; +const successStatusBackgroundColor = darkMode ? '#212B30' : '#E7F5F5'; +const primaryStatusBackgroundColor = darkMode ? '#1E232D' : '#EBF1F7'; +const warningStatusBackgroundColor = darkMode ? '#2C2B25' : '#FBF6E9'; +const dangerStatusBackgroundColor = darkMode ? '#2E2024' : '#F6E6E7'; export const buildConsoleTheme = (): monaco.editor.IStandaloneThemeData => { const euiTheme = darkMode ? buildDarkTheme() : buildLightTheme(); return { @@ -38,18 +43,57 @@ export const buildConsoleTheme = (): monaco.editor.IStandaloneThemeData => { ['constant.numeric'], makeHighContrastColor(euiThemeVars.euiColorAccentText)(background) ), - ...buildRuleGroup(['comment.default'], euiThemeVars.euiTextColor), - ...buildRuleGroup(['comment.success'], euiThemeVars.euiColorSuccessText), - ...buildRuleGroup(['comment.primary'], euiThemeVars.euiTextColor), - ...buildRuleGroup(['comment.warning'], euiThemeVars.euiColorWarningText), - ...buildRuleGroup(['comment.danger'], euiThemeVars.euiColorDangerText), - ...buildRuleGroup(['status.default'], euiThemeVars.euiTextColor, true), - ...buildRuleGroup(['status.success'], euiThemeVars.euiColorSuccessText, true), - ...buildRuleGroup(['status.primary'], euiThemeVars.euiTextColor, true), - ...buildRuleGroup(['status.warning'], euiThemeVars.euiColorWarningText, true), - ...buildRuleGroup(['status.danger'], euiThemeVars.euiColorDangerText, true), + ...buildRuleGroup( + ['comment.default'], + makeHighContrastColor(euiThemeVars.euiTextColor)(defaultStatusBackgroundColor) + ), + ...buildRuleGroup( + ['comment.success'], + makeHighContrastColor(euiThemeVars.euiColorSuccessText)(successStatusBackgroundColor) + ), + ...buildRuleGroup( + ['comment.primary'], + makeHighContrastColor(euiThemeVars.euiTextColor)(primaryStatusBackgroundColor) + ), + ...buildRuleGroup( + ['comment.warning'], + makeHighContrastColor(euiThemeVars.euiColorWarningText)(warningStatusBackgroundColor) + ), + ...buildRuleGroup( + ['comment.danger'], + makeHighContrastColor(euiThemeVars.euiColorDangerText)(dangerStatusBackgroundColor) + ), + ...buildRuleGroup( + ['status.default'], + makeHighContrastColor(euiThemeVars.euiTextColor)(defaultStatusBackgroundColor), + true + ), + ...buildRuleGroup( + ['status.success'], + makeHighContrastColor(euiThemeVars.euiColorSuccessText)(successStatusBackgroundColor), + true + ), + ...buildRuleGroup( + ['status.primary'], + makeHighContrastColor(euiThemeVars.euiTextColor)(primaryStatusBackgroundColor), + true + ), + ...buildRuleGroup( + ['status.warning'], + makeHighContrastColor(euiThemeVars.euiColorWarningText)(warningStatusBackgroundColor), + true + ), + ...buildRuleGroup( + ['status.danger'], + makeHighContrastColor(euiThemeVars.euiColorDangerText)(dangerStatusBackgroundColor), + true + ), ...buildRuleGroup(['method'], makeHighContrastColor(methodTextColor)(background)), ...buildRuleGroup(['url'], makeHighContrastColor(urlTextColor)(background)), ], + colors: { + ...euiTheme.colors, + 'editorLineNumber.foreground': euiThemeVars.euiTextColor, + }, }; }; diff --git a/src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts b/src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts index 877cd1b7b2c6f..b3e89a00edc33 100644 --- a/src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts +++ b/src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts @@ -163,7 +163,7 @@ export function sendRequest(args: RequestArgs): Promise { } if (isMultiRequest) { - value = `# ${req.method} ${req.url} ${statusCode} ${statusText}\n${value}`; + value = `# ${req.method} ${req.url} [${statusCode} ${statusText}]\n${value}`; } const result = { diff --git a/src/plugins/console/public/styles/_app.scss b/src/plugins/console/public/styles/_app.scss index 9707479f50da1..2f736cdc93335 100644 --- a/src/plugins/console/public/styles/_app.scss +++ b/src/plugins/console/public/styles/_app.scss @@ -152,43 +152,43 @@ } .monaco__status_code_line--primary { - background-color: transparentize($euiColorVis1, .8); + background-color: transparentize($euiColorVis1, .9); } .monaco__status_code_line_number--primary { - background-color: transparentize($euiColorVis1, .4); + background-color: transparentize($euiColorVis1, .5); } .monaco__status_code_line--success { - background-color: transparentize($euiColorSuccess, .8);; + background-color: transparentize($euiColorSuccess, .9); } .monaco__status_code_line_number--success { - background-color: transparentize($euiColorSuccess, .3);; + background-color: transparentize($euiColorSuccess, .5); } .monaco__status_code_line--default { - background-color: transparentize($euiColorLightShade, .8); + background-color: transparentize($euiColorLightShade, .9); } .monaco__status_code_line_number--default { - background-color: transparentize($euiColorLightShade, .4); + background-color: transparentize($euiColorLightShade, .5); } .monaco__status_code_line--warning { - background-color: transparentize($euiColorWarning, .8); + background-color: transparentize($euiColorWarning, .9); } .monaco__status_code_line_number--warning { - background-color: transparentize($euiColorWarning, .4); + background-color: transparentize($euiColorWarning, .5); } .monaco__status_code_line--danger { - background-color: transparentize($euiColorDanger, .8); + background-color: transparentize($euiColorDanger, .9); } .monaco__status_code_line_number--danger { - background-color: transparentize($euiColorDanger, .6); + background-color: transparentize($euiColorDanger, .5); } /* diff --git a/test/functional/apps/console/monaco/_console.ts b/test/functional/apps/console/monaco/_console.ts index 78a37b4694e06..299967fe5a914 100644 --- a/test/functional/apps/console/monaco/_console.ts +++ b/test/functional/apps/console/monaco/_console.ts @@ -133,8 +133,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await retry.try(async () => { const response = await PageObjects.console.monaco.getOutputText(); log.debug(response); - expect(response).to.contain('# PUT test-index [200]'); - expect(response).to.contain('# DELETE test-index [200]'); + expect(response).to.contain('# PUT test-index [200 OK]'); + expect(response).to.contain('# DELETE test-index [200 OK]'); }); }); From 933a739214f1bcbf722dcf0f5d57f7a68d3acc7d Mon Sep 17 00:00:00 2001 From: Elena Stoeva Date: Tue, 17 Sep 2024 16:27:00 +0100 Subject: [PATCH 6/6] Update test after merge --- test/functional/apps/console/_output_panel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/functional/apps/console/_output_panel.ts b/test/functional/apps/console/_output_panel.ts index 8aa548ce4b139..49c41ae7a6ccc 100644 --- a/test/functional/apps/console/_output_panel.ts +++ b/test/functional/apps/console/_output_panel.ts @@ -65,7 +65,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await sendMultipleRequests(['\n GET /_search?pretty', '\n GET /_search?pretty']); const response = await PageObjects.console.getOutputText(); - expect(response).to.contain('# 2: GET /_search?pretty'); + expect(response).to.contain('# 2: GET /_search?pretty [200 OK]'); }); it('should clear the console output', async () => {