import React from 'react' ; import { EuiBasicTable , EuiToolTip , EuiBadge } from '@elastic/eui' ; import { BreakdownItem } from '../../types' ; import { nsToPretty } from '../../lib' ; import { PercentageBadge } from '../percentage_badge' ; interface Props { breakdown : BreakdownItem [ ] ; } export const HighlightDetailsTable = ( { breakdown } ) => { const columns = [ { name : 'Description' , render : ( item ) => ( < EuiToolTip position = "left" content = { item . tip } > < span > { item . key } < /span> < /EuiToolTip>), } , { name : 'Time' , render : ( item ) => ( < EuiBadge style = { { backgroundColor : item . color } } > < span > { nsToPretty ( item . time , 1 ) } < /span> < /EuiBadge>), } , { name : 'Percentage' , render : ( item ) => ( < PercentageBadge timePercentage = { String ( item . relative ) } label = { item . relative + '%' } / > ) , } , ] ; return < EuiBasicTable items = { breakdown } columns = { columns } / > ; } ;