import React , { FunctionComponent } from 'react' ; import { EuiFlexGrid , EuiFlexItem , EuiCard , EuiStat } from '@elastic/eui' ; import { DataType , formatNumber , Metric } from '../lib' ; const MetricCardFooter = ( { title , description } ) => { return ( < EuiStat data - test - subj = "serverMetricMeta" title = { title } titleSize = "xxs" description = { description } reverse / > ) ; } ; const DelayMetricTile = ( { metric } ) => { const { name , meta } = metric ; return ( < EuiCard data - test - subj = { `serverMetric-${ formatMetricId ( name ) }` } title = { formatMetric ( metric ) } textAlign = "left" description = { `${ name } avg` } footer = { meta ?. value && ( < MetricCardFooter title = { formatDelayFooterTitle ( meta . value , meta . type ) } description = { meta . description } / > ) } />); } ; const LoadMetricTile = ( { metric } ) => { const { name , meta } = metric ; return ( < EuiCard data - test - subj = { `serverMetric-${ formatMetricId ( name ) }` } title = { formatMetric ( metric ) } textAlign = "left" description = { name } footer = { meta && < MetricCardFooter title = { meta . title } description = { meta . description } / > } />); } ; const ResponseTimeMetric = ( { metric } ) => { const { name , meta } = metric ; return ( < EuiCard data - test - subj = { `serverMetric-${ formatMetricId ( name ) }` } title = { formatMetric ( metric ) } textAlign = "left" description = { name } footer = { meta ?. value && Array . isArray ( meta . value ) && ( < MetricCardFooter title = { formatNumber ( meta . value [ 0 ] , meta . type ) } description = { meta . description } / > ) } />); } ; export const MetricTile = ( { metric } ) => { const { name } = metric ; switch ( name ) { case 'Delay' : return < DelayMetricTile metric = { metric } />; case 'Load' : return < LoadMetricTile metric = { metric } />; case 'Response time avg' : return < ResponseTimeMetric metric = { metric } />; default : return ( < EuiCard data - test - subj = { `serverMetric-${ formatMetricId ( name ) }` } textAlign = "left" 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 , '-' ) ; } ; const formatDelayFooterTitle = ( values , type ? ) => { return `
  50: ${ formatNumber ( values [ 0 ] , type ) };
  95: ${ formatNumber ( values [ 1 ] , type ) };
  99: ${ formatNumber ( values [ 2 ] , type ) }` ; } ;