import './expanded_row_details_pane.scss' ; import React , { Fragment , FC , ReactElement } from 'react' ; import { EuiBasicTable , EuiFlexGroup , EuiFlexItem , EuiTitle , EuiSpacer } from '@elastic/eui' ; export interface SectionItem { title : string ; description : string | ReactElement ; } export interface SectionConfig { title : string ; position : 'left' | 'right' ; items : SectionItem [ ] ; dataTestSubj : string ; } interface SectionProps { section : SectionConfig ; } export const Section = ( { section } ) => { if ( section . items . length === 0 ) { return null ; } const columns = [ { field : 'title' , name : '' , render : ( v ) => < strong > { v } < /strong>, } , { field : 'description' , name : '' , render : ( v ) => < > { v } < />, } , ] ; return ( < div data - test - subj = { section . dataTestSubj } > < EuiTitle size = "xs" > < span > { section . title } < /span> < /EuiTitle> < EuiBasicTable < SectionItem > compressed items = { section . items } columns = { columns } tableCaption = { section . title } tableLayout = "auto" className = "mlExpandedRowDetailsSection" data - test - subj = { `${ section . dataTestSubj }-table` } /> < /div>); } ; interface ExpandedRowDetailsPaneProps { sections : SectionConfig [ ] ; dataTestSubj : string ; } export const ExpandedRowDetailsPane = ( { sections , dataTestSubj , } ) => { return ( < EuiFlexGroup className = "mlExpandedRowDetails" data - test - subj = { dataTestSubj } > < EuiFlexItem style = { { width : '50%' } } > { sections . filter ( ( s ) => s . position === 'left' ) . map ( ( s ) => ( < Fragment key = { s . title } > < EuiSpacer size = "s" / > < Section section = { s } / > < /Fragment>))} < /EuiFlexItem> < EuiFlexItem style = { { width : '50%' } } > { sections . filter ( ( s ) => s . position === 'right' ) . map ( ( s ) => ( < Fragment key = { s . title } > < EuiSpacer size = "s" / > < Section section = { s } / > < /Fragment>))} < /EuiFlexItem> < /EuiFlexGroup>); } ;