import React from 'react' ; import { EuiBadge , EuiToolTip } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { EventOutcome } from '../../../../../../../typings/es_schemas/raw/fields/event_outcome' ; import { useTheme } from '../../../../../../hooks/use_theme' ; import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common' ; const ResetLineHeight = euiStyled . span `
  line-height: initial;
` ; export function FailureBadge ( { outcome } ) { const theme = useTheme ( ) ; if ( outcome !== 'failure' ) { return null ; } return ( < ResetLineHeight > < EuiToolTip content = { i18n . translate ( 'xpack.apm.failure_badge.tooltip' , { defaultMessage : 'event.outcome = failure' , } ) } > < EuiBadge color = { theme . eui . euiColorDanger } > failure < /EuiBadge> < /EuiToolTip> < /ResetLineHeight>); }