[Console] Improve UX around handling multiple requests

src/plugins/console/public/application/containers/editor/legacy/console_editor/editor_output.tsx

@@ -11,6 +11,7 @@ import { EuiScreenReaderOnly } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useRef } from 'react';
 import { convertMapboxVectorTileToJson } from './mapbox_vector_tile';
+import { Mode } from '../../../../models/legacy_core_editor/mode/output';
 
 // Ensure the modes we might switch to dynamically are available
 import 'brace/mode/text';
@@ -83,7 +84,10 @@ function EditorOutputUI() {
   useEffect(() => {
     const editor = editorInstanceRef.current!;
     if (data) {
-      const mode = modeForContentType(data[0].response.contentType);
+      const isMultipleRequest = data.length > 1;
+      const mode = isMultipleRequest
+        ? new Mode()
+        : modeForContentType(data[0].response.contentType);
       editor.update(
         data
           .map((result) => {

src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts

@@ -9,8 +9,7 @@
 import type { HttpSetup, IHttpFetchError } from '@kbn/core/public';
 import { XJson } from '@kbn/es-ui-shared-plugin/public';
 import { extractWarningMessages } from '../../../lib/utils';
-// @ts-ignore
-import * as es from '../../../lib/es/es';
+import { send } from '../../../lib/es/es';
 import { BaseResponseType } from '../../../types';
 
 const { collapseLiteralStrings } = XJson;
@@ -72,7 +71,7 @@ export function sendRequest(args: RequestArgs): Promise<RequestResult[]> {
       const startTime = Date.now();
 
       try {
-        const { response, body } = await es.send({
+        const { response, body } = await send({
           http: args.http,
           method,
           path,
@@ -106,7 +105,7 @@ export function sendRequest(args: RequestArgs): Promise<RequestResult[]> {
             }
 
             if (isMultiRequest) {
-              value = '# ' + req.method + ' ' + req.url + '\n' + value;
+              value = `# ${req.method} ${req.url} ${response.status} ${response.statusText}\n${value}`;
             }
 
             results.push({
@@ -141,7 +140,7 @@ export function sendRequest(args: RequestArgs): Promise<RequestResult[]> {
         }
 
         if (isMultiRequest) {
-          value = '# ' + req.method + ' ' + req.url + '\n' + value;
+          value = `# ${req.method} ${req.url} ${statusCode} ${statusText}\n${value}`;
         }
 
         const result = {

src/plugins/console/public/application/models/legacy_core_editor/create_readonly.ts

@@ -8,8 +8,7 @@
 
 import _ from 'lodash';
 import ace from 'brace';
-// @ts-ignore
-import * as OutputMode from './mode/output';
+import { Mode } from './mode/output';
 import smartResize from './smart_resize';
 
 export interface CustomAceEditor extends ace.Editor {
@@ -24,7 +23,7 @@ export interface CustomAceEditor extends ace.Editor {
 export function createReadOnlyAceEditor(element: HTMLElement): CustomAceEditor {
   const output: CustomAceEditor = ace.acequire('ace/ace').edit(element);
 
-  const outputMode = new OutputMode.Mode();
+  const outputMode = new Mode();
 
   output.$blockScrolling = Infinity;
   output.resize = smartResize(output);
@@ -36,7 +35,7 @@ export function createReadOnlyAceEditor(element: HTMLElement): CustomAceEditor {
 
     const session = output.getSession();
 
-    session.setMode(val ? mode || outputMode : 'ace/mode/text');
+    session.setMode(val ? (mode as string) || (outputMode as unknown as string) : 'ace/mode/text');
     session.setValue(val);
     if (typeof cb === 'function') {
       setTimeout(cb);

src/plugins/console/public/application/models/legacy_core_editor/mode/output.js → src/plugins/console/public/application/models/legacy_core_editor/mode/output.ts

@@ -10,23 +10,24 @@ import ace from 'brace';
 
 import { OutputJsonHighlightRules } from './output_highlight_rules';
 
-const oop = ace.acequire('ace/lib/oop');
 const JSONMode = ace.acequire('ace/mode/json').Mode;
 const MatchingBraceOutdent = ace.acequire('ace/mode/matching_brace_outdent').MatchingBraceOutdent;
 const CstyleBehaviour = ace.acequire('ace/mode/behaviour/cstyle').CstyleBehaviour;
 const CStyleFoldMode = ace.acequire('ace/mode/folding/cstyle').FoldMode;
 ace.acequire('ace/worker/worker_client');
 const AceTokenizer = ace.acequire('ace/tokenizer').Tokenizer;
 
-export function Mode() {
-  this.$tokenizer = new AceTokenizer(new OutputJsonHighlightRules().getRules());
-  this.$outdent = new MatchingBraceOutdent();
-  this.$behaviour = new CstyleBehaviour();
-  this.foldingRules = new CStyleFoldMode();
+export class Mode extends JSONMode {
+  constructor() {
+    super();
+    this.$tokenizer = new AceTokenizer(new OutputJsonHighlightRules().getRules());
+    this.$outdent = new MatchingBraceOutdent();
+    this.$behaviour = new CstyleBehaviour();
+    this.foldingRules = new CStyleFoldMode();
+  }
 }
-oop.inherits(Mode, JSONMode);
 
-(function () {
+(function (this: any) {
   this.createWorker = function () {
     return null;
   };

src/plugins/console/public/application/models/legacy_core_editor/mode/output_highlight_rules.ts

@@ -0,0 +1,57 @@
+/*
+ * 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 ace from 'brace';
+import 'brace/mode/json';
+import { addXJsonToRules } from '@kbn/ace';
+
+const JsonHighlightRules = ace.acequire('ace/mode/json_highlight_rules').JsonHighlightRules;
+
+export class OutputJsonHighlightRules extends JsonHighlightRules {
+  constructor() {
+    super();
+    this.$rules = {};
+    addXJsonToRules(this, 'start');
+    this.$rules.start.unshift(
+      {
+        token: 'warning',
+        regex: '#!.*$',
+      },
+      {
+        token: 'comment',
+        regex: /#(.*?)(?=\d+\s(?:[\sA-Za-z]+)|$)/,
+      },
+      {
+        token(value: string) {
+          const regExpMatchArray = value.match(/\d+/);
+          if (regExpMatchArray) {
+            const status = parseInt(regExpMatchArray[0], 10);
+            if (status <= 199) {
+              return 'badge.badge-default';
+            }
+            if (status <= 299) {
+              return 'badge.badge-success';
+            }
+            if (status <= 399) {
+              return 'badge.badge-primary';
+            }
+            if (status <= 499) {
+              return 'badge.badge-warning';
+            }
+            return 'badge.badge-danger';
+          }
+        },
+        regex: /(\d+\s[\sA-Za-z]+$)/,
+      }
+    );
+
+    if (this instanceof OutputJsonHighlightRules) {
+      this.normalizeRules();
+    }
+  }
+}

src/plugins/console/public/styles/_app.scss

@@ -33,6 +33,47 @@
 .conApp__output {
   display: flex;
   flex: 1 1 1px;
+
+  .ace_badge {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+    padding: 0 8px;
+    display: inline-block;
+    text-decoration: none;
+    border-radius: 3px;
+    border: solid 1px transparent;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: default;
+    max-width: 100%;
+    text-align: left;
+  }
+
+  .ace_badge-success {
+    background-color: $euiColorSuccess;
+    color: chooseLightOrDarkText($euiColorSuccess);
+  }
+
+  .ace_badge-primary {
+    background-color: $euiColorPrimary;
+    color: chooseLightOrDarkText($euiColorPrimary);
+  }
+
+  .ace_badge-default {
+    background-color: $euiColorGhost;
+    color: chooseLightOrDarkText($euiColorGhost);
+  }
+
+  .ace_badge-warning {
+    background-color: $euiColorWarning;
+    color: chooseLightOrDarkText($euiColorWarning);
+  }
+
+  .ace_badge-danger {
+    background-color: $euiColorDanger;
+    color: chooseLightOrDarkText($euiColorDanger);
+  }
 }
 
 .conApp__editorContent,

test/functional/apps/console/_console.ts

@@ -122,5 +122,34 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         });
       });
     });
+
+    describe('multiple requests output', () => {
+      const sendRequests = async () => {
+        await PageObjects.console.enterRequest('\n PUT test-index');
+        await PageObjects.console.enterRequest('\n DELETE test-index');
+        await PageObjects.console.selectAllRequests();
+        await PageObjects.console.clickPlay();
+      };
+      beforeEach(async () => {
+        await PageObjects.console.clearTextArea();
+      });
+      it('should contain comments starting with # symbol', async () => {
+        await sendRequests();
+        await retry.try(async () => {
+          const response = await PageObjects.console.getResponse();
+          log.debug(response);
+          expect(response).to.contain('# PUT test-index 200 OK');
+          expect(response).to.contain('# DELETE test-index 200 OK');
+        });
+      });
+      it('should display status badges', async () => {
+        // This request should fail
+        await PageObjects.console.enterRequest('\n GET test-index');
+
+        await sendRequests();
+        await retry.waitFor('success badge', () => PageObjects.console.hasSuccessBadge());
+        await retry.waitFor('warning badge', () => PageObjects.console.hasWarningBadge());
+      });
+    });
   });
 }

test/functional/page_objects/console_page.ts

@@ -163,4 +163,28 @@ export class ConsolePageObject extends FtrService {
       return lines.length === 1 && text.trim() === '';
     });
   }
+
+  public async selectAllRequests() {
+    const editor = await this.getEditorTextArea();
+    const selectionKey = Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'];
+    await editor.pressKeys([selectionKey, 'a']);
+  }
+
+  public async hasSuccessBadge(): Promise<boolean> {
+    try {
+      const responseEditor = await this.testSubjects.find('response-editor');
+      return Boolean(responseEditor.findByCssSelector('.ace_badge-success'));
+    } catch (e) {
+      return false;
+    }
+  }
+
+  public async hasWarningBadge(): Promise<boolean> {
+    try {
+      const responseEditor = await this.testSubjects.find('response-editor');
+      return Boolean(responseEditor.findByCssSelector('.ace_badge-warning'));
+    } catch (e) {
+      return false;
+    }
+  }
 }