import React , { FunctionComponent } from 'react' ; import { EuiFlexGrid , EuiFlexItem , EuiCard } from '@elastic/eui' ; import { formatNumber , Metric } from '../lib' ; export const MetricTile = ( { metric } ) => { const { name } = metric ; return ( < EuiCard data - test - subj = { `serverMetric-${ formatMetricId ( metric ) }` } layout = "horizontal" title = { formatMetric ( metric ) } description = { name } / > ) ; } ; export const MetricTiles = ( { metrics } ) => ( < EuiFlexGrid columns = { 3 } > { metrics . map ( ( metric ) => ( < EuiFlexItem key = { metric . name } data - test - subj = "serverMetric" > < MetricTile metric = { metric } / > < /EuiFlexItem>))} < /EuiFlexGrid>); const formatMetric = ( { value , type } ) => { const metrics = Array . isArray ( value ) ? value : [ value ] ; return metrics . map ( ( metric ) => formatNumber ( metric , type ) ) . join ( ', ' ) ; } ; const formatMetricId = ( { name } ) => { return name . toLowerCase ( ) . replace ( /[ ]+/g , '-' ) ; } ;