From 34269bef14a489ce6d76990b5fc5dd603f60d074 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Thu, 28 Jan 2021 13:50:28 +0000 Subject: [PATCH] [Discover] Grouping multifields in a doc table (#88560) (#89546) * [Discover] Grouping multifields in a doc table * Fixing scss selector * Remove unnecessary comment Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../components/doc_viewer/doc_viewer.scss | 8 + .../components/table/table.test.tsx | 193 +++++++++++++++--- .../application/components/table/table.tsx | 107 ++++++++-- .../components/table/table_row.tsx | 25 ++- 4 files changed, 280 insertions(+), 53 deletions(-) diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index 5bae3d64a6b69..95a50b54b5364 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -19,6 +19,14 @@ padding-top: $euiSizeS; } + .kbnDocViewer__multifield_row:hover td { + background-color: transparent; + } + + .kbnDocViewer__multifield_title { + font-family: $euiFontFamily; + } + .dscFieldName { color: $euiColorDarkShade; } diff --git a/src/plugins/discover/public/application/components/table/table.test.tsx b/src/plugins/discover/public/application/components/table/table.test.tsx index 1ffc0e5af95ac..ac074cf229c77 100644 --- a/src/plugins/discover/public/application/components/table/table.test.tsx +++ b/src/plugins/discover/public/application/components/table/table.test.tsx @@ -167,30 +167,6 @@ describe('DocViewTable at Discover', () => { }); }); -describe('DocViewTable at Discover Doc', () => { - const hit = { - _index: 'logstash-2014.09.09', - _score: 1, - _type: 'doc', - _id: 'id123', - _source: { - extension: 'html', - not_mapped: 'yes', - }, - }; - // here no action buttons are rendered - const props = { - hit, - indexPattern, - }; - const component = mount(); - const foundLength = findTestSubject(component, 'addInclusiveFilterButton').length; - - it(`renders no action buttons`, () => { - expect(foundLength).toBe(0); - }); -}); - describe('DocViewTable at Discover Context', () => { // here no toggleColumnButtons are rendered const hit = { @@ -243,3 +219,172 @@ describe('DocViewTable at Discover Context', () => { expect(component.html() !== html).toBeTruthy(); }); }); + +describe('DocViewTable at Discover Doc', () => { + const hit = { + _index: 'logstash-2014.09.09', + _score: 1, + _type: 'doc', + _id: 'id123', + _source: { + extension: 'html', + not_mapped: 'yes', + }, + }; + // here no action buttons are rendered + const props = { + hit, + indexPattern, + }; + const component = mount(); + const foundLength = findTestSubject(component, 'addInclusiveFilterButton').length; + + it(`renders no action buttons`, () => { + expect(foundLength).toBe(0); + }); +}); + +describe('DocViewTable at Discover Doc with Fields API', () => { + const indexPatterneCommerce = ({ + fields: { + getAll: () => [ + { + name: '_index', + type: 'string', + scripted: false, + filterable: true, + }, + { + name: 'category', + type: 'string', + scripted: false, + filterable: true, + }, + { + name: 'category.keyword', + displayName: 'category.keyword', + type: 'string', + scripted: false, + filterable: true, + spec: { + subType: { + multi: { + parent: 'category', + }, + }, + }, + }, + { + name: 'customer_first_name', + type: 'string', + scripted: false, + filterable: true, + }, + { + name: 'customer_first_name.keyword', + displayName: 'customer_first_name.keyword', + type: 'string', + scripted: false, + filterable: false, + spec: { + subType: { + multi: { + parent: 'customer_first_name', + }, + }, + }, + }, + { + name: 'customer_first_name.nickname', + displayName: 'customer_first_name.nickname', + type: 'string', + scripted: false, + filterable: false, + spec: { + subType: { + multi: { + parent: 'customer_first_name', + }, + }, + }, + }, + ], + }, + metaFields: ['_index', '_type', '_score', '_id'], + flattenHit: jest.fn((hit) => { + const result = {} as Record; + Object.keys(hit).forEach((key) => { + if (key !== 'fields') { + result[key] = hit[key]; + } else { + Object.keys(hit.fields).forEach((field) => { + result[field] = hit.fields[field]; + }); + } + }); + return result; + }), + formatHit: jest.fn((hit) => { + const result = {} as Record; + Object.keys(hit).forEach((key) => { + if (key !== 'fields') { + result[key] = hit[key]; + } else { + Object.keys(hit.fields).forEach((field) => { + result[field] = hit.fields[field]; + }); + } + }); + return result; + }), + } as unknown) as IndexPattern; + + indexPatterneCommerce.fields.getByName = (name: string) => { + return indexPatterneCommerce.fields.getAll().find((field) => field.name === name); + }; + + const fieldsHit = { + _index: 'logstash-2014.09.09', + _type: 'doc', + _id: 'id123', + _score: null, + fields: { + category: "Women's Clothing", + 'category.keyword': "Women's Clothing", + customer_first_name: 'Betty', + 'customer_first_name.keyword': 'Betty', + 'customer_first_name.nickname': 'Betsy', + }, + }; + const props = { + hit: fieldsHit, + columns: ['Document'], + indexPattern: indexPatterneCommerce, + filter: jest.fn(), + onAddColumn: jest.fn(), + onRemoveColumn: jest.fn(), + }; + // @ts-ignore + const component = mount(); + it('renders multifield rows', () => { + const categoryMultifieldRow = findTestSubject( + component, + 'tableDocViewRow-multifieldsTitle-category' + ); + expect(categoryMultifieldRow.length).toBe(1); + const categoryKeywordRow = findTestSubject(component, 'tableDocViewRow-category.keyword'); + expect(categoryKeywordRow.length).toBe(1); + + const customerNameMultiFieldRow = findTestSubject( + component, + 'tableDocViewRow-multifieldsTitle-customer_first_name' + ); + expect(customerNameMultiFieldRow.length).toBe(1); + expect(findTestSubject(component, 'tableDocViewRow-customer_first_name.keyword').length).toBe( + 1 + ); + expect(findTestSubject(component, 'tableDocViewRow-customer_first_name.nickname').length).toBe( + 1 + ); + }); +}); diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx index 090df8baba409..7528828a06f97 100644 --- a/src/plugins/discover/public/application/components/table/table.tsx +++ b/src/plugins/discover/public/application/components/table/table.tsx @@ -5,8 +5,8 @@ * compliance with, at your election, the Elastic License or the Server Side * Public License, v 1. */ - -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; +import { i18n } from '@kbn/i18n'; import { DocViewTableRow } from './table_row'; import { trimAngularSpan } from './table_helper'; import { isNestedFieldParent } from '../../helpers/nested_fields'; @@ -23,6 +23,36 @@ export function DocViewTable({ onRemoveColumn, }: DocViewRenderProps) { const [fieldRowOpen, setFieldRowOpen] = useState({} as Record); + const [multiFields, setMultiFields] = useState({} as Record); + const [fieldsWithParents, setFieldsWithParents] = useState([] as string[]); + + useEffect(() => { + if (!indexPattern) { + return; + } + const mapping = indexPattern.fields.getByName; + const flattened = indexPattern.flattenHit(hit); + const map: Record = {}; + const arr: string[] = []; + + Object.keys(flattened).forEach((key) => { + const field = mapping(key); + + if (field && field.spec?.subType?.multi?.parent) { + const parent = field.spec.subType.multi.parent; + if (!map[parent]) { + map[parent] = [] as string[]; + } + const value = map[parent]; + value.push(key); + map[parent] = value; + arr.push(key); + } + }); + setMultiFields(map); + setFieldsWithParents(arr); + }, [indexPattern, hit]); + if (!indexPattern) { return null; } @@ -34,11 +64,13 @@ export function DocViewTable({ fieldRowOpen[field] = !fieldRowOpen[field]; setFieldRowOpen({ ...fieldRowOpen }); } - return ( {Object.keys(flattened) + .filter((field) => { + return !fieldsWithParents.includes(field); + }) .sort((fieldA, fieldB) => { const mappingA = mapping(fieldA); const mappingB = mapping(fieldB); @@ -67,23 +99,60 @@ export function DocViewTable({ const fieldType = isNestedFieldParent(field, indexPattern) ? 'nested' : indexPattern.fields.getByName(field)?.type; - return ( - toggleValueCollapse(field)} - onToggleColumn={toggleColumn} - value={value} - valueRaw={valueRaw} - /> + + toggleValueCollapse(field)} + onToggleColumn={toggleColumn} + value={value} + valueRaw={valueRaw} + /> + {multiFields[field] ? ( + + + + + ) : null} + {multiFields[field] + ? multiFields[field].map((multiField) => { + return ( + toggleValueCollapse(field)} + onToggleColumn={toggleColumn} + value={value} + valueRaw={valueRaw} + /> + ); + }) + : null} + ); })} diff --git a/src/plugins/discover/public/application/components/table/table_row.tsx b/src/plugins/discover/public/application/components/table/table_row.tsx index 61f9fa50091c1..2b91a757e9bc2 100644 --- a/src/plugins/discover/public/application/components/table/table_row.tsx +++ b/src/plugins/discover/public/application/components/table/table_row.tsx @@ -18,7 +18,7 @@ import { DocViewTableRowIconUnderscore } from './table_row_icon_underscore'; import { FieldName } from '../field_name/field_name'; export interface Props { - field: string; + field?: string; fieldMapping?: FieldMapping; fieldType: string; displayUnderscoreWarning: boolean; @@ -51,25 +51,30 @@ export function DocViewTableRow({ kbnDocViewer__value: true, 'truncate-by-height': isCollapsible && isCollapsed, }); - + const key = field ? field : fieldMapping?.displayName; return ( - +
  + + {i18n.translate('discover.fieldChooser.discoverField.multiFields', { + defaultMessage: 'Multi fields', + })} + +
- + {field ? ( + + ) : ( +   + )} {isCollapsible && ( )} {displayUnderscoreWarning && } + {field ? null :
{key}: 
}