opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-02 06:32:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Table panel: Add multiple data links support to Default, Image and JSONView cells (#51162)

Browse Source 
* Table panel: Support multiple data links in default cell

* Table panel: Show data links for Image and JSONView cells

* Simplify DataLinksContextMenu api

* Betterer
This commit is contained in:
Dominik Prokop
2022-06-27 14:23:29 +02:00
committed by GitHub
parent 4a397c9c24
commit b2b0be7b93
13 changed files with 87 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/grafana-ui/src/components/Table/DefaultCell.tsx
View File

@ -1,9 +1,11 @@
import { cx } from '@emotion/css';
import React, { FC, ReactElement } from 'react';
import tinycolor from 'tinycolor2';
import { DisplayValue, Field, formattedValueToString } from '@grafana/data';
import { getTextColorForBackground, getCellLinks } from '../../utils';
import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
import { CellActions } from './CellActions';
import { TableStyles } from './styles';
@ -26,16 +28,24 @@ export const DefaultCell: FC<TableCellProps> = (props) => {
const showActions = (showFilters && cell.value !== undefined) || inspectEnabled;
const cellStyle = getCellStyle(tableStyles, field, displayValue, inspectEnabled);
const { link, onClick } = getCellLinks(field, row);
const hasLinks = Boolean(getCellLinks(field, row)?.length);
return (
<div {...cellProps} className={cellStyle}>
{!link && <div className={tableStyles.cellText}>{value}</div>}
{link && (
<a href={link.href} onClick={onClick} target={link.target} title={link.title} className={tableStyles.cellLink}>
{value}
</a>
{!hasLinks && <div className={tableStyles.cellText}>{value}</div>}
{hasLinks && (
<DataLinksContextMenu links={() => getCellLinks(field, row) || []}>
{(api) => {
return (
<div onClick={api.openMenu} className={cx(tableStyles.cellLink, api.targetClassName)}>
{value}
</div>
);
}}
</DataLinksContextMenu>
)}
{showActions && <CellActions {...props} previewMode="text" />}
</div>
);