PanelChrome: Allow hovering on description when status error is visible (#61757)

This commit is contained in:
Ivan Ortega Alba 2023-01-19 14:01:36 +01:00 committed by GitHub
parent c5c34ed95e
commit 29f8722c91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 10 deletions

View File

@ -148,9 +148,7 @@ export function PanelChrome({
</div> </div>
{statusMessage && ( {statusMessage && (
<div className={styles.errorContainer}> <PanelStatus className={styles.errorContainer} message={statusMessage} onClick={statusMessageOnClick} />
<PanelStatus message={statusMessage} onClick={statusMessageOnClick} />
</div>
)} )}
</div> </div>
@ -270,10 +268,8 @@ const getStyles = (theme: GrafanaTheme2) => {
errorContainer: css({ errorContainer: css({
label: 'error-container', label: 'error-container',
position: 'absolute', position: 'absolute',
width: '100%', left: '50%',
display: 'flex', transform: 'translateX(-50%)',
alignItems: 'center',
justifyContent: 'center',
}), }),
rightAligned: css({ rightAligned: css({
label: 'right-aligned-container', label: 'right-aligned-container',

View File

@ -1,4 +1,4 @@
import { css } from '@emotion/css'; import { cx, css } from '@emotion/css';
import React from 'react'; import React from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
@ -7,18 +7,19 @@ import { useStyles2 } from '../../themes';
import { ToolbarButton } from '../ToolbarButton/ToolbarButton'; import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
export interface Props { export interface Props {
className?: string;
message?: string; message?: string;
onClick?: (e: React.SyntheticEvent) => void; onClick?: (e: React.SyntheticEvent) => void;
} }
export function PanelStatus({ message, onClick }: Props) { export function PanelStatus({ className, message, onClick }: Props) {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
return ( return (
<ToolbarButton <ToolbarButton
className={cx(className, styles.buttonStyles)}
onClick={onClick} onClick={onClick}
variant={'destructive'} variant={'destructive'}
className={styles.buttonStyles}
icon="exclamation-triangle" icon="exclamation-triangle"
tooltip={message || ''} tooltip={message || ''}
/> />