IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Update alert state tag to display Paused as its own "state"

Browse Source
This commit is contained in:
Tom Ratcliffe
2024-03-25 18:22:17 +00:00
committed by Tom Ratcliffe
parent a881e7e404
commit 93fd11fe86
1 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/app/features/alerting/unified/components/rules/AlertStateTag.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { AlertState } from '@grafana/data'; import { AlertState } from '@grafana/data';
import { Tag, Tooltip } from '@grafana/ui';
import { GrafanaAlertState, GrafanaAlertStateWithReason, PromAlertingRuleState } from 'app/types/unified-alerting-dto'; import { GrafanaAlertState, GrafanaAlertStateWithReason, PromAlertingRuleState } from 'app/types/unified-alerting-dto';
import { alertStateToReadable, alertStateToState } from '../../utils/rules'; import { alertStateToReadable, alertStateToState } from '../../utils/rules';
@@ -12,9 +13,18 @@ interface Props {
muted?: boolean; muted?: boolean;
} }
export const AlertStateTag = React.memo(({ state, isPaused = false, size = 'md', muted = false }: Props) => ( export const AlertStateTag = React.memo(({ state, isPaused = false, size = 'md', muted = false }: Props) => {
<StateTag state={alertStateToState(state)} size={size} muted={muted}> if (isPaused) {
{alertStateToReadable(state)} {isPaused ? ' (Paused)' : ''} return (
</StateTag> <Tooltip content={'Alert evaluation is currently paused'} placement="top">
)); <Tag icon="pause" name="Paused" colorIndex={1} />
</Tooltip>
);
}
return (
<StateTag state={alertStateToState(state)} size={size} muted={muted}>
{alertStateToReadable(state)}
</StateTag>
);
});
AlertStateTag.displayName = 'AlertStateTag'; AlertStateTag.displayName = 'AlertStateTag';