Index pattern field editor (#88995)

Index pattern field editor

.i18nrc.json

@@ -29,6 +29,7 @@
     "maps_legacy": "src/plugins/maps_legacy",
     "monaco": "packages/kbn-monaco/src",
     "presentationUtil": "src/plugins/presentation_util",
+    "indexPatternFieldEditor": "src/plugins/index_pattern_field_editor",
     "indexPatternManagement": "src/plugins/index_pattern_management",
     "advancedSettings": "src/plugins/advanced_settings",
     "kibana_legacy": "src/plugins/kibana_legacy",

docs/developer/plugin-list.asciidoc

@@ -93,6 +93,10 @@ for use in their own application.
 |Moves the legacy ui/registry/feature_catalogue module for registering "features" that should be shown in the home page's feature catalogue to a service within a "home" plugin. The feature catalogue refered to here should not be confused with the "feature" plugin for registering features used to derive UI capabilities for feature controls.
 
 
+|{kib-repo}blob/{branch}/src/plugins/index_pattern_field_editor/README.md[indexPatternFieldEditor]
+|The reusable field editor across Kibana!
+
+
 |{kib-repo}blob/{branch}/src/plugins/index_pattern_management[indexPatternManagement]
 |WARNING: Missing README.
 

packages/kbn-monaco/src/painless/diagnostics_adapter.ts

@@ -18,7 +18,12 @@ const toDiagnostics = (error: PainlessError): monaco.editor.IMarkerData => {
   };
 };
 
