import React , { useState } from 'react' ; import { escapeRegExp } from 'lodash' ; import { DocViewTableRow } from './table_row' ; import { arrayContainsObjects , trimAngularSpan } from './table_helper' ; import { DocViewRenderProps } from '../../doc_views/doc_views_types' ; const COLLAPSE_LINE_LENGTH = 350 ; export function DocViewTable ( { hit , indexPattern , filter , columns , onAddColumn , onRemoveColumn , } ) { const mapping = indexPattern . fields . getByName ; const flattened = indexPattern . flattenHit ( hit ) ; const formatted = indexPattern . formatHit ( hit , 'html' ) ; const [ fieldRowOpen , setFieldRowOpen ] = useState ( { } as Record < string , boolean > ) ; function toggleValueCollapse ( field ) { fieldRowOpen [ field ] = fieldRowOpen [ field ] !== true ; setFieldRowOpen ( { ... fieldRowOpen } ) ; } return ( < table className = "table table-condensed osdDocViewerTable" > < tbody > { Object . keys ( flattened ) . sort ( ) . map ( ( field ) => { const valueRaw = flattened [ field ] ; const value = trimAngularSpan ( String ( formatted [ field ] ) ) ; const isCollapsible = value . length > COLLAPSE_LINE_LENGTH ; const isCollapsed = isCollapsible && ! fieldRowOpen [ field ] ; const toggleColumn = onRemoveColumn && onAddColumn && Array . isArray ( columns ) ? ( ) => { if ( columns . includes ( field ) ) { onRemoveColumn ( field ) ; } else { onAddColumn ( field ) ; } } : undefined ; const isArrayOfObjects = Array . isArray ( flattened [ field ] ) && arrayContainsObjects ( flattened [ field ] ) ; const displayUnderscoreWarning = ! mapping ( field ) && field . indexOf ( '_' ) === 0 ; const displayNoMappingWarning = ! mapping ( field ) && ! displayUnderscoreWarning && ! isArrayOfObjects ; const isNestedField = ! indexPattern . fields . getByName ( field ) && ! ! indexPattern . fields . getAll ( ) . find ( ( patternField ) => { const nestedRootRegex = new RegExp ( escapeRegExp ( field ) + '(\\.|$)' ) ; return nestedRootRegex . test ( patternField . subType ?. nested ?. path ?? '' ) ; } ) ; const fieldType = isNestedField ? 'nested' : indexPattern . fields . getByName ( field ) ?. type ; return ( < DocViewTableRow key = { field } field = { field } fieldMapping = { mapping ( field ) } fieldType = { String ( fieldType ) } displayUnderscoreWarning = { displayUnderscoreWarning } displayNoMappingWarning = { displayNoMappingWarning } isCollapsed = { isCollapsed } isCollapsible = { isCollapsible } isColumnActive = { Array . isArray ( columns ) && columns . includes ( field ) } onFilter = { filter } onToggleCollapse = { ( ) => toggleValueCollapse ( field ) } onToggleColumn = { toggleColumn } value = { value } valueRaw = { valueRaw } / > ) ; } ) } < /tbody> < /table>); }