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

Alerting: Prevent state badge from wrapping (#82330)

Browse Source
This commit is contained in:
Gilles De Mey 2024-02-14 12:12:05 +01:00 committed by GitHub
parent 92eb2c900e
commit f6ea39ff00
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
public/app/features/alerting/unified/components/rule-viewer/v2/StateBadges.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { ReactNode } from 'react';
import { Stack, Text } from '@grafana/ui'; import { Stack, Text } from '@grafana/ui';
import { RuleHealth } from 'app/types/unified-alerting'; import { RuleHealth } from 'app/types/unified-alerting';
@ -18,14 +18,7 @@ export const RecordingBadge = ({ health }: RecordingBadgeProps) => {
const color = hasError ? 'error' : 'success'; const color = hasError ? 'error' : 'success';
const text = hasError ? 'Recording error' : 'Recording'; const text = hasError ? 'Recording error' : 'Recording';
return ( return <Badge color={color} text={text} />;
<Stack direction="row" gap={0.5}>
<AlertStateDot color={color} />
<Text variant="bodySmall" color={color}>
{text}
</Text>
</Stack>
);
}; };
// we're making a distinction here between the "state" of the rule and its "health". // we're making a distinction here between the "state" of the rule and its "health".
@ -36,7 +29,7 @@ interface StateBadgeProps {
export const StateBadge = ({ state, health }: StateBadgeProps) => { export const StateBadge = ({ state, health }: StateBadgeProps) => {
let stateLabel: string; let stateLabel: string;
let color: 'success' | 'error' | 'warning'; let color: BadgeColor;
switch (state) { switch (state) {
case PromAlertingRuleState.Inactive: case PromAlertingRuleState.Inactive:
@ -64,12 +57,24 @@ export const StateBadge = ({ state, health }: StateBadgeProps) => {
stateLabel = 'No data'; stateLabel = 'No data';
} }
return <Badge color={color} text={stateLabel} />;
};
// the generic badge component
type BadgeColor = 'success' | 'error' | 'warning';
interface BadgeProps {
color: BadgeColor;
text: NonNullable<ReactNode>;
}
function Badge({ color, text }: BadgeProps) {
return ( return (
<Stack direction="row" gap={0.5}> <Stack direction="row" gap={0.5} wrap={'nowrap'} flex={'0 0 auto'}>
<AlertStateDot color={color} /> <AlertStateDot color={color} />
<Text variant="bodySmall" color={color}> <Text variant="bodySmall" color={color}>
{stateLabel} {text}
</Text> </Text>
</Stack> </Stack>
); );
}; }