[ML] Improve job and datafeed config editors in the Advanced job wiza…

…rd (#146968) ## Summary Part of #66716 Updates the code editor for anomaly detection job and datafeed configurations. It uses the monaco editor instead of ace and passes the JSON schema definition extracted from the elasticsearch specification to provide suggestions for available properties and documentation on hover. - Properties autocompletion (ctrl + space) <img width="552" alt="image" src="https://user-images.githubusercontent.com/5236598/205601880-03d484b4-c007-4e1b-9325-a80ccdcd02b8.png"> - Documentation on mouse over <img width="512" alt="image" src="https://user-images.githubusercontent.com/5236598/205602042-53a600ee-8fb5-4c18-991d-ffc2f2cca7e8.png"> - Data types support <img width="336" alt="image" src="https://user-images.githubusercontent.com/5236598/205602158-1298a37b-7d8e-40f8-9f6b-bf3117d37c04.png"> ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
elastic · Mar 10, 2023 · 662fd85 · 662fd85
1 parent 74fb6b0
commit 662fd85
Show file tree

Hide file tree

Showing 16 changed files with 2,248 additions and 29 deletions.
diff --git a/x-pack/plugins/ml/common/api_schemas/json_schema_schema.ts b/x-pack/plugins/ml/common/api_schemas/json_schema_schema.ts
@@ -0,0 +1,24 @@
+/*
+ * 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 { schema, type TypeOf } from '@kbn/config-schema';
+
+export const getJsonSchemaQuerySchema = schema.object({
+  /**
+   * ES API path
+   */
+  path: schema.oneOf([
+    schema.literal('/_ml/anomaly_detectors/{job_id}'),
+    schema.literal('/_ml/datafeeds/{datafeed_id}'),
+  ]),
+  /**
+   * API Method
+   */
+  method: schema.string(),
+});
+
+export type SupportedPath = TypeOf<typeof getJsonSchemaQuerySchema>['path'];
diff --git a/...k/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx b/...k/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx
@@ -6,14 +6,13 @@
  */
 
 import React, { FC } from 'react';
-import { XJsonMode } from '@kbn/ace';
-
-import { EuiCodeEditor, XJson } from '@kbn/es-ui-shared-plugin/public';
-import type { EuiCodeEditorProps } from '@kbn/es-ui-shared-plugin/public';
+import { monaco, XJsonLang } from '@kbn/monaco';
+import { CodeEditor } from '@kbn/kibana-react-plugin/public';
+import { type EuiCodeEditorProps, XJson } from '@kbn/es-ui-shared-plugin/public';
 
 const { expandLiteralStrings } = XJson;
 
