import React , { Fragment } from 'react' ; import { EuiForm , EuiPanel , EuiSpacer } from '@elastic/eui' ; import { AggName } from '../../../../../../common/types/aggregations' ; import { PivotAggsConfigDict } from '../../../../common' ; export interface AggListSummaryProps { list : PivotAggsConfigDict ; } export const AggListSummary = ( { list } ) => { const aggNames = Object . keys ( list ) ; return ( < EuiForm > { aggNames . map ( ( aggName ) => ( < Fragment key = { aggName } > < EuiPanel paddingSize = "s" > < div className = "eui-textTruncate" > { aggName } < /div> < /EuiPanel> { aggNames . length > 0 && < EuiSpacer size = "s" />} < /Fragment>))} < /EuiForm>); } ;