[APM] Migrate Ace based EuiCodeEditor to Monaco based Code Editor

x-pack/plugins/apm/kibana.jsonc

@@ -58,7 +58,6 @@
       "kibanaUtils",
       "ml",
       "observability",
-      "esUiShared",
       "maps",
       "observabilityAIAssistant"
     ]

x-pack/plugins/apm/public/components/app/trace_explorer/index.tsx

@@ -78,7 +78,7 @@ export function TraceExplorer({ children }: { children: React.ReactElement }) {
       <EuiFlexGroup direction="column" gutterSize="s">
         <EuiFlexItem grow={false}>
           <EuiFlexGroup direction="row">
-            <EuiFlexItem grow>
+            <EuiFlexItem grow={2}>
               <TraceSearchBox
                 query={searchQuery}
                 error={false}
@@ -96,7 +96,7 @@ export function TraceExplorer({ children }: { children: React.ReactElement }) {
                 }}
               />
             </EuiFlexItem>
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem grow={2}>
               <ApmDatePicker />
             </EuiFlexItem>
           </EuiFlexGroup>

x-pack/plugins/apm/public/components/app/trace_explorer/trace_search_box/index.tsx

@@ -9,7 +9,6 @@ import {
   EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiText,
   EuiSelect,
   EuiSelectOption,
 } from '@elastic/eui';
@@ -23,12 +22,11 @@ import {
 } from '../../../../../common/trace_explorer';
 import { useApmDataView } from '../../../../hooks/use_apm_data_view';
 import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
-import { EQLCodeEditorSuggestionType } from '../../../shared/eql_code_editor/constants';
-import { LazilyLoadedEQLCodeEditor } from '../../../shared/eql_code_editor/lazily_loaded_code_editor';
+
+import { EQLCodeEditor } from '../../../shared/monaco_code_editor';
 
 interface Props {
   query: TraceSearchQuery;
-  message?: string;
   error: boolean;
   onQueryChange: (query: TraceSearchQuery) => void;
   onQueryCommit: () => void;
@@ -54,8 +52,6 @@ export function TraceSearchBox({
   query,
   onQueryChange,
   onQueryCommit,
-  message,
-  error,
   loading,
 }: Props) {
   const { unifiedSearch, core, data, dataViews } = useApmPluginContext();
@@ -67,57 +63,21 @@ export function TraceSearchBox({
   const { dataView } = useApmDataView();
 
   return (
-    <EuiFlexGroup direction="column">
+    <EuiFlexGroup direction="row">
       <EuiFlexItem>
         <EuiFlexGroup direction="column" gutterSize="s">
           <EuiFlexItem>
             <EuiFlexGroup direction="row" gutterSize="s">
               <EuiFlexItem grow>
                 {query.type === TraceSearchType.eql ? (
-                  <LazilyLoadedEQLCodeEditor
+                  <EQLCodeEditor
                     value={query.query}
-                    onChange={(value) => {
+                    onChange={(value: string) => {
                       onQueryChange({
                         ...query,
                         query: value,
                       });
                     }}
-                    onBlur={() => {
-                      onQueryCommit();
-                    }}
-                    getSuggestions={async (request) => {
-                      switch (request.type) {
-                        case EQLCodeEditorSuggestionType.EventType:
-                          return ['transaction', 'span', 'error'];
-
-                        case EQLCodeEditorSuggestionType.Field:
-                          return (
-                            dataView?.fields.map((field) => field.name) ?? []
-                          );
-
-                        case EQLCodeEditorSuggestionType.Value:
-                          const field = dataView?.getFieldByName(request.field);
-
-                          if (!dataView || !field) {
-                            return [];
-                          }
-
-                          const suggestions: string[] =
-                            await unifiedSearch.autocomplete.getValueSuggestions(
-                              {
-                                field,
-                                indexPattern: dataView,
-                                query: request.value,
-                                useTimeRange: true,
-                                method: 'terms_agg',
-                              }
-                            );
-
-                          return suggestions.slice(0, 15);
-                      }
-                    }}
-                    width="100%"
-                    height="100px"
                   />
                 ) : (
                   <form>
@@ -177,32 +137,20 @@ export function TraceSearchBox({
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiFlexGroup
-              direction="row"
-              gutterSize="s"
-              alignItems="center"
-              justifyContent="flexEnd"
+            <EuiButton
+              size="s"
+              data-test-subj="apmTraceSearchBoxSearchButton"
+              isLoading={loading}
+              onClick={() => {
+                onQueryCommit();
+              }}
+              iconType="search"
+              style={{ width: '100px' }}
             >
-              <EuiFlexItem>
-                <EuiText color={error ? 'danger' : 'subdued'} size="xs">
-                  {message}
-                </EuiText>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  data-test-subj="apmTraceSearchBoxSearchButton"
-                  isLoading={loading}
-                  onClick={() => {
-                    onQueryCommit();
-                  }}
-                  iconType="search"
-                >
-                  {i18n.translate('xpack.apm.traceSearchBox.refreshButton', {
-                    defaultMessage: 'Search',
-                  })}
-                </EuiButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
+              {i18n.translate('xpack.apm.traceSearchBox.refreshButton', {
+                defaultMessage: 'Search',
+              })}
+            </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>

x-pack/plugins/apm/public/components/shared/date_picker/index.tsx

@@ -105,6 +105,7 @@ export function DatePicker({
       }}
       showUpdateButton={true}
       commonlyUsedRanges={commonlyUsedRanges}
+      width={'auto'}
     />
   );
 }

x-pack/plugins/apm/public/components/shared/monaco_code_editor/index.tsx

@@ -0,0 +1,57 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { CodeEditor } from '@kbn/kibana-react-plugin/public';
+import { monaco } from '@kbn/monaco';
+
+interface Props {
+  value: string;
+  onChange: (val: string) => void;
+}
+
+export function EQLCodeEditor({ value, onChange }: Props) {
+  return (
+    <CodeEditor
+      value={value}
+      height="100px"
+      languageId="plaintext"
+      languageConfiguration={{
+        autoClosingPairs: [
+          { open: '"', close: '"' },
+          { open: '[', close: ']' },
+        ],
+        surroundingPairs: [
+          { open: '[', close: ']' },
+          { open: '"', close: '"' },
+        ],
+        onEnterRules: [
+          {
+            beforeText: /\bsequence\b/g,
+            action: {
+              indentAction: monaco.languages.IndentAction.Indent,
+              appendText: '\t [',
+            },
+          },
+        ],
+      }}
+      options={{
+        tabSize: 2,
+        automaticLayout: true,
+        wordWrap: 'on',
+        wrappingIndent: 'indent',
+        minimap: {
+          enabled: false,
+        },
+        scrollBeyondLastLine: false,
+        quickSuggestions: true,
+        lineNumbers: 'off',
+      }}
+      onChange={onChange}
+    />
+  );
+}

x-pack/plugins/apm/tsconfig.json

@@ -96,7 +96,8 @@
     "@kbn/unified-field-list",
     "@kbn/discover-plugin",
     "@kbn/observability-ai-assistant-plugin",
-    "@kbn/apm-data-access-plugin"
+    "@kbn/apm-data-access-plugin",
+    "@kbn/monaco"
   ],
   "exclude": ["target/**/*"]
 }