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: Show pointer when hovering cancel query button (#69391)

Browse Source
This commit is contained in:
kay delaney 2023-06-06 11:19:14 +01:00 committed by GitHub
parent 63adff0c6e
commit c1d3a2d81e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -140,7 +140,11 @@ export function PanelChrome({
{loadingState === LoadingState.Loading && onCancelQuery && (
<DelayRender delay={2000}>
<Tooltip content="Cancel query">
<TitleItem className={dragClassCancel} data-testid="panel-cancel-query" onClick={onCancelQuery}>
<TitleItem
className={cx(dragClassCancel, styles.pointer)}
data-testid="panel-cancel-query"
onClick={onCancelQuery}
>
<Icon name="sync-slash" size="md" />
</TitleItem>
</Tooltip>
@ -297,6 +301,9 @@ const getStyles = (theme: GrafanaTheme2) => {
display: 'flex',
alignItems: 'center',
}),
pointer: css({
cursor: 'pointer',
}),
streaming: css({
label: 'panel-streaming',
marginRight: 0,

9
packages/grafana-ui/src/utils/DelayRender.tsx
View File

@ -9,14 +9,11 @@ interface Props {
* Delay the rendering of the children by N amount of milliseconds
*/
export function DelayRender({ children, delay }: Props) {
const [shouldRender, setRender] = useState(false);
const [shouldRender, setShouldRender] = useState(false);
useEffect(() => {
const intervalId = setInterval(() => {
setRender(true);
window.setTimeout(() => {
setShouldRender(true);
}, delay);
return () => {
clearInterval(intervalId);
};
}, [children, delay]);
return <>{shouldRender ? children : null}</>;