[7.x] [Runtime fields] Editor phase 1 (elastic#81472) (elastic#83616)

Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: spalger <[email protected]> # Conflicts: # packages/kbn-optimizer/limits.yml
alexwizp · Nov 18, 2020 · 0323d3b · 0323d3b
1 parent 46e2eb4
commit 0323d3b
Show file tree

Hide file tree

Showing 35 changed files with 1,320 additions and 47 deletions.
diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc
@@ -475,6 +475,10 @@ Elastic.
 |Welcome to the Kibana rollup plugin! This plugin provides Kibana support for Elasticsearch's rollup feature. Please refer to the Elasticsearch documentation to understand rollup indices and how to create rollup jobs.
 
 
+|{kib-repo}blob/{branch}/x-pack/plugins/runtime_fields/README.md[runtimeFields]
+|Welcome to the home of the runtime field editor and everything related to runtime fields!
+
+
 |{kib-repo}blob/{branch}/x-pack/plugins/saved_objects_tagging/README.md[savedObjectsTagging]
 |Add tagging capability to saved objects
 

diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
@@ -103,3 +103,4 @@ pageLoadAssetSize:
   visualize: 57433
   watcher: 43742
   stackAlerts: 29684
+  runtimeFields: 41752
diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx
@@ -31,7 +31,7 @@ export interface Props<T, FormType = FormData, I = T> {
   componentProps?: Record<string, any>;
   readDefaultValueOnForm?: boolean;
   onChange?: (value: I) => void;
-  children?: (field: FieldHook<T, I>) => JSX.Element;
+  children?: (field: FieldHook<T, I>) => JSX.Element | null;
   [key: string]: any;
 }
 

diff --git a/x-pack/.i18nrc.json b/x-pack/.i18nrc.json
@@ -38,10 +38,11 @@
     "xpack.maps": ["plugins/maps"],
     "xpack.ml": ["plugins/ml"],
     "xpack.monitoring": ["plugins/monitoring"],
-    "xpack.remoteClusters": "plugins/remote_clusters",
     "xpack.painlessLab": "plugins/painless_lab",
+    "xpack.remoteClusters": "plugins/remote_clusters",
     "xpack.reporting": ["plugins/reporting"],
     "xpack.rollupJobs": ["plugins/rollup"],
+    "xpack.runtimeFields": "plugins/runtime_fields",
     "xpack.searchProfiler": "plugins/searchprofiler",
     "xpack.security": "plugins/security",
     "xpack.server": "legacy/server",

diff --git a/x-pack/plugins/index_management/kibana.json b/x-pack/plugins/index_management/kibana.json
@@ -18,6 +18,7 @@
   "configPath": ["xpack", "index_management"],
   "requiredBundles": [
     "kibanaReact",
-    "esUiShared"
+    "esUiShared",
+    "runtimeFields"
   ]
 }
diff --git a/...mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx b/...mappings_editor/components/document_fields/field_parameters/painless_script_parameter.tsx
@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { PainlessLang } from '@kbn/monaco';
 import { EuiFormRow, EuiDescribedFormGroup } from '@elastic/eui';
 
 import { CodeEditor, UseField } from '../../../shared_imports';
