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

Add interactive mode to the Badge component

Browse Source
This commit is contained in:
Konrad Lalik 2024-01-05 14:10:51 +01:00
parent 47b986606e
commit 9558743fc7
2 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/grafana-ui/src/components/Badge/Badge.tsx
View File

@ -18,25 +18,28 @@ export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
color: BadgeColor;
icon?: IconName;
tooltip?: string;
interactive?: boolean;
}
const BadgeComponent = React.memo<BadgeProps>(({ icon, color, text, tooltip, className, ...otherProps }) => {
const styles = useStyles2(getStyles, color);
const badge = (
<div className={cx(styles.wrapper, className)} {...otherProps}>
{icon && <Icon name={icon} size="sm" />}
{text}
</div>
);
const BadgeComponent = React.memo<BadgeProps>(
({ icon, color, text, tooltip, interactive, className, ...otherProps }) => {
const styles = useStyles2(getStyles, color);
const badge = (
<div className={cx(styles.wrapper, className)} {...otherProps}>
{icon && <Icon name={icon} size="sm" />}
{text}
</div>
);
return tooltip ? (
<Tooltip content={tooltip} placement="auto">
{badge}
</Tooltip>
) : (
badge
);
});
return tooltip ? (
<Tooltip content={tooltip} placement="auto" interactive={interactive}>
{badge}
</Tooltip>
) : (
badge
);
}
);
BadgeComponent.displayName = 'Badge';
const BadgeSkeleton: SkeletonComponent = ({ rootProps }) => {

19
public/app/features/alerting/unified/components/expressions/ExpressionStatusIndicator.tsx
View File

@ -17,16 +17,27 @@ export const ExpressionStatusIndicator = ({ error, warning, isCondition, onSetCo
const elements: JSX.Element[] = [];
if (error && isCondition) {
return <Badge color="red" icon="exclamation-circle" text="Alert condition" tooltip={error.message} />;
return <Badge color="red" icon="exclamation-circle" text="Alert condition" tooltip={error.message} interactive />;
} else if (error) {
elements.push(<Badge key="error" color="red" icon="exclamation-circle" text="Error" tooltip={error.message} />);
elements.push(
<Badge key="error" color="red" icon="exclamation-circle" text="Error" tooltip={error.message} interactive />
);
}
if (warning && isCondition) {
return <Badge color="orange" icon="exclamation-triangle" text="Alert condition" tooltip={warning.message} />;
return (
<Badge color="orange" icon="exclamation-triangle" text="Alert condition" tooltip={warning.message} interactive />
);
} else if (warning) {
elements.push(
<Badge key="warning" color="orange" icon="exclamation-triangle" text="Warning" tooltip={warning.message} />
<Badge
key="warning"
color="orange"
icon="exclamation-triangle"
text="Warning"
tooltip={warning.message}
interactive
/>
);
}