[Console] Progress bar

src/legacy/core_plugins/console_legacy/public/styles/_app.scss

@@ -48,6 +48,7 @@
   button {
     line-height: inherit;
   }
+
   position: absolute;
   z-index: $euiZLevel1;
   top: 0;
@@ -75,6 +76,17 @@
   z-index: $euiZLevel1;
 }
 
+.conApp__networkRequestContainer {
+  position: absolute;
+  min-width: 200px;
+  width: 100%;
+
+  height: 30px;
+  top: -30px;
+
+  right: 0;
+}
+
 // SASSTODO: This component seems to not be used anymore?
 // Possibly replaced by the Ace version
 .conApp__autoComplete {

src/legacy/core_plugins/console_legacy/public/styles/components/_index.scss

@@ -1,2 +1,3 @@
 @import 'help';
 @import 'history';
+@import 'network_request_status_bar'

src/legacy/core_plugins/console_legacy/public/styles/components/_network_request_status_bar.scss

@@ -0,0 +1,5 @@
+.conApp__outputNetworkRequestStatusBar {
+  &__item {
+    padding: 0 10px;
+  }
+}

src/plugins/console/public/application/components/index.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+export { NetworkRequestStatusBar } from './network_request_status_bar';
 export { SomethingWentWrongCallout } from './something_went_wrong_callout';
 export { TopNavMenuItem, TopNavMenu } from './top_nav_menu';
 export { ConsoleMenu } from './console_menu';

src/plugins/console/public/application/components/network_request_status_bar/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { NetworkRequestStatusBar } from './network_request_status_bar';

src/plugins/console/public/application/components/network_request_status_bar/network_request_status_bar.tsx

@@ -0,0 +1,104 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { FunctionComponent } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiText, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export interface Props {
+  statusCode: number;
+  statusText: string;
+  method: string;
+  endpoint: string;
+  timeElapsedMs: number;
+}
+
+const mapStatusCodeToBadgeColor = (statusCode: number) => {
+  if (statusCode <= 199) {
+    return 'default';
+  }
+
+  if (statusCode <= 299) {
+    return 'secondary';
+  }
+
+  if (statusCode <= 399) {
+    return 'primary';
+  }
+
+  if (statusCode <= 499) {
+    return 'warning';
+  }
+
+  return 'danger';
+};
+
+export const NetworkRequestStatusBar: FunctionComponent<Props> = ({
+  endpoint,
+  statusCode,
+  statusText,
+  timeElapsedMs,
+  method,
+}) => (
+  <EuiFlexGroup
+    justifyContent="flexEnd"
+    alignItems="center"
+    direction="row"
+    gutterSize="none"
+    responsive={false}
+  >
+    <EuiFlexItem
+      grow={false}
+      className="conApp__outputNetworkRequestStatusBar__item conApp__outputNetworkRequestStatusBar__badge"
+    >
+      <EuiToolTip
+        position="top"
+        content={
+          <EuiText size="s">{`${method} ${
+            endpoint.startsWith('/') ? endpoint : '/' + endpoint
+          }`}</EuiText>
+        }
+      >
+        <EuiBadge color={mapStatusCodeToBadgeColor(statusCode)}>
+          {/*  Use &nbsp; to ensure that no matter the width we don't allow line breaks */}
+          {statusCode}&nbsp;-&nbsp;{statusText}
+        </EuiBadge>
+      </EuiToolTip>
+    </EuiFlexItem>
+
+    <EuiFlexItem grow={false} className="conApp__outputNetworkRequestStatusBar__item">
+      <EuiToolTip
+        position="top"
+        content={
+          <EuiText size="s">
+            {i18n.translate('console.requestTimeElapasedBadgeTooltipContent', {
+              defaultMessage: 'Time Elapsed',
+            })}
+          </EuiText>
+        }
+      >
+        <EuiText size="s">
+          <EuiBadge color="default">
+            {timeElapsedMs}&nbsp;{'ms'}
+          </EuiBadge>
+        </EuiText>
+      </EuiToolTip>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

src/plugins/console/public/application/containers/editor/editor.tsx

@@ -17,14 +17,15 @@
  * under the License.
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, memo } from 'react';
 import { debounce } from 'lodash';
+import { EuiProgress } from '@elastic/eui';
 
 import { EditorContentSpinner } from '../../components';
 import { Panel, PanelsContainer } from '../../../../../kibana_react/public';
 import { Editor as EditorUI, EditorOutput } from './legacy/console_editor';
 import { StorageKeys } from '../../../services';
-import { useEditorReadContext, useServicesContext } from '../../contexts';
+import { useEditorReadContext, useServicesContext, useRequestReadContext } from '../../contexts';
 
 const INITIAL_PANEL_WIDTH = 50;
 const PANEL_MIN_WIDTH = '100px';
@@ -33,12 +34,13 @@ interface Props {
   loading: boolean;
 }
 
-export const Editor = ({ loading }: Props) => {
+export const Editor = memo(({ loading }: Props) => {
   const {
     services: { storage },
   } = useServicesContext();
 
   const { currentTextObject } = useEditorReadContext();
+  const { requestInFlight } = useRequestReadContext();
 
   const [firstPanelWidth, secondPanelWidth] = storage.get(StorageKeys.WIDTH, [
     INITIAL_PANEL_WIDTH,
@@ -55,23 +57,30 @@ export const Editor = ({ loading }: Props) => {
   if (!currentTextObject) return null;
 
   return (
-    <PanelsContainer onPanelWidthChange={onPanelWidthChange} resizerClassName="conApp__resizer">
-      <Panel
-        style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
-        initialWidth={firstPanelWidth}
-      >
-        {loading ? (
-          <EditorContentSpinner />
-        ) : (
-          <EditorUI initialTextValue={currentTextObject.text} />
-        )}
-      </Panel>
-      <Panel
-        style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
-        initialWidth={secondPanelWidth}
-      >
-        {loading ? <EditorContentSpinner /> : <EditorOutput />}
-      </Panel>
-    </PanelsContainer>
+    <>
+      {requestInFlight ? (
+        <div style={{ position: 'relative', zIndex: 2000 }}>
+          <EuiProgress size="xs" color="accent" position="absolute" />
+        </div>
+      ) : null}
+      <PanelsContainer onPanelWidthChange={onPanelWidthChange} resizerClassName="conApp__resizer">
+        <Panel
+          style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
+          initialWidth={firstPanelWidth}
+        >
+          {loading ? (
+            <EditorContentSpinner />
+          ) : (
+            <EditorUI initialTextValue={currentTextObject.text} />
+          )}
+        </Panel>
+        <Panel
+          style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
+          initialWidth={secondPanelWidth}
+        >
+          {loading ? <EditorContentSpinner /> : <EditorOutput />}
+        </Panel>
+      </PanelsContainer>
+    </>
   );
-};
+});

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

@@ -18,6 +18,8 @@
  */
 
 import React, { useEffect, useRef } from 'react';
+
+import { NetworkRequestStatusBar } from '../../../../components';
 import { createReadOnlyAceEditor, CustomAceEditor } from '../../../../models/legacy_core_editor';
 import {
   useServicesContext,
@@ -70,8 +72,8 @@ function EditorOutputUI() {
           .join('\n')
       );
     } else if (error) {
-      editor.session.setMode(modeForContentType(error.contentType));
-      editor.update(error.value);
+      editor.session.setMode(modeForContentType(error.response.contentType));
+      editor.update(error.response.value as string);
     } else {
       editor.update('');
     }
@@ -81,17 +83,33 @@ function EditorOutputUI() {
     applyCurrentSettings(editorInstanceRef.current!, readOnlySettings);
   }, [readOnlySettings]);
 
+  const lastDatum = data?.[data.length - 1] ?? error;
+
   return (
-    <div ref={editorRef} className="conApp__output" data-test-subj="response-editor">
-      {/* Axe complains about Ace's textarea element missing a label, which interferes with our
+    <>
+      {lastDatum ? (
+        <div className="conApp__networkRequestContainer">
+          <NetworkRequestStatusBar
+            method={lastDatum.request.method.toUpperCase()}
+            endpoint={lastDatum.request.path}
+            statusCode={lastDatum.response.statusCode}
+            statusText={lastDatum.response.statusText}
+            timeElapsedMs={lastDatum.response.timeMs}
+          />
+        </div>
+      ) : null}
+
+      <div ref={editorRef} className="conApp__output" data-test-subj="response-editor">
+        {/* Axe complains about Ace's textarea element missing a label, which interferes with our
       automated a11y tests per #52136. This wrapper does nothing to address a11y but it does
       satisfy Axe. */}
 
-      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-      <label className="conApp__textAreaLabelHack">
-        <div className="conApp__outputContent" id="ConAppOutput" />
-      </label>
-    </div>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label className="conApp__textAreaLabelHack">
+          <div className="conApp__outputContent" id="ConAppOutput" />
+        </label>
+      </div>
+    </>
   );
 }
 

src/plugins/console/public/application/hooks/use_send_current_request_to_es/send_request_to_es.ts

@@ -26,16 +26,23 @@ export interface EsRequestArgs {
   requests: any;
 }
 
-export interface ESRequestResult {
-  request: {
-    path: string;
-    data: any;
-    method: string;
-  };
-  response: {
-    contentType: BaseResponseType;
-    value: unknown;
-  };
+export interface ESRequestObject {
+  path: string;
+  data: any;
+  method: string;
+}
+
+export interface ESResponseObject<V = unknown> {
+  statusCode: number;
+  statusText: string;
+  timeMs: number;
+  contentType: BaseResponseType;
+  value: V;
+}
+
+export interface ESRequestResult<V = unknown> {
+  request: ESRequestObject;
+  response: ESResponseObject<V>;
 }
 
 let CURRENT_REQ_ID = 0;
@@ -71,6 +78,7 @@ export function sendRequestToES(args: EsRequestArgs): Promise<ESRequestResult[]>
         esData += '\n';
       } // append a new line for bulk requests.
 
+      const startTime = Date.now();
       es.send(esMethod, esPath, esData).always(
         (dataOrjqXHR: any, textStatus: string, jqXhrORerrorThrown: any) => {
           if (reqId !== CURRENT_REQ_ID) {
@@ -99,6 +107,9 @@ export function sendRequestToES(args: EsRequestArgs): Promise<ESRequestResult[]>
 
             results.push({
               response: {
+                timeMs: Date.now() - startTime,
+                statusCode: xhr.status,
+                statusText: xhr.statusText,
                 contentType: xhr.getResponseHeader('Content-Type'),
                 value,
               },
@@ -124,7 +135,20 @@ export function sendRequestToES(args: EsRequestArgs): Promise<ESRequestResult[]>
             if (isMultiRequest) {
               value = '# ' + req.method + ' ' + req.url + '\n' + value;
             }
-            reject({ value, contentType });
+            reject({
+              response: {
+                value,
+                contentType,
+                timeMs: Date.now() - startTime,
+                statusCode: xhr.status,
+                statusText: xhr.statusText,
+              },
+              request: {
+                data: esData,
+                method: esMethod,
+                path: esPath,
+              },
+            });
           }
         }
       );