[Console Monaco migration] Implement history

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

@@ -23,6 +23,7 @@ import {
 
 import { useServicesContext } from '../../contexts';
 import { HistoryViewer } from './history_viewer';
+import { HistoryViewer as HistoryViewerMonaco } from './history_viewer_monaco';
 import { useEditorReadContext } from '../../contexts/editor_context';
 import { useRestoreRequestFromHistory } from '../../hooks';
 
@@ -35,6 +36,7 @@ const CHILD_ELEMENT_PREFIX = 'historyReq';
 export function ConsoleHistory({ close }: Props) {
   const {
     services: { history },
+    config: { isMonacoEnabled },
   } = useServicesContext();
 
   const { settings: readOnlySettings } = useEditorReadContext();
@@ -91,7 +93,7 @@ export function ConsoleHistory({ close }: Props) {
     initialize();
   };
 
-  const restoreRequestFromHistory = useRestoreRequestFromHistory();
+  const restoreRequestFromHistory = useRestoreRequestFromHistory(isMonacoEnabled);
 
   useEffect(() => {
     initialize();
@@ -181,7 +183,11 @@ export function ConsoleHistory({ close }: Props) {
 
           <div className="conHistory__body__spacer" />
 
-          <HistoryViewer settings={readOnlySettings} req={viewingReq} />
+          {isMonacoEnabled ? (
+            <HistoryViewerMonaco settings={readOnlySettings} req={viewingReq} />
+          ) : (
+            <HistoryViewer settings={readOnlySettings} req={viewingReq} />
+          )}
         </div>
 
         <EuiSpacer size="s" />

src/plugins/console/public/application/containers/console_history/history_viewer_monaco.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 React, { useCallback, useRef } from 'react';
+import { css } from '@emotion/react';
+import { CONSOLE_LANG_ID, CONSOLE_THEME_ID, monaco } from '@kbn/monaco';
+import { CodeEditor } from '@kbn/code-editor';
+import { i18n } from '@kbn/i18n';
+import { formatRequestBodyDoc } from '../../../lib/utils';
+import { DevToolsSettings } from '../../../services';
+import { useResizeCheckerUtils } from '../editor/monaco/hooks';
+
+export const HistoryViewer = ({
+  settings,
+  req,
+}: {
+  settings: DevToolsSettings;
+  req: { method: string; endpoint: string; data: string; time: string } | null;
+}) => {
+  const divRef = useRef<HTMLDivElement | null>(null);
+  const { setupResizeChecker, destroyResizeChecker } = useResizeCheckerUtils();
+
+  const editorDidMountCallback = useCallback(
+    (editor: monaco.editor.IStandaloneCodeEditor) => {
+      setupResizeChecker(divRef.current!, editor);
+    },
+    [setupResizeChecker]
+  );
+
+  const editorWillUnmountCallback = useCallback(() => {
+    destroyResizeChecker();
+  }, [destroyResizeChecker]);
+  let renderedHistoryRequest: string;
+  if (req) {
+    const indent = true;
+    const formattedData = req.data ? formatRequestBodyDoc([req.data], indent).data : '';
+    renderedHistoryRequest = req.method + ' ' + req.endpoint + '\n' + formattedData;
+  } else {
+    renderedHistoryRequest = i18n.translate('console.historyPage.noHistoryTextMessage', {
+      defaultMessage: 'No history available',
+    });
+  }
+  return (
+    <div
+      css={css`
+        width: 100%;
+      `}
+      ref={divRef}
+    >
+      <CodeEditor
+        languageId={CONSOLE_LANG_ID}
+        value={renderedHistoryRequest}
+        fullWidth={true}
+        editorDidMount={editorDidMountCallback}
+        editorWillUnmount={editorWillUnmountCallback}
+        options={{
+          readOnly: true,
+          fontSize: settings.fontSize,
+          wordWrap: settings.wrapMode ? 'on' : 'off',
+          theme: CONSOLE_THEME_ID,
+          automaticLayout: true,
+        }}
+      />
+    </div>
+  );
+};

src/plugins/console/public/application/containers/editor/monaco/hooks/use_set_initial_value.ts

@@ -30,6 +30,7 @@ interface SetInitialValueParams {
 /**
  * Util function for reading the load_from parameter from the current url.
  */
+
 export const readLoadFromParam = () => {
   const [, queryString] = (window.location.hash || window.location.search || '').split('?');
 

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

@@ -12,6 +12,7 @@ import { css } from '@emotion/react';
 import { CodeEditor } from '@kbn/code-editor';
 import { CONSOLE_LANG_ID, CONSOLE_THEME_ID, monaco } from '@kbn/monaco';
 import { i18n } from '@kbn/i18n';
+import { useSetInputEditor } from '../../../hooks';
 import { ConsoleMenu } from '../../../components';
 import {
   useServicesContext,
@@ -32,17 +33,11 @@ export interface EditorProps {
 }
 
 export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
+  const context = useServicesContext();
   const {
-    services: {
-      notifications,
-      esHostService,
-      trackUiMetric,
-      http,
-      settings: settingsService,
-      autocompleteInfo,
-    },
+    services: { notifications, esHostService, settings: settingsService, autocompleteInfo },
     docLinkVersion,
-  } = useServicesContext();
+  } = context;
   const { toasts } = notifications;
   const { settings } = useEditorReadContext();
 
@@ -53,12 +48,15 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
   const actionsProvider = useRef<MonacoEditorActionsProvider | null>(null);
   const [editorActionsCss, setEditorActionsCss] = useState<CSSProperties>({});
 
+  const setInputEditor = useSetInputEditor();
   const editorDidMountCallback = useCallback(
     (editor: monaco.editor.IStandaloneCodeEditor) => {
-      actionsProvider.current = new MonacoEditorActionsProvider(editor, setEditorActionsCss);
+      const provider = new MonacoEditorActionsProvider(editor, setEditorActionsCss);
+      actionsProvider.current = provider;
       setupResizeChecker(divRef.current!, editor);
+      setInputEditor(provider);
     },
-    [setupResizeChecker]
+    [setInputEditor, setupResizeChecker]
   );
 
   const editorWillUnmountCallback = useCallback(() => {
@@ -79,8 +77,8 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
   }, []);
 
   const sendRequestsCallback = useCallback(async () => {
-    await actionsProvider.current?.sendRequests(toasts, dispatch, trackUiMetric, http);
-  }, [dispatch, http, toasts, trackUiMetric]);
+    await actionsProvider.current?.sendRequests(dispatch, context);
+  }, [dispatch, context]);
 
   const suggestionProvider = useMemo(() => {
     return getSuggestionProvider(actionsProvider);

src/plugins/console/public/application/containers/editor/monaco/monaco_editor_actions_provider.ts

@@ -9,13 +9,12 @@
 import { CSSProperties, Dispatch } from 'react';
 import { debounce } from 'lodash';
 import { ConsoleParsedRequestsProvider, getParsedRequestsProvider, monaco } from '@kbn/monaco';
-import { IToasts } from '@kbn/core-notifications-browser';
 import { i18n } from '@kbn/i18n';
-import type { HttpSetup } from '@kbn/core-http-browser';
+import { toMountPoint } from '@kbn/react-kibana-mount';
+import { isQuotaExceededError } from '../../../../services/history';
 import { DEFAULT_VARIABLES } from '../../../../../common/constants';
 import { getStorage, StorageKeys } from '../../../../services';
 import { sendRequest } from '../../../hooks';
-import { MetricsTracker } from '../../../../types';
 import { Actions } from '../../../stores/request';
 
 import {
@@ -38,6 +37,8 @@ import {
 } from './utils';
 
 import type { AdjustedParsedRequest } from './types';
+import { StorageQuotaError } from '../../../components/storage_quota_error';
+import { ContextValue } from '../../../contexts';
 
 const AUTO_INDENTATION_ACTION_LABEL = 'Apply indentations';
 
@@ -180,12 +181,12 @@ export class MonacoEditorActionsProvider {
     return curlRequests.join('\n');
   }
 
-  public async sendRequests(
-    toasts: IToasts,
-    dispatch: Dispatch<Actions>,
-    trackUiMetric: MetricsTracker,
-    http: HttpSetup
-  ): Promise<void> {
+  public async sendRequests(dispatch: Dispatch<Actions>, context: ContextValue): Promise<void> {
+    const {
+      services: { notifications, trackUiMetric, http, settings, history, autocompleteInfo },
+      startServices,
+    } = context;
+    const { toasts } = notifications;
     try {
       const requests = await this.getRequests();
       if (!requests.length) {
@@ -205,8 +206,63 @@ export class MonacoEditorActionsProvider {
 
       const results = await sendRequest({ http, requests });
 
-      // TODO save to history
-      // TODO restart autocomplete polling
+      let saveToHistoryError: undefined | Error;
+      const isHistoryEnabled = settings.getIsHistoryEnabled();
+
+      if (isHistoryEnabled) {
+        results.forEach(({ request: { path, method, data } }) => {
+          try {
+            history.addToHistory(path, method, data);
+          } catch (e) {
+            // Grab only the first error
+            if (!saveToHistoryError) {
+              saveToHistoryError = e;
+            }
+          }
+        });
+
+        if (saveToHistoryError) {
+          const errorTitle = i18n.translate('console.notification.error.couldNotSaveRequestTitle', {
+            defaultMessage: 'Could not save request to Console history.',
+          });
+          if (isQuotaExceededError(saveToHistoryError)) {
+            const toast = notifications.toasts.addWarning({
+              title: i18n.translate('console.notification.error.historyQuotaReachedMessage', {
+                defaultMessage:
+                  'Request history is full. Clear the console history or disable saving new requests.',
+              }),
+              text: toMountPoint(
+                StorageQuotaError({
+                  onClearHistory: () => {
+                    history.clearHistory();
+                    notifications.toasts.remove(toast);
+                  },
+                  onDisableSavingToHistory: () => {
+                    settings.setIsHistoryEnabled(false);
+                    notifications.toasts.remove(toast);
+                  },
+                }),
+                startServices
+              ),
+            });
+          } else {
+            // Best effort, but still notify the user.
+            notifications.toasts.addError(saveToHistoryError, {
+              title: errorTitle,
+            });
+          }
+        }
+      }
+
+      const polling = settings.getPolling();
+      if (polling) {
+        // If the user has submitted a request against ES, something in the fields, indices, aliases,
+        // or templates may have changed, so we'll need to update this data. Assume that if
+        // the user disables polling they're trying to optimize performance or otherwise
+        // preserve resources, so they won't want this request sent either.
+        autocompleteInfo.retrieve(settings, settings.getAutocomplete());
+      }
+
       dispatch({
         type: 'requestSuccess',
         payload: {
@@ -347,6 +403,61 @@ export class MonacoEditorActionsProvider {
     return this.getSuggestions(model, position, context);
   }
 
+  /*
+   * This function inserts a request from the history into the editor
+   */
+  public async restoreRequestFromHistory(request: string) {
+    const model = this.editor.getModel();
+    if (!model) {
+      return;
+    }
+    let position = this.editor.getPosition() as monaco.IPosition;
+    const requests = await this.getSelectedParsedRequests();
+    // if there are requests at the cursor/selection, insert either before or after
+    if (requests.length > 0) {
+      // if on the 1st line of the 1st request, insert before
+      if (position && position.lineNumber === requests[0].startLineNumber) {
+        position = { column: 1, lineNumber: position.lineNumber < 2 ? 1 : position.lineNumber - 1 };
+      } else {
+        // otherwise insert after
+        position = { column: 1, lineNumber: requests[requests.length - 1].endLineNumber + 1 };
+      }
+    } else {
+      // if not inside a request, insert the request at the cursor position
+      if (!position) {
+        // if no cursor position, insert at the beginning
+        position = { lineNumber: 1, column: 1 };
+      }
+    }
+    // add new lines around the request inserted from history
+    let prefix = '\n';
+    let suffix = '\n';
+    // check the text before the inserted request: content on the line above or empty
+    const textBefore = position.lineNumber > 1 ? model.getLineContent(position.lineNumber - 1) : '';
+    if (!textBefore) {
+      // if there is no text before, don't insert a new line before the request
+      prefix = '';
+    }
+    // check the text after the inserted request
+    const textAfter =
+      position.lineNumber <= model.getLineCount() ? model.getLineContent(position.lineNumber) : '';
+    if (!textAfter) {
+      // if there is no text after, don't insert a new line after the request
+      suffix = '';
+    }
+    const edit: monaco.editor.IIdentifiedSingleEditOperation = {
+      range: {
+        startLineNumber: position.lineNumber,
+        startColumn: position.column,
+        endLineNumber: position.lineNumber,
+        endColumn: position.column,
+      },
+      text: prefix + request + suffix,
+      forceMoveMarkers: true,
+    };
+    this.editor.executeEdits('restoreFromHistory', [edit]);
+  }
+
   /*
   This function returns the text in the provided range.
   If no range is provided, it returns all text in the editor.

src/plugins/console/public/application/containers/editor/monaco/utils/autocomplete_utils.ts

@@ -308,7 +308,6 @@ const getInsertText = (
     } else {
       templateLines = JSON.stringify(template, null, 2).split(newLineRegex);
     }
-    // TODO add correct indentation
     insertText += ': ' + templateLines.join('\n');
   } else if (value === '{') {
     insertText += '{}';

src/plugins/console/public/application/contexts/editor_context/editor_registry.ts

@@ -6,12 +6,13 @@
  * Side Public License, v 1.
  */
 
+import { MonacoEditorActionsProvider } from '../../containers/editor/monaco/monaco_editor_actions_provider';
 import { SenseEditor } from '../../models/sense_editor';
 
 export class EditorRegistry {
-  private inputEditor: SenseEditor | undefined;
+  private inputEditor: SenseEditor | MonacoEditorActionsProvider | undefined;
 
-  setInputEditor(inputEditor: SenseEditor) {
+  setInputEditor(inputEditor: SenseEditor | MonacoEditorActionsProvider) {
     this.inputEditor = inputEditor;
   }
 

src/plugins/console/public/application/contexts/services_context.tsx

@@ -30,7 +30,7 @@ export interface ContextValue {
   services: ContextServices;
   docLinkVersion: string;
   docLinks: DocLinksStart['links'];
-  config?: {
+  config: {
     isMonacoEnabled: boolean;
   };
   startServices: ConsoleStartServices;