diff --git a/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx b/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx index e33609d38ab..9c95a3a20a4 100644 --- a/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx +++ b/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { AlertState } from '@grafana/data'; +import { Tag, Tooltip } from '@grafana/ui'; import { GrafanaAlertState, GrafanaAlertStateWithReason, PromAlertingRuleState } from 'app/types/unified-alerting-dto'; import { alertStateToReadable, alertStateToState } from '../../utils/rules'; @@ -12,9 +13,18 @@ interface Props { muted?: boolean; } -export const AlertStateTag = React.memo(({ state, isPaused = false, size = 'md', muted = false }: Props) => ( - - {alertStateToReadable(state)} {isPaused ? ' (Paused)' : ''} - -)); +export const AlertStateTag = React.memo(({ state, isPaused = false, size = 'md', muted = false }: Props) => { + if (isPaused) { + return ( + + + + ); + } + return ( + + {alertStateToReadable(state)} + + ); +}); AlertStateTag.displayName = 'AlertStateTag';