From e58392bbe51ea94ca544a07c2e6c55db759865b5 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 18 Jan 2022 09:00:45 +0100 Subject: [PATCH 1/3] Fix document explorer cell popover rendering --- .../get_render_cell_value.test.tsx | 17 +- .../discover_grid/get_render_cell_value.tsx | 197 ++++++++++-------- 2 files changed, 122 insertions(+), 92 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx index a102622402d026..f0f049e643abc7 100644 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx @@ -514,13 +514,16 @@ describe('Discover grid cell rendering', function () { /> ); expect(component).toMatchInlineSnapshot(` - - { - "object.value": [ - 100 - ] - } - + `); }); diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx index 2a573bdb2415ef..da1664d65be14f 100644 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx @@ -7,12 +7,12 @@ */ import React, { Fragment, useContext, useEffect } from 'react'; +import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey'; import { euiLightVars as themeLight, euiDarkVars as themeDark, } from '@kbn/ui-shared-deps-src/theme'; -import type { DataView } from 'src/plugins/data/common'; - +import type { DataView, DataViewField } from 'src/plugins/data/common'; import { EuiDataGridCellValueElementProps, EuiDescriptionList, @@ -67,89 +67,35 @@ export const getRenderCellValueFn = return -; } - if ( + /** + * when using the fields api this code is used to show top level objects + * this is used for legacy stuff like displaying products of our ecommerce dataset + */ + const useTopLevelObjectColumns = Boolean( useNewFieldsApi && - !field && - row && - row.fields && - !(row.fields as Record)[columnId] - ) { - const innerColumns = Object.fromEntries( - Object.entries(row.fields as Record).filter(([key]) => { - return key.indexOf(`${columnId}.`) === 0; - }) - ); - if (isDetails) { - // nicely formatted JSON for the expanded view - return {JSON.stringify(innerColumns, null, 2)}; - } - - // Put the most important fields first - const highlights: Record = (row.highlight as Record) ?? {}; - const highlightPairs: Array<[string, string]> = []; - const sourcePairs: Array<[string, string]> = []; - Object.entries(innerColumns).forEach(([key, values]) => { - const subField = indexPattern.getFieldByName(key); - const displayKey = indexPattern.fields.getByName - ? indexPattern.fields.getByName(key)?.displayName - : undefined; - const formatter = subField - ? indexPattern.getFormatterForField(subField) - : { convert: (v: unknown, ...rest: unknown[]) => String(v) }; - const formatted = (values as unknown[]) - .map((val: unknown) => - formatter.convert(val, 'html', { - field: subField, - hit: row, - indexPattern, - }) - ) - .join(', '); - const pairs = highlights[key] ? highlightPairs : sourcePairs; - if (displayKey) { - if (fieldsToShow.includes(displayKey)) { - pairs.push([displayKey, formatted]); - } - } else { - pairs.push([key, formatted]); - } - }); - - return ( - // If you change the styling of this list (specifically something that will change the line-height) - // make sure to adjust the img overwrites attached to dscDiscoverGrid__descriptionListDescription - // in discover_grid.scss - - {[...highlightPairs, ...sourcePairs] - .slice(0, maxDocFieldsDisplayed) - .map(([key, value]) => ( - - {key} - - - ))} - - ); - } + !field && + row?.fields && + !(row.fields as Record)[columnId] + ); - if (typeof rowFlattened[columnId] === 'object' && isDetails) { - return ( - } - width={defaultMonacoEditorWidth} - /> + if (isDetails) { + return renderPopoverContent( + row, + rowFlattened, + field, + columnId, + indexPattern, + useTopLevelObjectColumns ); } - if (field && field.type === '_source') { - if (isDetails) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - return ; - } - const pairs = formatHit(row, indexPattern, fieldsToShow); + if (field?.type === '_source' || useTopLevelObjectColumns) { + const pairs = useTopLevelObjectColumns + ? getTopLevelObjectPairs(row, columnId, indexPattern, fieldsToShow).slice( + 0, + maxDocFieldsDisplayed + ) + : formatHit(row, indexPattern, fieldsToShow); return ( @@ -167,11 +113,6 @@ export const getRenderCellValueFn = } if (!field?.type && rowFlattened && typeof rowFlattened[columnId] === 'object') { - if (isDetails) { - // nicely formatted JSON for the expanded view - return {JSON.stringify(rowFlattened[columnId], null, 2)}; - } - return {JSON.stringify(rowFlattened[columnId])}; } @@ -185,3 +126,89 @@ export const getRenderCellValueFn = /> ); }; + +/** + * Helper function to show top level objects + * this is used for legacy stuff like displaying products of our ecommerce dataset + */ +function getInnerColumns(fields: Record, columnId: string) { + return Object.fromEntries( + Object.entries(fields).filter(([key]) => { + return key.indexOf(`${columnId}.`) === 0; + }) + ); +} + +/** + * Helper function for the cell popover + */ +function renderPopoverContent( + rowRaw: estypes.SearchHit, + rowFlattened: Record, + field: DataViewField | undefined, + columnId: string, + dataView: DataView, + useTopLevelObjectColumns: boolean +) { + if (useTopLevelObjectColumns || field?.type === '_source') { + const json = useTopLevelObjectColumns + ? getInnerColumns(rowRaw.fields as Record, columnId) + : rowRaw; + return ( + } width={defaultMonacoEditorWidth} /> + ); + } + + return ( + + ); +} +/** + * Helper function to show top level objects + * this is used for legacy stuff like displaying products of our ecommerce dataset + */ +function getTopLevelObjectPairs( + row: estypes.SearchHit, + columnId: string, + dataView: DataView, + fieldsToShow: string[] +) { + const innerColumns = getInnerColumns(row.fields as Record, columnId); + // Put the most important fields first + const highlights: Record = (row.highlight as Record) ?? {}; + const highlightPairs: Array<[string, string]> = []; + const sourcePairs: Array<[string, string]> = []; + Object.entries(innerColumns).forEach(([key, values]) => { + const subField = dataView.getFieldByName(key); + const displayKey = dataView.fields.getByName + ? dataView.fields.getByName(key)?.displayName + : undefined; + const formatter = subField + ? dataView.getFormatterForField(subField) + : { convert: (v: unknown, ...rest: unknown[]) => String(v) }; + const formatted = (values as unknown[]) + .map((val: unknown) => + formatter.convert(val, 'html', { + field: subField, + hit: row, + indexPattern: dataView, + }) + ) + .join(', '); + const pairs = highlights[key] ? highlightPairs : sourcePairs; + if (displayKey) { + if (fieldsToShow.includes(displayKey)) { + pairs.push([displayKey, formatted]); + } + } else { + pairs.push([key, formatted]); + } + }); + return [...highlightPairs, ...sourcePairs]; +} From bad3a81e8170c041b2c9429e32dcfc28cc77b0c2 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 25 Jan 2022 09:45:47 +0100 Subject: [PATCH 2/3] Add test --- .../get_render_cell_value.test.tsx | 69 ++++++++++++++++--- 1 file changed, 60 insertions(+), 9 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx index 9fc8e1d9c839bc..07ed170258fb11 100644 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx @@ -96,6 +96,50 @@ describe('Discover grid cell rendering', function () { expect(component.html()).toMatchInlineSnapshot(`"100"`); }); + it('renders bytes column correctly using _source when details is true', () => { + const DiscoverGridCellValue = getRenderCellValueFn( + indexPatternMock, + rowsSource, + rowsSource.map(flatten), + false, + [], + 100 + ); + const component = shallow( + + ); + expect(component.html()).toMatchInlineSnapshot(`"100"`); + }); + + it('renders bytes column correctly using fields when details is true', () => { + const DiscoverGridCellValue = getRenderCellValueFn( + indexPatternMock, + rowsFields, + rowsFields.map(flatten), + false, + [], + 100 + ); + const component = shallow( + + ); + expect(component.html()).toMatchInlineSnapshot(`"100"`); + }); + it('renders _source column correctly', () => { const DiscoverGridCellValue = getRenderCellValueFn( indexPatternMock, @@ -637,9 +681,15 @@ describe('Discover grid cell rendering', function () { /> ); expect(component).toMatchInlineSnapshot(` - - .gz - + `); const componentWithDetails = shallow( @@ -653,13 +703,14 @@ describe('Discover grid cell rendering', function () { /> ); expect(componentWithDetails).toMatchInlineSnapshot(` - `); }); From b9acf423fc705d93366bb66bda3655537b444e38 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 25 Jan 2022 12:58:59 +0100 Subject: [PATCH 3/3] Fix imports --- .../components/discover_grid/get_render_cell_value.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx index d1c99a9ad5ec2a..5e1a1a7e39db87 100644 --- a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx +++ b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx @@ -7,11 +7,7 @@ */ import React, { Fragment, useContext, useEffect } from 'react'; -import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey'; -import { - euiLightVars as themeLight, - euiDarkVars as themeDark, -} from '@kbn/ui-shared-deps-src/theme'; +import { euiLightVars as themeLight, euiDarkVars as themeDark } from '@kbn/ui-theme'; import type { DataView, DataViewField } from 'src/plugins/data/common'; import { EuiDataGridCellValueElementProps, @@ -139,7 +135,7 @@ function getInnerColumns(fields: Record, columnId: string) { * Helper function for the cell popover */ function renderPopoverContent( - rowRaw: estypes.SearchHit, + rowRaw: ElasticSearchHit, rowFlattened: Record, field: DataViewField | undefined, columnId: string, @@ -170,7 +166,7 @@ function renderPopoverContent( * this is used for legacy stuff like displaying products of our ecommerce dataset */ function getTopLevelObjectPairs( - row: estypes.SearchHit, + row: ElasticSearchHit, columnId: string, dataView: DataView, fieldsToShow: string[]