[Console] Progress bar

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

@@ -101,3 +101,12 @@
 .conApp__settingsModal {
   min-width: 460px;
 }
+
+.conApp__requestProgressBarContainer {
+  position: relative;
+  z-index: $euiZLevel2;
+}
+
+.conApp__tabsExtension {
+  border-bottom: $euiBorderThin;
+}

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

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

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

@@ -17,16 +17,28 @@
  * under the License.
  */
 
+import { i18n } from '@kbn/i18n';
 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;
+  requestInProgress: boolean;
+  requestResult?: {
+    // Status code of the request, e.g., 200
+    statusCode: number;
+
+    // Status text of the request, e.g., OK
+    statusText: string;
+
+    // Method of the request, e.g., GET
+    method: string;
+
+    // The path of endpoint that was called, e.g., /_search
+    endpoint: string;
+
+    // The time, in milliseconds, that the last request took
+    timeElapsedMs: number;
+  };
 }
 
 const mapStatusCodeToBadgeColor = (statusCode: number) => {
@@ -50,55 +62,72 @@ const mapStatusCodeToBadgeColor = (statusCode: number) => {
 };
 
 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}
+  requestInProgress,
+  requestResult,
+}) => {
+  let content: React.ReactNode = null;
+
+  if (requestInProgress) {
+    content = (
+      <EuiFlexItem grow={false}>
+        <EuiBadge color="hollow">
+          {i18n.translate('console.requestInProgressBadgeText', {
+            defaultMessage: 'Request in progress',
+          })}
         </EuiBadge>
-      </EuiToolTip>
-    </EuiFlexItem>
+      </EuiFlexItem>
+    );
+  } else if (requestResult) {
+    const { endpoint, method, statusCode, statusText, timeElapsedMs } = requestResult;
+
+    content = (
+      <>
+        <EuiFlexItem grow={false}>
+          <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}>
+          <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>
+      </>
+    );
+  }
 
-    <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>
-);
+  return (
+    <EuiFlexGroup
+      justifyContent="flexEnd"
+      alignItems="center"
+      direction="row"
+      gutterSize="s"
+      responsive={false}
+    >
+      {content}
+    </EuiFlexGroup>
+  );
+};

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