-export const ML_EDITOR_MODE = { TEXT: 'text', JSON: 'json', XJSON: new XJsonMode() };
+export const ML_EDITOR_MODE = { TEXT: 'text', JSON: 'json', XJSON: XJsonLang.ID };
 
 interface MlJobEditorProps {
   value: string;
@@ -25,6 +24,7 @@ interface MlJobEditorProps {
   theme?: string;
   onChange?: EuiCodeEditorProps['onChange'];
   'data-test-subj'?: string;
+  schema?: object;
 }
 export const MLJobEditor: FC<MlJobEditorProps> = ({
   value,
@@ -36,6 +36,7 @@ export const MLJobEditor: FC<MlJobEditorProps> = ({
   theme = 'textmate',
   onChange = () => {},
   'data-test-subj': dataTestSubj,
+  schema,
 }) => {
   if (mode === ML_EDITOR_MODE.XJSON) {
     try {
@@ -47,23 +48,35 @@ export const MLJobEditor: FC<MlJobEditorProps> = ({
   }
 
   return (
-    <EuiCodeEditor
+    <CodeEditor
+      languageId={mode}
+      options={{
+        readOnly,
+        theme,
+      }}
       value={value}
       width={width}
       height={height}
-      mode={mode}
-      readOnly={readOnly}
-      wrapEnabled={true}
-      showPrintMargin={false}
-      theme={theme}
-      editorProps={{ $blockScrolling: true }}
-      setOptions={{
-        useWorker: syntaxChecking,
-        tabSize: 2,
-        useSoftTabs: true,
-      }}
       onChange={onChange}
       data-test-subj={dataTestSubj}
+      editorDidMount={(editor: monaco.editor.IStandaloneCodeEditor) => {
+        const editorModelUri: string = editor.getModel()?.uri.toString()!;
+        if (schema) {
+          monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+            validate: true,
+            enableSchemaRequest: false,
+            schemaValidation: 'error',
+            schemas: [
+              ...(monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas ?? []),
+              {
+                uri: editorModelUri,
+                fileMatch: [editorModelUri],
+                schema,
+              },
+            ],
+          });
+        }
+      }}
     />
   );
 };
diff --git a/...pplication/jobs/new_job/pages/components/common/json_editor_flyout/json_editor_flyout.tsx b/...pplication/jobs/new_job/pages/components/common/json_editor_flyout/json_editor_flyout.tsx
@@ -8,6 +8,7 @@
 import React, { Fragment, FC, useState, useContext, useEffect, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { memoize } from 'lodash';
 import {
   EuiFlyout,
   EuiFlyoutFooter,
@@ -21,6 +22,7 @@ import {
   EuiCallOut,
 } from '@elastic/eui';
 import { XJson } from '@kbn/es-ui-shared-plugin/public';
+import { useMlApiContext } from '../../../../../../contexts/kibana';
 import { CombinedJob, Datafeed } from '../../../../../../../../common/types/anomaly_detection_jobs';
 import { ML_EDITOR_MODE, MLJobEditor } from '../../../../../jobs_list/components/ml_job_editor';
 import { isValidJson } from '../../../../../../../../common/util/validation_utils';
@@ -42,18 +44,32 @@ interface Props {
   jobEditorMode: EDITOR_MODE;
   datafeedEditorMode: EDITOR_MODE;
 }
+
+const fetchSchemas = memoize(
+  async (jsonSchemaApi, path: string, method: string) =>
+    jsonSchemaApi.getSchemaDefinition({
+      path,
+      method,
+    }),
+  (jsonSchemaApi, path, method) => path + method
+);
+
 export const JsonEditorFlyout: FC<Props> = ({ isDisabled, jobEditorMode, datafeedEditorMode }) => {
   const { jobCreator, jobCreatorUpdate, jobCreatorUpdated } = useContext(JobCreatorContext);
   const { displayErrorToast } = useToastNotificationService();
   const [showJsonFlyout, setShowJsonFlyout] = useState(false);
   const [showChangedIndicesWarning, setShowChangedIndicesWarning] = useState(false);
 
+  const { jsonSchema: jsonSchemaApi } = useMlApiContext();
+
   const [jobConfigString, setJobConfigString] = useState(jobCreator.formattedJobJson);
   const [datafeedConfigString, setDatafeedConfigString] = useState(
     jobCreator.formattedDatafeedJson
   );
   const [saveable, setSaveable] = useState(false);
   const [tempCombinedJob, setTempCombinedJob] = useState<CombinedJob | null>(null);
+  const [jobSchema, setJobSchema] = useState<object>();
+  const [datafeedSchema, setDatafeedSchema] = useState<object>();
 
   useEffect(() => {
     setJobConfigString(jobCreator.formattedJobJson);
@@ -78,6 +94,29 @@ export const JsonEditorFlyout: FC<Props> = ({ isDisabled, jobEditorMode, datafee
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showJsonFlyout]);
 
+  useEffect(
+    function fetchSchemasOnMount() {
+      fetchSchemas(jsonSchemaApi, '/_ml/anomaly_detectors/{job_id}', 'put')
+        .then((result) => {
+          setJobSchema(result);
+        })
+        .catch((e) => {
+          // eslint-disable-next-line no-console
+          console.error(e);
+        });
+
+      fetchSchemas(jsonSchemaApi, '/_ml/datafeeds/{datafeed_id}', 'put')
+        .then((result) => {
+          setDatafeedSchema(result);
+        })
+        .catch((e) => {
+          // eslint-disable-next-line no-console
+          console.error(e);
+        });
+    },
+    [jsonSchemaApi]
+  );
+
   const editJsonMode =
     jobEditorMode === EDITOR_MODE.EDITABLE || datafeedEditorMode === EDITOR_MODE.EDITABLE;
   const readOnlyMode =
@@ -160,7 +199,7 @@ export const JsonEditorFlyout: FC<Props> = ({ isDisabled, jobEditorMode, datafee
         <EuiFlyout onClose={() => setShowJsonFlyout(false)} hideCloseButton size={'l'}>
           <EuiFlyoutBody>
             <EuiFlexGroup>
-              {jobEditorMode !== EDITOR_MODE.HIDDEN && (
+              {jobEditorMode !== EDITOR_MODE.HIDDEN ? (
                 <Contents
                   editJson={jobEditorMode === EDITOR_MODE.EDITABLE}
                   onChange={onJobChange}
@@ -169,9 +208,10 @@ export const JsonEditorFlyout: FC<Props> = ({ isDisabled, jobEditorMode, datafee
                   })}
                   value={jobConfigString}
                   heightOffset={showChangedIndicesWarning ? WARNING_CALLOUT_OFFSET : 0}
+                  schema={jobSchema}
                 />
-              )}
-              {datafeedEditorMode !== EDITOR_MODE.HIDDEN && (
+              ) : null}
+              {datafeedEditorMode !== EDITOR_MODE.HIDDEN ? (
                 <>
                   <Contents
                     editJson={datafeedEditorMode === EDITOR_MODE.EDITABLE}
@@ -181,6 +221,7 @@ export const JsonEditorFlyout: FC<Props> = ({ isDisabled, jobEditorMode, datafee
                     })}
                     value={datafeedConfigString}
                     heightOffset={showChangedIndicesWarning ? WARNING_CALLOUT_OFFSET : 0}
+                    schema={datafeedSchema}
                   />
                   {datafeedEditorMode === EDITOR_MODE.EDITABLE && (
                     <EuiFlexItem>
@@ -191,7 +232,7 @@ export const JsonEditorFlyout: FC<Props> = ({ isDisabled, jobEditorMode, datafee
                     </EuiFlexItem>
                   )}
                 </>
-              )}
+              ) : null}
             </EuiFlexGroup>
             {showChangedIndicesWarning && (
               <>
@@ -274,7 +315,8 @@ const Contents: FC<{
   editJson: boolean;
   onChange(s: string): void;
   heightOffset?: number;
-}> = ({ title, value, editJson, onChange, heightOffset = 0 }) => {
+  schema?: object;
+}> = ({ title, value, editJson, onChange, heightOffset = 0, schema }) => {
   // the ace editor requires a fixed height
   const editorHeight = useMemo(
     () => `${window.innerHeight - 230 - heightOffset}px`,
@@ -289,9 +331,10 @@ const Contents: FC<{
       <MLJobEditor
         value={value}
         height={editorHeight}
-        mode={ML_EDITOR_MODE.XJSON}
+        mode={ML_EDITOR_MODE.JSON}
         readOnly={editJson === false}
         onChange={onChange}
+        schema={schema}
       />
     </EuiFlexItem>
   );

diff --git a/x-pack/plugins/ml/public/application/services/ml_api_service/index.ts b/x-pack/plugins/ml/public/application/services/ml_api_service/index.ts
@@ -8,6 +8,7 @@
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import { Observable } from 'rxjs';
 import type { HttpStart } from '@kbn/core/public';
+import { jsonSchemaProvider } from './json_schema';
 import { HttpService } from '../http_service';
 
 import { annotationsApiProvider } from './annotations';
@@ -732,5 +733,6 @@ export function mlApiServicesProvider(httpService: HttpService) {
     savedObjects: savedObjectsApiProvider(httpService),
     trainedModels: trainedModelsApiProvider(httpService),
     notifications: notificationsProvider(httpService),
+    jsonSchema: jsonSchemaProvider(httpService),
   };
 }
diff --git a/x-pack/plugins/ml/public/application/services/ml_api_service/json_schema.ts b/x-pack/plugins/ml/public/application/services/ml_api_service/json_schema.ts
@@ -0,0 +1,31 @@
+/*
+ * 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 { omitBy } from 'lodash';
+import { isDefined } from '@kbn/ml-is-defined';
+import { type SupportedPath } from '../../../../common/api_schemas/json_schema_schema';
+import { HttpService } from '../http_service';
+import { basePath } from '.';
+
+export interface GetSchemaDefinitionParams {
+  path: SupportedPath;
+  method: string;
+}
+
+export function jsonSchemaProvider(httpService: HttpService) {
+  const apiBasePath = basePath();
+
+  return {
+    getSchemaDefinition(params: GetSchemaDefinitionParams) {
+      return httpService.http<object>({
+        path: `${apiBasePath}/json_schema`,
+        method: 'GET',
+        query: omitBy(params, (v) => !isDefined(v)),
+      });
+    },
+  };
+}
diff --git a/x-pack/plugins/ml/server/models/json_schema_service/index.ts b/x-pack/plugins/ml/server/models/json_schema_service/index.ts
@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { JsonSchemaService } from './json_schema_service';