[Lens] UI for reference-based functions

elastic · Dec 2, 2020 · 808a0d0 · 808a0d0
1 parent d990b27
commit 808a0d0
Show file tree

Hide file tree

Showing 15 changed files with 550 additions and 78 deletions.
diff --git a/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -161,7 +161,7 @@ export function WorkspacePanel({
 
   const expression = useMemo(
     () => {
-      if (!configurationValidationError || configurationValidationError.length === 0) {
+      if (!configurationValidationError?.length) {
         try {
           return buildExpression({
             visualization: activeVisualization,

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
@@ -28,6 +28,7 @@ import {
   updateColumnParam,
   resetIncomplete,
   FieldBasedIndexPatternColumn,
+  OperationType,
 } from '../operations';
 import { mergeLayer } from '../state_helpers';
 import { FieldSelect } from './field_select';
@@ -36,6 +37,7 @@ import { BucketNestingEditor } from './bucket_nesting_editor';
 import { IndexPattern, IndexPatternLayer } from '../types';
 import { trackUiEvent } from '../../lens_ui_telemetry';
 import { FormatSelector } from './format_selector';
+import { ReferenceEditor } from './reference_editor';
 import { TimeScaling } from './time_scaling';
 
 const operationPanels = getOperationDisplay();
@@ -183,9 +185,12 @@ export function DimensionEditor(props: DimensionEditorProps) {
           compatibleWithCurrentField ? '' : ' incompatible'
         }`,
         onClick() {
-          if (operationDefinitionMap[operationType].input === 'none') {
+          if (
+            operationDefinitionMap[operationType].input === 'none' ||
+            operationDefinitionMap[operationType].input === 'fullReference'
+          ) {
+            // Clear invalid state because we are reseting to a valid column
             if (selectedColumn?.operationType === operationType) {
-              // Clear invalid state because we are reseting to a valid column
               if (incompleteInfo) {
                 setState(
                   mergeLayer({
@@ -293,6 +298,34 @@ export function DimensionEditor(props: DimensionEditorProps) {
       </div>
       <EuiSpacer size="s" />
       <div className="lnsIndexPatternDimensionEditor__section lnsIndexPatternDimensionEditor__section--shaded">
+        {!incompleteInfo &&
+        selectedColumn &&
+        'references' in selectedColumn &&
+        selectedOperationDefinition?.input === 'fullReference' ? (
+          <>
+            {selectedColumn.references.map((referenceId, index) => {
+              const validation = selectedOperationDefinition.requiredReferences[index];
+
+              return (
+                <ReferenceEditor
+                  key={index}
+                  layer={state.layers[layerId]}
+                  parentColumnId={columnId}
+                  columnId={referenceId}
+                  updateLayer={(newLayer) => {
+                    setState(mergeLayer({ state, layerId, newLayer }));
+                  }}
+                  validation={validation}
+                  currentIndexPattern={currentIndexPattern}
+                  existingFields={state.existingFields}
+                  selectionStyle={selectedOperationDefinition.selectionStyle}
+                />
+              );
+            })}
+            <EuiSpacer size="s" />
+          </>
+        ) : null}
+
         {!selectedColumn ||
         selectedOperationDefinition?.input === 'field' ||
         (incompleteOperation && operationDefinitionMap[incompleteOperation].input === 'field') ? (
@@ -447,11 +480,11 @@ export function DimensionEditor(props: DimensionEditorProps) {
 }
 function getErrorMessage(
   selectedColumn: IndexPatternColumn | undefined,
-  incompatibleSelectedOperationType: boolean,
+  incompleteOperation: boolean,
   input: 'none' | 'field' | 'fullReference' | undefined,
   fieldInvalid: boolean
 ) {
-  if (selectedColumn && incompatibleSelectedOperationType) {
+  if (selectedColumn && incompleteOperation) {
     if (input === 'field') {
       return i18n.translate('xpack.lens.indexPattern.invalidOperationLabel', {
         defaultMessage: 'To use this function, select a different field.',

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.test.tsx
@@ -1068,6 +1068,10 @@ describe('IndexPatternDimensionEditorPanel', () => {
   });
 
   it('should support selecting the operation before the field', () => {
+    setState.mockImplementation((newState) => {
+      wrapper.setProps({ state: newState });
+    });
+
     wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} columnId={'col2'} />);
 
     wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
@@ -1100,15 +1104,15 @@ describe('IndexPatternDimensionEditorPanel', () => {
       layers: {
         first: {
           ...state.layers.first,
+          columnOrder: ['col1', 'col2'],
           columns: {
             ...state.layers.first.columns,
             col2: expect.objectContaining({
-              sourceField: 'bytes',
               operationType: 'avg',
-              // Other parts of this don't matter for this test
+              sourceField: 'bytes',
             }),
           },
-          columnOrder: ['col1', 'col2'],
+          incompleteColumns: {},
         },
       },
     });
@@ -1178,9 +1182,15 @@ describe('IndexPatternDimensionEditorPanel', () => {
   });
 
   it('should indicate compatible fields when selecting the operation first', () => {
+    setState.mockImplementation((newState) => {
+      wrapper.setProps({ state: newState });
+    });
+
     wrapper = mount(<IndexPatternDimensionEditorComponent {...defaultProps} columnId={'col2'} />);
 
-    wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
+    act(() => {
+      wrapper.find('button[data-test-subj="lns-indexPatternDimension-avg"]').simulate('click');
+    });
 
     const options = wrapper
       .find(EuiComboBox)
@@ -1242,9 +1252,13 @@ describe('IndexPatternDimensionEditorPanel', () => {
     expect(items.map(({ label }: { label: React.ReactNode }) => label)).toEqual([
       'Average',
       'Count',
+      'Counter rate',
+      'Cumulative sum',
+      'Differences',
       'Maximum',
       'Median',
       'Minimum',
+      'Moving average',
       'Sum',
       'Unique count',
       '\u00a0',

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/operation_support.ts b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/operation_support.ts
@@ -49,7 +49,7 @@ export const getOperationSupportMatrix = (props: Props): OperationSupportMatrix
           supportedFieldsByOperation[operation.operationType] = new Set();
         }
         supportedFieldsByOperation[operation.operationType]?.add(operation.field);
-      } else if (operation.type === 'none') {
+      } else {
         supportedOperationsWithoutField.add(operation.operationType);
       }
     });