[ML] Data frame transforms: Fix getting nested properties. (elastic#4…

…3262) (elastic#43273)

- Fixes a regression where values were not properly extracted from nested objects.
- Moves inline code we had to solve this to a utility function getNestedProperty(). Kibana's idx is a lodash-get replacement with TypeScript support. However, it requires that you'd know the accessor up front, it doesn't work with dynamic string values. getNestedProperty() allows you to pass a string like lodash-get, but it uses idx on the inside so you still get TypeScript support.

x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/source_index_preview/expanded_row.test.tsx

@@ -7,22 +7,38 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
+import { getNestedProperty } from '../../../../../util/object_utils';
+import { getFlattenedFields } from '../../../../common';
+
 import { ExpandedRow } from './expanded_row';
 
 describe('Data Frame: <ExpandedRow />', () => {
   test('Test against strings, objects and arrays.', () => {
+    const source = {
+      name: 'the-name',
+      nested: {
+        inner1: 'the-inner-1',
+        inner2: 'the-inner-2',
+      },
+      arrayString: ['the-array-string-1', 'the-array-string-2'],
+      arrayObject: [{ object1: 'the-object-1' }, { object2: 'the-objects-2' }],
+    } as Record<string, any>;
+
+    const flattenedSource = getFlattenedFields(source).reduce(
+      (p, c) => {
+        p[c] = getNestedProperty(source, c);
+        if (p[c] === undefined) {
+          p[c] = source[`"${c}"`];
+        }
+        return p;
+      },
+      {} as Record<string, any>
+    );
+
     const props = {
       item: {
         _id: 'the-id',
-        _source: {
-          name: 'the-name',
-          nested: {
-            inner1: 'the-inner-1',
-            inner2: 'the-inner-2',
-          },
-          arrayString: ['the-array-string-1', 'the-array-string-2'],
-          arrayObject: [{ object1: 'the-object-1' }, { object2: 'the-objects-2' }],
-        },
+        _source: flattenedSource,
       },
     };
 

x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/source_index_preview/expanded_row.tsx

@@ -7,25 +7,16 @@
 import React from 'react';
 
 import { EuiBadge, EuiText } from '@elastic/eui';
-import { idx } from '@kbn/elastic-idx';
 
-import { getSelectableFields, EsDoc } from '../../../../common';
+import { EsDoc } from '../../../../common';
 
-interface ExpandedRowProps {
-  item: EsDoc;
-}
-
-export const ExpandedRow: React.SFC<ExpandedRowProps> = ({ item }) => {
-  const keys = getSelectableFields([item]);
-  const list = keys.map(k => {
-    // split the attribute key string and use reduce with an idx check to access nested attributes.
-    const value = k.split('.').reduce((obj, i) => idx(obj, _ => _[i]), item._source) || '';
-    return (
+export const ExpandedRow: React.SFC<{ item: EsDoc }> = ({ item }) => (
+  <EuiText>
+    {Object.entries(item._source).map(([k, value]) => (
       <span key={k}>
         <EuiBadge>{k}:</EuiBadge>
         <small> {typeof value === 'string' ? value : JSON.stringify(value)}&nbsp;&nbsp;</small>
       </span>
-    );
-  });
-  return <EuiText>{list}</EuiText>;
-};
+    ))}
+  </EuiText>
+);

x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/source_index_preview/use_source_index_data.ts

@@ -8,11 +8,10 @@ import React, { useEffect, useState } from 'react';
 
 import { SearchResponse } from 'elasticsearch';
 
-import { idx } from '@kbn/elastic-idx';
-
 import { StaticIndexPattern } from 'ui/index_patterns';
 
 import { ml } from '../../../../../services/ml_api_service';
+import { getNestedProperty } from '../../../../../util/object_utils';
 
 import {
   getDefaultSelectableFields,
@@ -82,8 +81,11 @@ export const useSourceIndexData = (
           [key: string]: any;
         };
         flattenedFields.forEach(ff => {
-          item[ff] = idx(doc._source, _ => _[ff]);
+          item[ff] = getNestedProperty(doc._source, ff);
           if (item[ff] === undefined) {
+            // If the attribute is undefined, it means it was not a nested property
+            // but had dots in its actual name. This selects the property by its
+            // full name and assigns it to `item[ff]`.
             item[ff] = doc._source[`"${ff}"`];
           }
         });

x-pack/legacy/plugins/ml/public/util/object_utils.test.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { getNestedProperty } from './object_utils';
+
+describe('object_utils', () => {
+  test('getNestedProperty()', () => {
+    const testObj = {
+      the: {
+        nested: {
+          value: 'the-nested-value',
+        },
+      },
+    };
+
+    const test1 = getNestedProperty(testObj, 'the');
+    expect(typeof test1).toBe('object');
+    expect(Object.keys(test1)).toStrictEqual(['nested']);
+
+    const test2 = getNestedProperty(testObj, 'the$');
+    expect(typeof test2).toBe('undefined');
+
+    const test3 = getNestedProperty(testObj, 'the$', 'the-default-value');
+    expect(typeof test3).toBe('string');
+    expect(test3).toBe('the-default-value');
+
+    const test4 = getNestedProperty(testObj, 'the.neSted');
+    expect(typeof test4).toBe('undefined');
+
+    const test5 = getNestedProperty(testObj, 'the.nested');
+    expect(typeof test5).toBe('object');
+    expect(Object.keys(test5)).toStrictEqual(['value']);
+
+    const test6 = getNestedProperty(testObj, 'the.nested.vaLue');
+    expect(typeof test6).toBe('undefined');
+
+    const test7 = getNestedProperty(testObj, 'the.nested.value');
+    expect(typeof test7).toBe('string');
+    expect(test7).toBe('the-nested-value');
+
+    const test8 = getNestedProperty(testObj, 'the.nested.value.doesntExist');
+    expect(typeof test8).toBe('undefined');
+
+    const test9 = getNestedProperty(testObj, 'the.nested.value.doesntExist', 'the-default-value');
+    expect(typeof test9).toBe('string');
+    expect(test9).toBe('the-default-value');
+  });
+});

x-pack/legacy/plugins/ml/public/util/object_utils.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { idx } from '@kbn/elastic-idx';
+
+// This is similar to lodash's get() except that it's TypeScript aware and is able to infer return types.
+// It splits the attribute key string and uses reduce with an idx check to access nested attributes.
+export const getNestedProperty = (
+  obj: Record<string, any>,
+  accessor: string,
+  defaultValue?: any
+) => {
+  return accessor.split('.').reduce((o, i) => idx(o, _ => _[i]), obj) || defaultValue;
+};