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) {