[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;