import React from 'react' ; import { i18n } from '@kbn/i18n' ; import { EuiToolTip , EuiBadge } from '@elastic/eui' ; import { statusCodes } from './status_codes' ; import { httpStatusCodeToColor } from '../../../../utils/httpStatusCodeToColor' ; interface HttpStatusBadgeProps { status : number ; } export function HttpStatusBadge ( { status } ) { const label = i18n . translate ( 'xpack.apm.transactionDetails.statusCode' , { defaultMessage : 'Status code' , } ) ; return ( < EuiToolTip content = { label } > < EuiBadge color = { httpStatusCodeToColor ( status ) || 'default' } > { status } { statusCodes [ status . toString ( ) ] } < /EuiBadge> < /EuiToolTip>); }