@@ -59,7 +59,7 @@ export const Editor = memo(({ loading }: Props) => {
   return (
     <>
       {requestInFlight ? (
-        <div style={{ position: 'relative', zIndex: 2000 }}>
+        <div className="conApp__requestProgressBarContainer">
           <EuiProgress size="xs" color="accent" position="absolute" />
         </div>
       ) : null}

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

@@ -211,14 +211,14 @@ function EditorUI({ initialTextValue }: EditorProps) {
           <EuiFlexItem>
             <EuiToolTip
               content={i18n.translate('console.sendRequestButtonTooltip', {
-                defaultMessage: 'click to send request',
+                defaultMessage: 'Click to send request',
               })}
             >
               <button
                 onClick={sendCurrentRequestToES}
                 data-test-subj="sendRequestButton"
                 aria-label={i18n.translate('console.sendRequestButtonTooltip', {
-                  defaultMessage: 'click to send request',
+                  defaultMessage: 'Click to send request',
                 })}
                 className="conApp__editorActionButton conApp__editorActionButton--success"
               >

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

@@ -19,7 +19,6 @@
 
 import React, { useEffect, useRef } from 'react';
 
-import { NetworkRequestStatusBar } from '../../../../components';
 import { createReadOnlyAceEditor, CustomAceEditor } from '../../../../models/legacy_core_editor';
 import {
   useServicesContext,
@@ -83,22 +82,8 @@ function EditorOutputUI() {
     applyCurrentSettings(editorInstanceRef.current!, readOnlySettings);
   }, [readOnlySettings]);
 
-  const lastDatum = data?.[data.length - 1] ?? error;
-
   return (
     <>
-      {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

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

@@ -24,9 +24,15 @@ import { ConsoleHistory } from '../console_history';
 import { Editor } from '../editor';
 import { Settings } from '../settings';
 
-import { TopNavMenu, WelcomePanel, HelpPanel, SomethingWentWrongCallout } from '../../components';
+import {
+  TopNavMenu,
+  WelcomePanel,
+  HelpPanel,
+  SomethingWentWrongCallout,
+  NetworkRequestStatusBar,
+} from '../../components';
 
-import { useServicesContext, useEditorReadContext } from '../../contexts';
+import { useServicesContext, useEditorReadContext, useRequestReadContext } from '../../contexts';
 import { useDataInit } from '../../hooks';
 
 import { getTopNavConfig } from './get_top_nav';
@@ -38,6 +44,11 @@ export function Main() {
 
   const { ready: editorsReady } = useEditorReadContext();
 
+  const {
+    requestInFlight: requestInProgress,
+    lastResult: { data: requestData, error: requestError },
+  } = useRequestReadContext();
+
   const [showWelcome, setShowWelcomePanel] = useState(
     () => storage.get('version_welcome_shown') !== '@@SENSE_REVISION'
   );
@@ -59,6 +70,8 @@ export function Main() {
     );
   }
 
+  const lastDatum = requestData?.[requestData.length - 1] ?? requestError;
+
   return (
     <div id="consoleRoot">
       <EuiFlexGroup
@@ -75,14 +88,34 @@ export function Main() {
               })}
             </h1>
           </EuiTitle>
-          <TopNavMenu
-            disabled={!done}
-            items={getTopNavConfig({
-              onClickHistory: () => setShowHistory(!showingHistory),
-              onClickSettings: () => setShowSettings(true),
-              onClickHelp: () => setShowHelp(!showHelp),
-            })}
-          />
+          <EuiFlexGroup gutterSize="none">
+            <EuiFlexItem>
+              <TopNavMenu
+                disabled={!done}
+                items={getTopNavConfig({
+                  onClickHistory: () => setShowHistory(!showingHistory),
+                  onClickSettings: () => setShowSettings(true),
+                  onClickHelp: () => setShowHelp(!showHelp),
+                })}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false} className="conApp__tabsExtension">
+              <NetworkRequestStatusBar
+                requestInProgress={requestInProgress}
+                requestResult={
+                  lastDatum
+                    ? {
+                        method: lastDatum.request.method.toUpperCase(),
+                        endpoint: lastDatum.request.path,
+                        statusCode: lastDatum.response.statusCode,
+                        statusText: lastDatum.response.statusText,
+                        timeElapsedMs: lastDatum.response.timeMs,
+                      }
+                    : undefined
+                }
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFlexItem>
         {showingHistory ? <EuiFlexItem grow={false}>{renderConsoleHistory()}</EuiFlexItem> : null}
         <EuiFlexItem>

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

@@ -19,7 +19,7 @@
 import { i18n } from '@kbn/i18n';
 import { useCallback } from 'react';
 import { instance as registry } from '../../contexts/editor_context/editor_registry';
-import { useRequestActionContext, useServicesContext, useRequestReadContext } from '../../contexts';
+import { useRequestActionContext, useServicesContext } from '../../contexts';
 import { sendRequestToES } from './send_request_to_es';
 import { track } from './track';
 
@@ -31,44 +31,24 @@ export const useSendCurrentRequestToES = () => {
     services: { history, settings, notifications, trackUiMetric },
   } = useServicesContext();
 
-  const { requestInFlight } = useRequestReadContext();
   const dispatch = useRequestActionContext();
 
   return useCallback(async () => {
-    if (requestInFlight) {
-      notifications.toasts.addWarning({
-        title: i18n.translate('console.requestAlreadyInFlightTitle', {
-          defaultMessage: 'Cannot send request right now.',
-        }),
-        toastLifeTimeMs: 3000,
-      });
-      return;
-    }
-    dispatch({ type: 'sendRequest', payload: undefined });
     try {
       const editor = registry.getInputEditor();
       const requests = await editor.getRequestsInRange();
       if (!requests.length) {
-        dispatch({
-          type: 'requestFail',
-          payload: {
-            response: {
-              value: 'No requests in range',
-              contentType: 'text/plain',
-              statusCode: 0,
-              statusText: 'None',
-              timeMs: 0,
-            },
-            request: {
-              data: null,
-              method: '',
-              path: '',
-            },
-          },
-        });
+        notifications.toasts.add(
+          i18n.translate('console.notification.noReqeustSelectedTitle', {
+            defaultMessage:
+              'It looks like your cursor is not on a request. Please select a request by placing your cursor on it.',
+          })
+        );
         return;
       }
 
+      dispatch({ type: 'sendRequest', payload: undefined });
+
       // Fire and forget
       setTimeout(() => track(requests, editor, trackUiMetric), 0);
 
@@ -101,11 +81,11 @@ export const useSendCurrentRequestToES = () => {
         });
       } else {
         notifications.toasts.addError(e, {
-          title: i18n.translate('console.unknownRequestErrorTitle', {
+          title: i18n.translate('console.notification.unknownRequestErrorTitle', {
             defaultMessage: 'Unknown Request Error',
           }),
         });
       }
     }
-  }, [dispatch, settings, history, notifications, trackUiMetric, requestInFlight]);
+  }, [dispatch, settings, history, notifications, trackUiMetric]);
 };