26 lines
757 B
TypeScript
26 lines
757 B
TypeScript
|
import { Badge } from '@cameleer/design-system';
|
||
|
|
import type { AlertDto } from '../api/queries/alerts';
|
||
|
|
|
||
|
|
type State = NonNullable<AlertDto['state']>;
|
||
|
|
|
||
|
|
const LABELS: Record<State, string> = {
|
||
|
|
PENDING: 'Pending',
|
||
|
|
FIRING: 'Firing',
|
||
|
|
RESOLVED: 'Resolved',
|
||
|
|
};
|
||
|
|
|
||
|
|
const COLORS: Record<State, 'auto' | 'success' | 'warning' | 'error'> = {
|
||
|
|
PENDING: 'warning',
|
||
|
|
FIRING: 'error',
|
||
|
|
RESOLVED: 'success',
|
||
|
|
};
|
||
|
|
|
||
|
|
export function AlertStateChip({ state, silenced }: { state: State; silenced?: boolean }) {
|
||
|
|
return (
|
||
|
|
<span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
|
||
|
|
<Badge label={LABELS[state]} color={COLORS[state]} variant="filled" />
|
||
|
|
{silenced && <Badge label="Silenced" color="auto" variant="outlined" />}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|