[Logs UI] Fix rendering of complex field column values (#44906)

This fixes the rendering of complex field values like lat-lon geo points.

The rendering amounts to converting the value a JSON representation with stable sorting. The cleaner way forward would be to add support for rendering well-known complex values (such as geo coordinates or IP addresses) in nicer ways.

fixes #44747
This commit is contained in:
Felix Stürmer 2019-09-09 15:36:54 +02:00 committed by GitHub
parent 63868a1a07
commit c06e1a6097
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 1 deletions

View file

@ -40,6 +40,32 @@ describe('LogEntryFieldColumn', () => {
])
).toBe(true);
});
it('should output a text representation of a passed complex value', () => {
const column: LogEntryColumn = {
columnId: 'TEST_COLUMN',
field: 'TEST_FIELD',
value: JSON.stringify({
lat: 1,
lon: 2,
}),
};
const component = mount(
<LogEntryFieldColumn
columnValue={column}
highlights={[]}
isActiveHighlight={false}
isHighlighted={false}
isHovered={false}
isWrapped={false}
/>,
{ wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
);
expect(component.text()).toEqual('{"lat":1,"lon":2}');
});
it('should output just text when passed a non-Array', () => {
const column: LogEntryColumn = {
columnId: 'TEST_COLUMN',

View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import stringify from 'json-stable-stringify';
import { darken, transparentize } from 'polished';
import React, { useMemo } from 'react';
@ -51,7 +52,7 @@ export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnPro
</ul>
) : (
highlightFieldValue(
value,
typeof value === 'object' && value != null ? stringify(value) : value,
isHighlightFieldColumn(firstHighlight) ? firstHighlight.highlights : [],
isActiveHighlight ? ActiveHighlightMarker : HighlightMarker
)