IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 23:16:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

Tabe panel: Minor fixes caused by datalinks context menu (#51756)

Browse Source
This commit is contained in:
Dominik Prokop 2022-07-06 09:29:14 +02:00 committed by GitHub
parent 01130f22b7
commit 73c5a9f23c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React from 'react';
import React, { CSSProperties } from 'react';
import { LinkModel } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
@ -12,6 +12,7 @@ import { MenuItem } from '../Menu/MenuItem';
interface DataLinksContextMenuProps {
children: (props: DataLinksContextMenuApi) => JSX.Element;
links: () => LinkModel[];
style?: CSSProperties;
}
export interface DataLinksContextMenuApi {
@ -19,7 +20,7 @@ export interface DataLinksContextMenuApi {
targetClassName?: string;
}
export const DataLinksContextMenu: React.FC<DataLinksContextMenuProps> = ({ children, links }) => {
export const DataLinksContextMenu: React.FC<DataLinksContextMenuProps> = ({ children, links, style }) => {
const itemsGroup: MenuItemsGroup[] = [{ items: linkModelToContextMenuItems(links), label: 'Data links' }];
const linksCounter = itemsGroup[0].items.length;
const renderMenuGroupItems = () => {
@ -61,7 +62,7 @@ export const DataLinksContextMenu: React.FC<DataLinksContextMenuProps> = ({ chil
onClick={linkModel.onClick}
target={linkModel.target}
title={linkModel.title}
style={{ display: 'flex', width: '100%' }}
style={style}
aria-label={selectors.components.DataLinksContextMenu.singleLink}
>
{children({})}

8
packages/grafana-ui/src/components/Table/BarGaugeCell.tsx
View File

@ -50,7 +50,7 @@ export const BarGaugeCell: FC<TableCellProps> = (props) => {
return field.getLinks({ valueRowIndex: row.index });
};
const hasLinks = !!getLinks().length;
const hasLinks = Boolean(getLinks().length);
const renderComponent = (menuProps: DataLinksContextMenuApi) => {
const { openMenu, targetClassName } = menuProps;
@ -76,7 +76,11 @@ export const BarGaugeCell: FC<TableCellProps> = (props) => {
return (
<div {...cellProps} className={tableStyles.cellContainer}>
{hasLinks && <DataLinksContextMenu links={getLinks}>{(api) => renderComponent(api)}</DataLinksContextMenu>}
{hasLinks && (
<DataLinksContextMenu links={getLinks} style={{ display: 'flex', width: '100%' }}>
{(api) => renderComponent(api)}
</DataLinksContextMenu>
)}
{!hasLinks && (
<BarGauge
width={innerWidth}

2
packages/grafana-ui/src/components/Table/ImageCell.tsx
View File

@ -11,7 +11,7 @@ export const ImageCell: FC<TableCellProps> = (props) => {
const displayValue = field.display!(cell.value);
const hasLinks = getCellLinks(field, row)?.length;
const hasLinks = Boolean(getCellLinks(field, row)?.length);
return (
<div {...cellProps} className={tableStyles.cellContainer}>

2
packages/grafana-ui/src/components/Table/JSONViewCell.tsx
View File

@ -27,7 +27,7 @@ export function JSONViewCell(props: TableCellProps): JSX.Element {
displayValue = JSON.stringify(value, null, ' ');
}
const hasLinks = getCellLinks(field, row)?.length;
const hasLinks = Boolean(getCellLinks(field, row)?.length);
return (
<div {...cellProps} className={inspectEnabled ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer}>

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

@ -165,7 +165,6 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
imageCellLink: css`
cursor: pointer;
overflow: hidden;
width: 100%;
height: 100%;
`,
headerFilter: css`