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

TablePanel: Fix table cells overflowing when there are multiple data links (#65711)

Browse Source 
* Fix table cells overflowing when there are multiple data links
This commit is contained in:
Oscar Kilhed 2023-04-03 12:34:29 +02:00 committed by GitHub
parent d96b0a71d3
commit 06ea490cc2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import { TableCellBackgroundDisplayMode, TableCellOptions } from '@grafana/schem
import { useStyles2 } from '../../themes';
import { getCellLinks, getTextColorForAlphaBackground } from '../../utils';
import { Button, clearLinkButtonStyles } from '../Button';
import { clearLinkButtonStyles } from '../Button';
import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
import { CellActions } from './CellActions';
@ -42,15 +42,17 @@ export const DefaultCell = (props: TableCellProps) => {
{hasLinks && (
<DataLinksContextMenu links={() => getCellLinks(field, row) || []}>
{(api) => {
const content = <div className={getLinkStyle(tableStyles, cellOptions, api.targetClassName)}>{value}</div>;
if (api.openMenu) {
return (
<Button className={cx(clearButtonStyle)} onClick={api.openMenu}>
{content}
</Button>
<button
className={cx(clearButtonStyle, getLinkStyle(tableStyles, cellOptions, api.targetClassName))}
onClick={api.openMenu}
>
{value}
</button>
);
} else {
return content;
return <div className={getLinkStyle(tableStyles, cellOptions, api.targetClassName)}>{value}</div>;
}
}}
</DataLinksContextMenu>

1
packages/grafana-ui/src/components/Table/styles.ts
View File

@ -175,6 +175,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
font-weight: ${theme.typography.fontWeightMedium};
&:hover {
text-decoration: underline;
color: ${theme.colors.text.link};
}
`,
cellLinkForColoredCell: css`