displayName implemented

elastic · Aug 13, 2020 · 78e42e9 · 78e42e9
1 parent 0f6d445
commit 78e42e9
Show file tree

Hide file tree

Showing 25 changed files with 183 additions and 31 deletions.
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx
@@ -87,36 +87,42 @@ const initialState: IndexPatternPrivateState = {
       fields: [
         {
           name: 'timestamp',
+          displayName: 'timestamp',
           type: 'date',
           aggregatable: true,
           searchable: true,
         },
         {
           name: 'bytes',
+          displayName: 'bytes',
           type: 'number',
           aggregatable: true,
           searchable: true,
         },
         {
           name: 'memory',
+          displayName: 'memory',
           type: 'number',
           aggregatable: true,
           searchable: true,
         },
         {
           name: 'unsupported',
+          displayName: 'unsupported',
           type: 'geo',
           aggregatable: true,
           searchable: true,
         },
         {
           name: 'source',
+          displayName: 'source',
           type: 'string',
           aggregatable: true,
           searchable: true,
         },
         {
           name: 'client',
+          displayName: 'client',
           type: 'ip',
           aggregatable: true,
           searchable: true,
@@ -131,6 +137,7 @@ const initialState: IndexPatternPrivateState = {
       fields: [
         {
           name: 'timestamp',
+          displayName: 'timestamp',
           type: 'date',
           aggregatable: true,
           searchable: true,
@@ -145,6 +152,7 @@ const initialState: IndexPatternPrivateState = {
         },
         {
           name: 'bytes',
+          displayName: 'bytes',
           type: 'number',
           aggregatable: true,
           searchable: true,
@@ -166,6 +174,7 @@ const initialState: IndexPatternPrivateState = {
         },
         {
           name: 'source',
+          displayName: 'source',
           type: 'string',
           aggregatable: true,
           searchable: true,
@@ -185,18 +194,21 @@ const initialState: IndexPatternPrivateState = {
       fields: [
         {
           name: 'timestamp',
+          displayName: 'timestamp',
           type: 'date',
           aggregatable: true,
           searchable: true,
         },
         {
           name: 'bytes',
+          displayName: 'bytes',
           type: 'number',
           aggregatable: true,
           searchable: true,
         },
         {
           name: 'source',
+          displayName: 'source',
           type: 'string',
           aggregatable: true,
           searchable: true,

diff --git a/...lugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.test.tsx b/...lugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.test.tsx
@@ -8,6 +8,13 @@ import { mount } from 'enzyme';
 import React from 'react';
 import { BucketNestingEditor } from './bucket_nesting_editor';
 import { IndexPatternColumn } from '../indexpattern';
+import { IndexPatternField } from '../types';
+
+const fieldMap = {
+  a: { displayName: 'a' } as IndexPatternField,
+  b: { displayName: 'b' } as IndexPatternField,
+  c: { displayName: 'c' } as IndexPatternField,
+};
 
 describe('BucketNestingEditor', () => {
   function mockCol(col: Partial<IndexPatternColumn> = {}): IndexPatternColumn {
@@ -32,6 +39,7 @@ describe('BucketNestingEditor', () => {
   it('should display the top level grouping when at the root', () => {
     const component = mount(
       <BucketNestingEditor
+        fieldMap={fieldMap}
         columnId="a"
         layer={{
           columnOrder: ['a', 'b', 'c'],
@@ -56,6 +64,7 @@ describe('BucketNestingEditor', () => {
     const component = mount(
       <BucketNestingEditor
         columnId="a"
+        fieldMap={fieldMap}
         layer={{
           columnOrder: ['b', 'a', 'c'],
           columns: {
@@ -81,6 +90,7 @@ describe('BucketNestingEditor', () => {
     const component = mount(
       <BucketNestingEditor
         columnId="a"
+        fieldMap={fieldMap}
         layer={{
           columnOrder: ['b', 'a', 'c'],
           columns: {
@@ -124,6 +134,7 @@ describe('BucketNestingEditor', () => {
     const component = mount(
       <BucketNestingEditor
         columnId="a"
+        fieldMap={fieldMap}
         layer={{
           columnOrder: ['a', 'b', 'c'],
           columns: {
@@ -144,6 +155,7 @@ describe('BucketNestingEditor', () => {
     const component = mount(
       <BucketNestingEditor
         columnId="a"
+        fieldMap={fieldMap}
         layer={{
           columnOrder: ['a', 'b', 'c'],
           columns: {
@@ -164,6 +176,7 @@ describe('BucketNestingEditor', () => {
     const component = mount(
       <BucketNestingEditor
         columnId="a"
+        fieldMap={fieldMap}
         layer={{
           columnOrder: ['c', 'a', 'b'],
           columns: {
@@ -187,6 +200,7 @@ describe('BucketNestingEditor', () => {
     const component = mount(
       <BucketNestingEditor
         columnId="a"
+        fieldMap={fieldMap}
         layer={{
           columnOrder: ['c', 'a', 'b'],
           columns: {
@@ -213,6 +227,7 @@ describe('BucketNestingEditor', () => {
     const component = mount(
       <BucketNestingEditor
         columnId="a"
+        fieldMap={fieldMap}
         layer={{
           columnOrder: ['c', 'a', 'b'],
           columns: {
@@ -238,6 +253,7 @@ describe('BucketNestingEditor', () => {
     const setColumns = jest.fn();
     const component = mount(
       <BucketNestingEditor
+        fieldMap={fieldMap}
         columnId="b"
         layer={{
           columnOrder: ['c', 'a', 'b'],

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFormRow, EuiHorizontalRule, EuiRadio, EuiSelect, htmlIdGenerator } from '@elastic/eui';
-import { IndexPatternLayer } from '../types';
+import { IndexPatternLayer, IndexPatternField } from '../types';
 import { hasField } from '../utils';
 
 const generator = htmlIdGenerator('lens-nesting');
@@ -25,10 +25,12 @@ export function BucketNestingEditor({
   columnId,
   layer,
   setColumns,
+  fieldMap,
 }: {
   columnId: string;
   layer: IndexPatternLayer;
   setColumns: (columns: string[]) => void;
+  fieldMap: Record<string, IndexPatternField>;
 }) {
   const column = layer.columns[columnId];
   const columns = Object.entries(layer.columns);
@@ -37,14 +39,14 @@ export function BucketNestingEditor({
     .map(([value, c]) => ({
       value,
       text: c.label,
-      fieldName: hasField(c) ? c.sourceField : '',
+      fieldName: hasField(c) ? fieldMap[c.sourceField].displayName : '',
     }));
 
   if (!column || !column.isBucketed || !aggColumns.length) {
     return null;
   }
 
-  const fieldName = hasField(column) ? column.sourceField : '';
+  const fieldName = hasField(column) ? fieldMap[column.sourceField].displayName : '';
 
   const prevColumn = layer.columnOrder[layer.columnOrder.indexOf(columnId) - 1];
 

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
@@ -45,27 +45,31 @@ const expectedIndexPatterns = {
     fields: [
       {
         name: 'timestamp',
+        displayName: 'timestamp',
         type: 'date',
         aggregatable: true,
         searchable: true,
         exists: true,
       },
       {
         name: 'bytes',
+        displayName: 'bytes',
         type: 'number',
         aggregatable: true,
         searchable: true,
         exists: true,
       },
       {
         name: 'memory',
+        displayName: 'memory',
         type: 'number',
         aggregatable: true,
         searchable: true,
         exists: true,
       },
       {
         name: 'source',
+        displayName: 'source',
         type: 'string',
         aggregatable: true,
         searchable: true,
@@ -1095,12 +1099,12 @@ describe('IndexPatternDimensionEditorPanel', () => {
             columnOrder: ['col1'],
             columns: {
               col1: {
-                label: 'Average of bar',
+                label: 'Average of memory',
                 dataType: 'number',
                 isBucketed: false,
                 // Private
                 operationType: 'avg',
-                sourceField: 'bar',
+                sourceField: 'memory',
               },
             },
           },
@@ -1145,12 +1149,12 @@ describe('IndexPatternDimensionEditorPanel', () => {
             columnOrder: ['col1'],
             columns: {
               col1: {
-                label: 'Average of bar',
+                label: 'Average of memory',
                 dataType: 'number',
                 isBucketed: false,
                 // Private
                 operationType: 'avg',
-                sourceField: 'bar',
+                sourceField: 'memory',
                 params: {
                   format: { id: 'bytes', params: { decimals: 0 } },
                 },
@@ -1195,12 +1199,12 @@ describe('IndexPatternDimensionEditorPanel', () => {
             columnOrder: ['col1'],
             columns: {
               col1: {
-                label: 'Average of bar',
+                label: 'Average of memory',
                 dataType: 'number',
                 isBucketed: false,
                 // Private
                 operationType: 'avg',
-                sourceField: 'bar',
+                sourceField: 'memory',
                 params: {
                   format: { id: 'bytes', params: { decimals: 2 } },
                 },
@@ -1253,12 +1257,14 @@ describe('IndexPatternDimensionEditorPanel', () => {
               {
                 aggregatable: true,
                 name: 'bar',
+                displayName: 'bar',
                 searchable: true,
                 type: 'number',
               },
               {
                 aggregatable: true,
                 name: 'mystring',
+                displayName: 'mystring',
                 searchable: true,
                 type: 'string',
               },

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx
@@ -74,7 +74,7 @@ export function FieldSelect({
     function fieldNamesToOptions(items: string[]) {
       return items
         .map((field) => ({
-          label: field,
+          label: fieldMap[field].displayName,
           value: {
             type: 'field',
             field,
@@ -161,7 +161,7 @@ export function FieldSelect({
           ? selectedColumnSourceField
             ? [
                 {
-                  label: selectedColumnSourceField,
+                  label: fieldMap[selectedColumnSourceField].displayName,
                   value: { type: 'field', field: selectedColumnSourceField },
                 },
               ]

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/popover_editor.tsx
@@ -378,6 +378,7 @@ export function PopoverEditor(props: PopoverEditorProps) {
 
               {!hideGrouping && (
                 <BucketNestingEditor
+                  fieldMap={fieldMap}
                   layer={state.layers[props.layerId]}
                   columnId={props.columnId}
                   setColumns={(columnOrder) => {

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/document_field.ts b/x-pack/plugins/lens/public/indexpattern_datasource/document_field.ts
@@ -5,12 +5,16 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { IndexPatternField } from './types';
 
 /**
  * This is a special-case field which allows us to perform
  * document-level operations such as count.
  */
-export const documentField = {
+export const documentField: IndexPatternField = {
+  displayName: i18n.translate('xpack.lens.indexPattern.records', {
+    defaultMessage: 'Records',
+  }),
   name: i18n.translate('xpack.lens.indexPattern.records', {
     defaultMessage: 'Records',
   }),

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.test.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.test.tsx
@@ -78,6 +78,7 @@ describe('IndexPattern Field Item', () => {
       filters: [],
       field: {
         name: 'bytes',
+        displayName: 'bytes',
         type: 'number',
         aggregatable: true,
         searchable: true,

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
@@ -100,7 +100,7 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) {
     isLoading: false,
   });
 
-  const wrappableName = wrapOnDot(field.name)!;
+  const wrappableName = wrapOnDot(field.displayName)!;
   const wrappableHighlight = wrapOnDot(highlight);
   const highlightIndex = wrappableHighlight
     ? wrappableName.toLowerCase().indexOf(wrappableHighlight.toLowerCase())
@@ -185,7 +185,7 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) {
       container={document.querySelector<HTMLElement>('.application') || undefined}
       button={
         <DragDrop
-          label={field.name}
+          label={field.displayName}
           value={value}
           data-test-subj="lnsFieldListPanelField"
           draggable
@@ -213,7 +213,7 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) {
             >
               <LensFieldIcon type={field.type as DataType} />
 
-              <span className="lnsFieldItem__name" title={field.name}>
+              <span className="lnsFieldItem__name" title={field.displayName}>
                 {wrappableHighlightableFieldName}
               </span>