[Runtime fields] Editor phase 1 (#81472)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: spalger <spalger@users.noreply.github.com>
elastic · Nov 18, 2020 · e3c2dcc · e3c2dcc
1 parent 982639f
commit e3c2dcc
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
@@ -479,6 +479,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
@@ -102,4 +102,5 @@ pageLoadAssetSize:
   visualizations: 295025
   visualize: 57431
   watcher: 43598
+  runtimeFields: 41752
   stackAlerts: 29684
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';