62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { css } from '@emotion/css';
|
|
|
|
import { GrafanaTheme2 } from '@grafana/data';
|
|
import { Stack, useStyles2 } from '@grafana/ui';
|
|
|
|
interface DotStylesProps {
|
|
color: 'success' | 'error' | 'warning' | 'info';
|
|
includeState?: boolean;
|
|
}
|
|
|
|
const AlertStateDot = ({ color, includeState }: DotStylesProps) => {
|
|
const styles = useStyles2(getDotStyles, { color, includeState });
|
|
|
|
return (
|
|
<Stack direction="row" gap={0.5}>
|
|
<div className={styles.dot} />
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
const getDotStyles = (theme: GrafanaTheme2, props: DotStylesProps) => {
|
|
const size = theme.spacing(1.25);
|
|
const outlineSize = `calc(${size} / 2.5)`;
|
|
|
|
const errorStyle = props.color === 'error';
|
|
const successStyle = props.color === 'success';
|
|
const warningStyle = props.color === 'warning';
|
|
|
|
return {
|
|
dot: css(
|
|
{
|
|
width: size,
|
|
height: size,
|
|
|
|
// eslint-disable-next-line @grafana/no-border-radius-literal
|
|
borderRadius: '100%',
|
|
|
|
backgroundColor: theme.colors.secondary.main,
|
|
outline: `solid ${outlineSize} ${theme.colors.secondary.transparent}`,
|
|
margin: outlineSize,
|
|
},
|
|
successStyle &&
|
|
css({
|
|
backgroundColor: theme.colors.success.main,
|
|
outlineColor: theme.colors.success.transparent,
|
|
}),
|
|
warningStyle &&
|
|
css({
|
|
backgroundColor: theme.colors.warning.main,
|
|
outlineColor: theme.colors.warning.transparent,
|
|
}),
|
|
errorStyle &&
|
|
css({
|
|
backgroundColor: theme.colors.error.main,
|
|
outlineColor: theme.colors.error.transparent,
|
|
})
|
|
),
|
|
};
|
|
};
|
|
|
|
export { AlertStateDot };
|