+export interface SyntaxErrors {
+  [modelId: string]: PainlessError[];
+}
 export class DiagnosticsAdapter {
+  private errors: SyntaxErrors = {};
+
   constructor(private worker: WorkerAccessor) {
     const onModelAdd = (model: monaco.editor.IModel): void => {
       let handle: any;
@@ -55,8 +60,16 @@ export class DiagnosticsAdapter {
 
     if (errorMarkers) {
       const model = monaco.editor.getModel(resource);
+      this.errors = {
+        ...this.errors,
+        [model!.id]: errorMarkers,
+      };
       // Set the error markers and underline them with "Error" severity
       monaco.editor.setModelMarkers(model!, ID, errorMarkers.map(toDiagnostics));
     }
   }
+
+  public getSyntaxErrors() {
+    return this.errors;
+  }
 }

packages/kbn-monaco/src/painless/index.ts

@@ -8,8 +8,14 @@
 
 import { ID } from './constants';
 import { lexerRules, languageConfiguration } from './lexer_rules';
-import { getSuggestionProvider } from './language';
+import { getSuggestionProvider, getSyntaxErrors } from './language';
 
-export const PainlessLang = { ID, getSuggestionProvider, lexerRules, languageConfiguration };
+export const PainlessLang = {
+  ID,
+  getSuggestionProvider,
+  lexerRules,
+  languageConfiguration,
+  getSyntaxErrors,
+};
 
 export { PainlessContext, PainlessAutocompleteField } from './types';

packages/kbn-monaco/src/painless/language.ts

@@ -13,7 +13,7 @@ import { ID } from './constants';
 import { PainlessContext, PainlessAutocompleteField } from './types';
 import { PainlessWorker } from './worker';
 import { PainlessCompletionAdapter } from './completion_adapter';
-import { DiagnosticsAdapter } from './diagnostics_adapter';
+import { DiagnosticsAdapter, SyntaxErrors } from './diagnostics_adapter';
 
 const workerProxyService = new WorkerProxyService();
 const editorStateService = new EditorStateService();
@@ -33,8 +33,15 @@ export const getSuggestionProvider = (
   return new PainlessCompletionAdapter(worker, editorStateService);
 };
 
+let diagnosticsAdapter: DiagnosticsAdapter;
+
+// Returns syntax errors for all models by model id
+export const getSyntaxErrors = (): SyntaxErrors => {
+  return diagnosticsAdapter.getSyntaxErrors();
+};
+
 monaco.languages.onLanguage(ID, async () => {
   workerProxyService.setup();
 
-  new DiagnosticsAdapter(worker);
+  diagnosticsAdapter = new DiagnosticsAdapter(worker);
 });

packages/kbn-optimizer/limits.yml

@@ -33,7 +33,7 @@ pageLoadAssetSize:
   home: 41661
   indexLifecycleManagement: 107090
   indexManagement: 140608
-  indexPatternManagement: 154222
+  indexPatternManagement: 28222
   infra: 204800
   fleet: 415829
   ingestPipelines: 58003
@@ -103,6 +103,7 @@ pageLoadAssetSize:
   stackAlerts: 29684
   presentationUtil: 28545
   spacesOss: 18817
+  indexPatternFieldEditor: 90489
   osquery: 107090
   fileUpload: 25664
   banners: 17946

src/core/public/doc_links/doc_links_service.ts

@@ -121,6 +121,7 @@ export class DocLinksService {
         indexPatterns: {
           loadingData: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/tutorial-load-dataset.html`,
           introduction: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/index-patterns.html`,
+          fieldFormattersString: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/field-formatters-string.html`,
         },
         addData: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/connect-to-elasticsearch.html`,
         kibana: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/index.html`,

src/plugins/data/common/index_patterns/constants.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export const RUNTIME_FIELD_TYPES = ['keyword', 'long', 'double', 'date', 'ip', 'boolean'] as const;

src/plugins/data/common/index_patterns/fields/index_pattern_field.test.ts

@@ -26,7 +26,7 @@ describe('Field', function () {
     script: 'script',
     lang: 'lang',
     count: 1,
-    esTypes: ['text'],
+    esTypes: ['text'], // note, this will get replaced by the runtime field type
     aggregatable: true,
     filterable: true,
     searchable: true,
@@ -71,7 +71,7 @@ describe('Field', function () {
   });
 
   it('sets type field when _source field', () => {
-    const field = getField({ name: '_source' });
+    const field = getField({ name: '_source', runtimeField: undefined });
     expect(field.type).toEqual('_source');
   });
 

src/plugins/data/common/index_patterns/fields/index_pattern_field.ts

@@ -7,7 +7,7 @@
  */
 
 import type { RuntimeField } from '../types';
-import { KbnFieldType, getKbnFieldType } from '../../kbn_field_types';
+import { KbnFieldType, getKbnFieldType, castEsToKbnFieldTypeName } from '../../kbn_field_types';
 import { KBN_FIELD_TYPES } from '../../kbn_field_types/types';
 import type { IFieldType } from './types';
 import { FieldSpec, IndexPattern } from '../..';
@@ -99,11 +99,13 @@ export class IndexPatternField implements IFieldType {
   }
 
   public get type() {
-    return this.spec.type;
+    return this.runtimeField?.type
+      ? castEsToKbnFieldTypeName(this.runtimeField?.type)
+      : this.spec.type;
   }
 
   public get esTypes() {
-    return this.spec.esTypes;
+    return this.runtimeField?.type ? [this.runtimeField?.type] : this.spec.esTypes;
   }
 
   public get scripted() {

src/plugins/data/common/index_patterns/index.ts

@@ -12,3 +12,4 @@ export { IndexPatternsService, IndexPatternsContract } from './index_patterns';
 export type { IndexPattern } from './index_patterns';
 export * from './errors';
 export * from './expressions';
+export * from './constants';

src/plugins/data/common/index_patterns/index_patterns/index_pattern.ts

@@ -389,6 +389,8 @@ export class IndexPattern implements IIndexPattern {
         existingField.runtimeField = undefined;
       } else {
         // runtimeField only
+        this.setFieldCustomLabel(name, null);
+        this.deleteFieldFormat(name);
         this.fields.remove(existingField);
       }
     }
@@ -423,7 +425,6 @@ export class IndexPattern implements IIndexPattern {
 
     if (fieldObject) {
       fieldObject.customLabel = newCustomLabel;
-      return;
     }
 
     this.setFieldAttrs(fieldName, 'customLabel', newCustomLabel);

src/plugins/data/common/index_patterns/index_patterns/index_patterns.ts

@@ -415,11 +415,10 @@ export class IndexPatternsService {
         },
         spec.fieldAttrs
       );
-      // APPLY RUNTIME FIELDS
+      // CREATE RUNTIME FIELDS
       for (const [key, value] of Object.entries(runtimeFieldMap || {})) {
-        if (spec.fields[key]) {
-          spec.fields[key].runtimeField = value;
-        } else {
+        // do not create runtime field if mapped field exists
+        if (!spec.fields[key]) {
           spec.fields[key] = {
             name: key,
             type: castEsToKbnFieldTypeName(value.type),

src/plugins/data/common/index_patterns/types.ts

@@ -10,15 +10,16 @@ import { ToastInputFields, ErrorToastOptions } from 'src/core/public/notificatio
 // eslint-disable-next-line
 import type { SavedObject } from 'src/core/server';
 import { IFieldType } from './fields';
+import { RUNTIME_FIELD_TYPES } from './constants';
 import { SerializedFieldFormat } from '../../../expressions/common';
 import { KBN_FIELD_TYPES, IndexPatternField, FieldFormat } from '..';
 
 export type FieldFormatMap = Record<string, SerializedFieldFormat>;
-const RUNTIME_FIELD_TYPES = ['keyword', 'long', 'double', 'date', 'ip', 'boolean'] as const;
-type RuntimeType = typeof RUNTIME_FIELD_TYPES[number];
+
+export type RuntimeType = typeof RUNTIME_FIELD_TYPES[number];
 export interface RuntimeField {
   type: RuntimeType;
-  script: {
+  script?: {
     source: string;
   };
 }

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form.ts

@@ -211,11 +211,12 @@ export function useForm<T extends FormData = FormData, I extends FormData = T>(
   // ----------------------------------
   const addField: FormHook<T, I>['__addField'] = useCallback(
     (field) => {
+      const fieldExists = fieldsRefs.current[field.path] !== undefined;
       fieldsRefs.current[field.path] = field;
 
       updateFormDataAt(field.path, field.value);
 
-      if (!field.isValidated) {
+      if (!fieldExists && !field.isValidated) {
         setIsValid(undefined);
 
         // When we submit the form (and set "isSubmitted" to "true"), we validate **all fields**.

src/plugins/index_pattern_field_editor/README.md

@@ -0,0 +1,69 @@
+# Index pattern field editor
+
+The reusable field editor across Kibana!   
+
+This editor can be used to
+
+* create or edit a runtime field inside an index pattern.  
+* edit concrete (mapped) fields. In this case certain functionalities will be disabled like the possibility to change the field _type_ or to set the field _value_.
+
+## How to use
+
+You first need to add in your kibana.json the "`indexPatternFieldEditor`" plugin as a required dependency of your plugin.
+
+You will then receive in the start contract of the indexPatternFieldEditor plugin the following API:
+
+### `openEditor(options: OpenFieldEditorOptions): CloseEditor`
+
+Use this method to open the index pattern field editor to either create (runtime) or edit (concrete | runtime) a field.  
+
+#### `options`
+
+`ctx: FieldEditorContext` (**required**)
+
+This is the only required option. You need to provide the context in which the editor is being consumed. This object has the following properties:
+
+- `indexPattern: IndexPattern`: the index pattern you want to create/edit the field into.
+
+`onSave(field: IndexPatternField): void` (optional)
+
+You can provide an optional `onSave` handler to be notified when the field has being created/updated. This handler is called after the field has been persisted to the saved object.
+
+`fieldName: string` (optional)
+
+You can optionally pass the name of a field to edit. Leave empty to create a new runtime field based field.
+
+### `userPermissions.editIndexPattern(): boolean`
+
+Convenience method that uses the `core.application.capabilities` api to determine whether the user can edit the index pattern. 
+
+### `<DeleteRuntimeFieldProvider />`
+
+This children func React component provides a handler to delete one or multiple runtime fields.
+
+#### Props
+
+* `indexPattern: IndexPattern`: the current index pattern. (**required**)
+
+```js
+
+const { DeleteRuntimeFieldProvider } = indexPatternFieldEditor;
+
+// Single field
+<DeleteRuntimeFieldProvider indexPattern={indexPattern}>
+  {(deleteField) => (
+    <EuiButton fill color="danger" onClick={() => deleteField('myField')}>
+      Delete
+    </EuiButton>
+  )}
+</DeleteRuntimeFieldProvider>
+
+// Multiple fields
+<DeleteRuntimeFieldProvider indexPattern={indexPattern}>
+  {(deleteFields) => (
+    <EuiButton fill color="danger" onClick={() => deleteFields(['field1', 'field2', 'field3'])}>
+      Delete
+    </EuiButton>
+  )}
+</DeleteRuntimeFieldProvider>
+```

src/plugins/index_pattern_field_editor/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/src/plugins/index_pattern_field_editor'],
+};

src/plugins/index_pattern_field_editor/kibana.json

@@ -0,0 +1,9 @@
+{
+  "id": "indexPatternFieldEditor",
+  "version": "kibana",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["data"],
+  "optionalPlugins": ["usageCollection"],
+  "requiredBundles": ["kibanaReact", "esUiShared", "usageCollection"]
+}

src/plugins/index_pattern_field_editor/public/assets/icons/LICENSE.txt

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Steven Skelton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.