[ML] Data Frames: Fixes crash of the source table for complex field v…

…alues. (#39878)

The data frame wizard's source index preview table would crash with some field values more complex than strings. This PR fixes it by adding the following "special treatment" for these values:

Arrays of strings will be concatenated to a comma separated string in table rows.
Arrays of objects will be rendered as a badge with the label array and a tooltip that says that the full value is available in the expanded row.
In the expanded row, every value that's not a string will be rendered using JSON.stringify().

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

@@ -0,0 +1,35 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { ExpandedRow } from './expanded_row';
+
+describe('Data Frame: <ExpandedRow />', () => {
+  test('Test against strings, objects and arrays.', () => {
+    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' }],
+        },
+      },
+    };
+
+    // Using a wrapping <div> element because shallow() would fail
+    // with the Provider being the outer most component.
+    const wrapper = shallow(<ExpandedRow {...props} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -25,7 +25,7 @@ export const ExpandedRow: React.SFC<ExpandedRowProps> = ({ item }) => {
     return (
       <span key={k}>
         <EuiBadge>{k}:</EuiBadge>
-        <small> {value}&nbsp;&nbsp;</small>
+        <small> {typeof value === 'string' ? value : JSON.stringify(value)}&nbsp;&nbsp;</small>
       </span>
     );
   });

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

@@ -10,6 +10,7 @@ import moment from 'moment-timezone';
 import { i18n } from '@kbn/i18n';
 
 import {
+  EuiBadge,
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiCallOut,
@@ -25,6 +26,7 @@ import {
   EuiProgress,
   EuiText,
   EuiTitle,
+  EuiToolTip,
   RIGHT_ALIGNMENT,
 } from '@elastic/eui';
 
@@ -215,12 +217,42 @@ export const SourceIndexPreview: React.SFC<Props> = React.memo(({ cellClick, que
     } as Dictionary<any>;
 
     const field = indexPattern.fields.find(f => f.name === k);
-    const render = (d: string) => {
+
+    const formatField = (d: string) => {
       return field !== undefined && field.type === KBN_FIELD_TYPES.DATE
         ? formatHumanReadableDateTimeSeconds(moment(d).unix() * 1000)
         : d;
     };
 
+    const render = (d: any) => {
+      if (Array.isArray(d) && d.every(item => typeof item === 'string')) {
+        // If the cells data is an array of strings, return as a comma separated list.
+        // The list will get limited to 5 items with `…` at the end if there's more in the original array.
+        return `${d
+          .map(item => formatField(item))
+          .slice(0, 5)
+          .join(', ')}${d.length > 5 ? ', …' : ''}`;
+      } else if (Array.isArray(d)) {
+        // If the cells data is an array of e.g. objects, display a 'array' badge with a
+        // tooltip that explains that this type of field is not supported in this table.
+        return (
+          <EuiToolTip
+            content={i18n.translate(
+              'xpack.ml.dataframe.sourceIndexPreview.dataFrameSourceIndexArrayToolTipContent',
+              {
+                defaultMessage:
+                  'The full content of this array based column is available in the expanded row.',
+              }
+            )}
+          >
+            <EuiBadge>array</EuiBadge>
+          </EuiToolTip>
+        );
+      }
+
+      return formatField(d);
+    };
+
     column.render = render;
 
     if (CELL_CLICK_ENABLED && cellClick) {