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

SharePanelInternally: Number inputs fix (#98270)

Browse Source
This commit is contained in:
Juan Cabanas 2024-12-20 09:36:54 -03:00 committed by GitHub
parent e0e4e1cdff
commit 833f5d5d22
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/app/features/dashboard-scene/sharing/panel-share/SharePanelPreview.tsx
View File

@ -50,8 +50,13 @@ export function SharePanelPreview({ title, imageUrl, buildUrl, disabled, theme }
buildUrl({ width: watch('width'), height: watch('height'), scale: watch('scaleFactor') }); buildUrl({ width: watch('width'), height: watch('height'), scale: watch('scaleFactor') });
}, [buildUrl, watch]); }, [buildUrl, watch]);
const [{ loading, value: image, error }, renderImage] = useAsyncFn(async () => { const [{ loading, value: image, error }, renderImage] = useAsyncFn(async (imageUrl) => {
const { width, height, scaleFactor } = watch(); const response = await lastValueFrom(getBackendSrv().fetch<BlobPart>({ url: imageUrl, responseType: 'blob' }));
return new Blob([response.data], { type: 'image/png' });
}, []);
const onRenderImageClick = async (data: ImageSettingsForm) => {
const { width, height, scaleFactor } = data;
DashboardInteractions.generatePanelImageClicked({ DashboardInteractions.generatePanelImageClicked({
width, width,
height, height,
@ -59,9 +64,9 @@ export function SharePanelPreview({ title, imageUrl, buildUrl, disabled, theme }
theme, theme,
shareResource: 'panel', shareResource: 'panel',
}); });
const response = await lastValueFrom(getBackendSrv().fetch<BlobPart>({ url: imageUrl, responseType: 'blob' }));
return new Blob([response.data], { type: 'image/png' }); await renderImage(imageUrl);
}, [imageUrl, watch('width'), watch('height'), watch('scaleFactor'), theme]); };
const onDownloadImageClick = () => { const onDownloadImageClick = () => {
DashboardInteractions.downloadPanelImageClicked({ shareResource: 'panel' }); DashboardInteractions.downloadPanelImageClicked({ shareResource: 'panel' });
@ -78,7 +83,7 @@ export function SharePanelPreview({ title, imageUrl, buildUrl, disabled, theme }
<Text element="h4"> <Text element="h4">
<Trans i18nKey="share-panel-image.preview.title">Panel preview</Trans> <Trans i18nKey="share-panel-image.preview.title">Panel preview</Trans>
</Text> </Text>
<form onSubmit={handleSubmit(renderImage)}> <form onSubmit={handleSubmit(onRenderImageClick)}>
<FieldSet <FieldSet
disabled={!config.rendererAvailable} disabled={!config.rendererAvailable}
label={ label={
@ -112,6 +117,7 @@ export function SharePanelPreview({ title, imageUrl, buildUrl, disabled, theme }
value: 1, value: 1,
message: t('share-panel-image.settings.width-min', 'Width must be equal or greater than 1'), message: t('share-panel-image.settings.width-min', 'Width must be equal or greater than 1'),
}, },
valueAsNumber: true,
onChange: onChange, onChange: onChange,
})} })}
placeholder={t('share-panel-image.settings.width-placeholder', '1000')} placeholder={t('share-panel-image.settings.width-placeholder', '1000')}
@ -134,6 +140,7 @@ export function SharePanelPreview({ title, imageUrl, buildUrl, disabled, theme }
value: 1, value: 1,
message: t('share-panel-image.settings.height-min', 'Height must be equal or greater than 1'), message: t('share-panel-image.settings.height-min', 'Height must be equal or greater than 1'),
}, },
valueAsNumber: true,
onChange: onChange, onChange: onChange,
})} })}
placeholder={t('share-panel-image.settings.height-placeholder', '500')} placeholder={t('share-panel-image.settings.height-placeholder', '500')}
@ -159,6 +166,7 @@ export function SharePanelPreview({ title, imageUrl, buildUrl, disabled, theme }
'Scale factor must be equal or greater than 1' 'Scale factor must be equal or greater than 1'
), ),
}, },
valueAsNumber: true,
onChange: onChange, onChange: onChange,
})} })}
placeholder={t('share-panel-image.settings.scale-factor-placeholder', '1')} placeholder={t('share-panel-image.settings.scale-factor-placeholder', '1')}