mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
PanelChrome: Allow hovering on description when status error is visible (#61757)
This commit is contained in:
parent
c5c34ed95e
commit
29f8722c91
@ -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',
|
||||||
|
@ -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 || ''}
|
||||||
/>
|
/>
|
||||||
|
Loading…
Reference in New Issue
Block a user