[SearchProfiler] Parse triple quotes JSON in SearchProfiler editor (e…

…lastic#41282)

* Initial pass at introducing XJsonWorker for searchprofiler app:

- Added some copy pasted logic from console (json rules)
- Copied and modified brace's json worker/parser. Added the ability to take """
- Updated existing controller and logic to work with new files

* Added comment

* Fixed type worker.js type issue
Added some more clarifying comments

* semi-colon

* Brought OO inheritance more in line with what ace expects (no `class`)
Added tests

* Clarify ts module declaration for raw loaded worker.js file

* Minor refactor

* Added comment

* Added safe apply mechanism to notify ng about changes to editor content

x-pack/legacy/plugins/searchprofiler/public/app.js

@@ -17,6 +17,7 @@ import { formatAngularHttpError } from 'ui/notify/lib';
 import { xpackInfo } from 'plugins/xpack_main/services/xpack_info';
 
 // Our imports
+import $ from 'jquery';
 import _ from 'lodash';
 import 'ace';
 import 'angular-ui-ace';
@@ -26,6 +27,7 @@ import { Range } from './range';
 import { nsToPretty } from 'plugins/searchprofiler/filters/ns_to_pretty';
 import { msToPretty } from 'plugins/searchprofiler/filters/ms_to_pretty';
 import { checkForParseErrors } from 'plugins/searchprofiler/app_util.js';
+import { initializeEditor } from 'plugins/searchprofiler/editor';
 
 // Styles and templates
 import 'ui/autoload/all';
@@ -61,12 +63,13 @@ uiModules
     return service;
   });
 
-function profileVizController($scope, $http, HighlightService) {
+function profileVizController($scope, $timeout, $http, HighlightService) {
   $scope.title = 'Search Profile';
   $scope.description = 'Search profiling and visualization';
   $scope.profileResponse = [];
   $scope.highlight = HighlightService;
   $scope.index = '_all';
+  $scope.query = '';
 
   // TODO this map controls which tab is active, but due to how
   // the tab directive works, we cannot use a single variable to hold the state.
@@ -76,28 +79,33 @@ function profileVizController($scope, $http, HighlightService) {
     search: true
   };
   $scope.markers = [];
-  $scope.query = defaultQuery;
   $scope.licenseEnabled = xpackInfo.get('features.searchprofiler.enableAppLink');
 
-  $scope.aceLoaded = (_editor) => {
-    $scope.ace = _editor;
-    $scope.ace.$blockScrolling = Infinity;
-    $scope.ace.setReadOnly(!$scope.licenseEnabled);
-    if (!$scope.licenseEnabled) {
-      $scope.ace.container.style.pointerEvents = 'none';
-      $scope.ace.container.style.opacity = 0.5;
-      $scope.ace.renderer.setStyle('disabled', true);
-      $scope.ace.blur();
-    }
-  };
+
+  const editor = initializeEditor({
+    el: $('#SearchProfilerInput')[0],
+    licenseEnabled: $scope.licenseEnabled,
+  });
+
+  editor.on('change', () => {
+    // Do a safe apply/trigger digest
+    $timeout(() => {
+      $scope.query = editor.getValue();
+    });
+  });
+
+  editor.setValue(defaultQuery, 1);
+
+  $scope.hasQuery = () => Boolean($scope.query);
 
   $scope.profile = () => {
+    const  { query } = $scope;
     if (!$scope.licenseEnabled) {
       return;
     }
     // Reset right detail panel
     $scope.resetHighlightPanel();
-    let json = checkForParseErrors($scope.query);
+    let json = checkForParseErrors(query);
     if (json.status === false) {
       toastNotifications.addError(json.error, {
         title: i18n.translate('xpack.searchProfiler.errorToastTitle', {
@@ -114,9 +122,7 @@ function profileVizController($scope, $http, HighlightService) {
       $scope.renderProfile(json.profile.shards);
     } else {
       // Otherwise it's (probably) a regular search, execute remotely
-      const requestBody = {
-        query: $scope.query
-      };
+      const requestBody = { query };
       if ($scope.index == null || $scope.index === '') {
         requestBody.index = '_all';
       } else {

x-pack/legacy/plugins/searchprofiler/public/editor/index.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import ace from 'brace';
+import { installXJsonMode } from './x_json_mode';
+
+export function initializeEditor({
+  el,
+  licenseEnabled,
+  initialContent,
+}: {
+  el: HTMLDivElement;
+  licenseEnabled: boolean;
+  initialContent: string;
+}) {
+  const editor: ace.Editor = ace.acequire('ace/ace').edit(el);
+
+  installXJsonMode(editor);
+  editor.$blockScrolling = Infinity;
+
+  if (!licenseEnabled) {
+    editor.setReadOnly(true);
+    editor.container.style.pointerEvents = 'none';
+    editor.container.style.opacity = '0.5';
+    editor.renderer.setStyle('disabled');
+    editor.blur();
+  }
+
+  return editor;
+}

x-pack/legacy/plugins/searchprofiler/public/editor/worker/index.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import src from '!!raw-loader!./worker.js';
+
+export const workerModule = {
+  id: 'ace/mode/json_worker',
+  src,
+};

x-pack/legacy/plugins/searchprofiler/public/editor/worker/worker.d.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// Satisfy TS's requirements that the module be declared per './index.ts'.
+declare module '!!raw-loader!./worker.js' {
+  const content: string;
+  // eslint-disable-next-line import/no-default-export
+  export default content;
+}