@@ -18,19 +19,18 @@ interface Props {
 
 export const PainlessScriptParameter = ({ stack }: Props) => {
   return (
-    <UseField path="script.source" config={getFieldConfig('script')}>
+    <UseField<string> path="script.source" config={getFieldConfig('script')}>
       {(scriptField) => {
         const error = scriptField.getErrorsMessages();
         const isInvalid = error ? Boolean(error.length) : false;
 
         const field = (
           <EuiFormRow label={scriptField.label} error={error} isInvalid={isInvalid} fullWidth>
             <CodeEditor
-              languageId="painless"
-              // 99% width allows the editor to resize horizontally. 100% prevents it from resizing.
-              width="99%"
+              languageId={PainlessLang.ID}
+              width="100%"
               height="400px"
-              value={scriptField.value as string}
+              value={scriptField.value}
               onChange={scriptField.setValue}
               options={{
                 fontSize: 12,

diff --git a/...ts/mappings_editor/components/document_fields/field_parameters/runtime_type_parameter.tsx b/...ts/mappings_editor/components/document_fields/field_parameters/runtime_type_parameter.tsx
@@ -14,10 +14,10 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import { UseField } from '../../../shared_imports';
+import { UseField, RUNTIME_FIELD_OPTIONS } from '../../../shared_imports';
 import { DataType } from '../../../types';
 import { getFieldConfig } from '../../../lib';
-import { RUNTIME_FIELD_OPTIONS, TYPE_DEFINITION } from '../../../constants';
+import { TYPE_DEFINITION } from '../../../constants';
 import { EditFieldFormRow, FieldDescriptionSection } from '../fields/edit_field';
 
 interface Props {
@@ -26,7 +26,10 @@ interface Props {
 
 export const RuntimeTypeParameter = ({ stack }: Props) => {
   return (
-    <UseField path="runtime_type" config={getFieldConfig('runtime_type')}>
+    <UseField<EuiComboBoxOptionOption[]>
+      path="runtime_type"
+      config={getFieldConfig('runtime_type')}
+    >
       {(runtimeTypeField) => {
         const { label, value, setValue } = runtimeTypeField;
         const typeDefinition =
@@ -44,8 +47,14 @@ export const RuntimeTypeParameter = ({ stack }: Props) => {
                 )}
                 singleSelection={{ asPlainText: true }}
                 options={RUNTIME_FIELD_OPTIONS}
-                selectedOptions={value as EuiComboBoxOptionOption[]}
-                onChange={setValue}
+                selectedOptions={value}
+                onChange={(newValue) => {
+                  if (newValue.length === 0) {
+                    // Don't allow clearing the type. One must always be selected
+                    return;
+                  }
+                  setValue(newValue);
+                }}
                 isClearable={false}
                 fullWidth
               />

diff --git a/...ndex_management/public/application/components/mappings_editor/constants/field_options.tsx b/...ndex_management/public/application/components/mappings_editor/constants/field_options.tsx
@@ -28,35 +28,6 @@ export const FIELD_TYPES_OPTIONS = Object.entries(MAIN_DATA_TYPE_DEFINITION).map
   })
 ) as ComboBoxOption[];
 
-export const RUNTIME_FIELD_OPTIONS = [
-  {
-    label: 'Keyword',
-    value: 'keyword',
-  },
-  {
-    label: 'Long',
-    value: 'long',
-  },
-  {
-    label: 'Double',
-    value: 'double',
-  },
-  {
-    label: 'Date',
-    value: 'date',
-  },
-  {
-    label: 'IP',
-    value: 'ip',
-  },
-  {
-    label: 'Boolean',
-    value: 'boolean',
-  },
-] as ComboBoxOption[];
-
-export const RUNTIME_FIELD_TYPES = ['keyword', 'long', 'double', 'date', 'ip', 'boolean'] as const;
-
 interface SuperSelectOptionConfig {
   inputDisplay: string;
   dropdownDisplay: JSX.Element;

diff --git a/...agement/public/application/components/mappings_editor/constants/parameters_definition.tsx b/...agement/public/application/components/mappings_editor/constants/parameters_definition.tsx
@@ -16,19 +16,19 @@ import {
   ValidationFuncArg,
   fieldFormatters,
   FieldConfig,
+  RUNTIME_FIELD_OPTIONS,
+  RuntimeType,
 } from '../shared_imports';
 import {
   AliasOption,
   DataType,
-  RuntimeType,
   ComboBoxOption,
   ParameterName,
   ParameterDefinition,
 } from '../types';
 import { documentationService } from '../../../services/documentation';
 import { INDEX_DEFAULT } from './default_values';
 import { TYPE_DEFINITION } from './data_types_definition';
-import { RUNTIME_FIELD_OPTIONS } from './field_options';
 
 const { toInt } = fieldFormatters;
 const { emptyField, containsCharsField, numberGreaterThanField, isJsonField } = fieldValidators;

diff --git a/.../plugins/index_management/public/application/components/mappings_editor/shared_imports.ts b/.../plugins/index_management/public/application/components/mappings_editor/shared_imports.ts
@@ -53,3 +53,5 @@ export {
 } from '../../../../../../../src/plugins/es_ui_shared/public';
 
 export { CodeEditor } from '../../../../../../../src/plugins/kibana_react/public';
+
+export { RUNTIME_FIELD_OPTIONS, RuntimeType } from '../../../../../runtime_fields/public';
diff --git a/...s/index_management/public/application/components/mappings_editor/types/document_fields.ts b/...s/index_management/public/application/components/mappings_editor/types/document_fields.ts
@@ -8,7 +8,7 @@ import { ReactNode } from 'react';
 import { GenericObject } from './mappings_editor';
 
 import { FieldConfig } from '../shared_imports';
-import { PARAMETERS_DEFINITION, RUNTIME_FIELD_TYPES } from '../constants';
+import { PARAMETERS_DEFINITION } from '../constants';
 
 export interface DataTypeDefinition {
   label: string;
@@ -76,8 +76,6 @@ export type SubType = NumericType | RangeType;
 
 export type DataType = MainType | SubType;
 
-export type RuntimeType = typeof RUNTIME_FIELD_TYPES[number];
-
 export type NumericType =
   | 'long'
   | 'integer'
Original file line number	Diff line number	Diff line change
Expand Up		@@ -53,3 +53,5 @@ export {
		} from '../../../../../../../src/plugins/es_ui_shared/public';

		export { CodeEditor } from '../../../../../../../src/plugins/kibana_react/public';

		export { RUNTIME_FIELD_OPTIONS, RuntimeType } from '../../../../../runtime_fields/public';