diff --git a/x-pack/legacy/plugins/ml/public/data_frame/components/source_index_preview/__snapshots__/expanded_row.test.tsx.snap b/x-pack/legacy/plugins/ml/public/data_frame/components/source_index_preview/__snapshots__/expanded_row.test.tsx.snap
new file mode 100644
index 0000000000000..1aeee77882c41
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/data_frame/components/source_index_preview/__snapshots__/expanded_row.test.tsx.snap
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Data Frame: Test against strings, objects and arrays. 1`] = `
+
+
+
+ arrayObject
+ :
+
+
+
+ [{"object1":"the-object-1"},{"object2":"the-objects-2"}]
+
+
+
+
+
+ arrayString
+ :
+
+
+
+ ["the-array-string-1","the-array-string-2"]
+
+
+
+
+
+ name
+ :
+
+
+
+ the-name
+
+
+
+
+
+ nested.inner1
+ :
+
+
+
+ the-inner-1
+
+
+
+
+
+ nested.inner2
+ :
+
+
+
+ the-inner-2
+
+
+
+
+`;
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/components/source_index_preview/expanded_row.test.tsx b/x-pack/legacy/plugins/ml/public/data_frame/components/source_index_preview/expanded_row.test.tsx
new file mode 100644
index 0000000000000..b3380df0a7cb9
--- /dev/null
+++ b/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: ', () => {
+ 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
element because shallow() would fail
+ // with the Provider being the outer most component.
+ const wrapper = shallow(
);
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/components/source_index_preview/expanded_row.tsx b/x-pack/legacy/plugins/ml/public/data_frame/components/source_index_preview/expanded_row.tsx
index a6dcf4450c85d..6bdd9bb78c058 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/components/source_index_preview/expanded_row.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame/components/source_index_preview/expanded_row.tsx
@@ -25,7 +25,7 @@ export const ExpandedRow: React.SFC
= ({ item }) => {
return (
{k}:
- {value}
+ {typeof value === 'string' ? value : JSON.stringify(value)}
);
});
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/components/source_index_preview/source_index_preview.tsx b/x-pack/legacy/plugins/ml/public/data_frame/components/source_index_preview/source_index_preview.tsx
index ead7d1dbd69e4..bf90b4ffae710 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/components/source_index_preview/source_index_preview.tsx
+++ b/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 = React.memo(({ cellClick, que
} as Dictionary;
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 (
+
+ array
+
+ );
+ }
+
+ return formatField(d);
+ };
+
column.render = render;
if (CELL_CLICK_ENABLED && cellClick) {