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; color: BadgeColor;
icon?: IconName; icon?: IconName;
tooltip?: string; tooltip?: string;
interactive?: boolean;
} }
const BadgeComponent = React.memo<BadgeProps>(({ icon, color, text, tooltip, className, ...otherProps }) => { const BadgeComponent = React.memo<BadgeProps>(
const styles = useStyles2(getStyles, color); ({ icon, color, text, tooltip, interactive, className, ...otherProps }) => {
const badge = ( const styles = useStyles2(getStyles, color);
<div className={cx(styles.wrapper, className)} {...otherProps}> const badge = (
{icon && <Icon name={icon} size="sm" />} <div className={cx(styles.wrapper, className)} {...otherProps}>
{text} {icon && <Icon name={icon} size="sm" />}
</div> {text}
); </div>
);
return tooltip ? ( return tooltip ? (
<Tooltip content={tooltip} placement="auto"> <Tooltip content={tooltip} placement="auto" interactive={interactive}>
{badge} {badge}
</Tooltip> </Tooltip>
) : ( ) : (
badge badge
); );
}); }
);
BadgeComponent.displayName = 'Badge'; BadgeComponent.displayName = 'Badge';
const BadgeSkeleton: SkeletonComponent = ({ rootProps }) => { 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[] = []; const elements: JSX.Element[] = [];
if (error && isCondition) { 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) { } 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) { 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) { } else if (warning) {
elements.push( 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
/>
); );
} }