root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 169 Packages Projects Releases Wiki Activity

Table: Add some error-case handling to ImageCell (#110461)

This commit is contained in:
Paul Marbach 2025-10-07 11:13:51 -04:00 committed by GitHub
parent 7d1c6b6bd2
commit 6f70cf5e00
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/grafana-ui/src/components/Table/TableNG/Cells/ImageCell.tsx
View File

@ -1,17 +1,23 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { useState } from 'react';
import { TableCellDisplayMode } from '../../types'; import { TableCellDisplayMode } from '../../types';
import { MaybeWrapWithLink } from '../components/MaybeWrapWithLink'; import { MaybeWrapWithLink } from '../components/MaybeWrapWithLink';
import { ImageCellProps, TableCellStyles } from '../types'; import { ImageCellProps, TableCellStyles } from '../types';
export const ImageCell = ({ cellOptions, field, value, rowIdx }: ImageCellProps) => { export const ImageCell = ({ cellOptions, field, value, rowIdx }: ImageCellProps) => {
const [error, setError] = useState(false);
const { text } = field.display!(value); const { text } = field.display!(value);
const { alt, title } = const { alt, title } =
cellOptions.type === TableCellDisplayMode.Image ? cellOptions : { alt: undefined, title: undefined }; cellOptions.type === TableCellDisplayMode.Image ? cellOptions : { alt: undefined, title: undefined };
if (!text) {
return null;
}
return ( return (
<MaybeWrapWithLink field={field} rowIdx={rowIdx}> <MaybeWrapWithLink field={field} rowIdx={rowIdx}>
<img alt={alt} src={text} title={title} /> {error ? text : <img alt={alt} src={text} title={title} onError={() => setError(true)} />}
</MaybeWrapWithLink> </MaybeWrapWithLink>
); );
}; };