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

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
View File

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

7
packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx
View File

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