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

Table: Optimization - render icons on hover (#76906)

Browse Source 
* only render icons on hover
* Table: Optimization - remove plaintext cell wrapper (#76916)

* remove inner wrapper div from plain text cells
* reuse result of typeof value === 'string'
---------

Co-authored-by: Galen <galen.kistler@grafana.com>

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
This commit is contained in:
Galen Kistler
2023-10-23 11:12:40 -05:00
committed by GitHub
parent 3a9eb33b14
commit 88957c7f44
2 changed files with 56 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { cx } from '@emotion/css';
import React, { ReactElement } from 'react';
import React, { ReactElement, useState } from 'react';
import tinycolor from 'tinycolor2';
import { DisplayValue, formattedValueToString } from '@grafana/data';
@ -24,11 +24,18 @@ export const DefaultCell = (props: TableCellProps) => {
const showFilters = props.onCellFilterAdded && field.config.filterable;
const showActions = (showFilters && cell.value !== undefined) || inspectEnabled;
const cellOptions = getCellOptions(field);
const cellStyle = getCellStyle(tableStyles, cellOptions, displayValue, inspectEnabled);
const hasLinks = Boolean(getCellLinks(field, row)?.length);
const clearButtonStyle = useStyles2(clearLinkButtonStyles);
const [hover, setHover] = useState(false);
let value: string | ReactElement;
const onMouseLeave = () => {
setHover(false);
};
const onMouseEnter = () => {
setHover(true);
};
if (cellOptions.type === TableCellDisplayMode.Custom) {
const CustomCellComponent: React.ComponentType<CustomCellRendererProps> = cellOptions.cellComponent;
value = <CustomCellComponent field={field} value={cell.value} rowIndex={row.index} frame={frame} />;
@ -40,9 +47,22 @@ export const DefaultCell = (props: TableCellProps) => {
}
}
const isStringValue = typeof value === 'string';
const cellStyle = getCellStyle(tableStyles, cellOptions, displayValue, inspectEnabled, isStringValue);
if (isStringValue && cellProps.style?.justifyContent === 'flex-end') {
cellProps.style!.textAlign = 'right';
}
return (
<div {...cellProps} className={cellStyle}>
{!hasLinks && <div className={tableStyles.cellText}>{value}</div>}
<div
{...cellProps}
onMouseEnter={showActions ? onMouseEnter : undefined}
onMouseLeave={showActions ? onMouseLeave : undefined}
className={cellStyle}
>
{!hasLinks && (isStringValue ? `${value}` : <div className={tableStyles.cellText}>{value}</div>)}
{hasLinks && (
<DataLinksContextMenu links={() => getCellLinks(field, row) || []}>
@ -63,7 +83,7 @@ export const DefaultCell = (props: TableCellProps) => {
</DataLinksContextMenu>
)}
{showActions && <CellActions {...props} previewMode="text" showFilters={showFilters} />}
{hover && showActions && <CellActions {...props} previewMode="text" showFilters={showFilters} />}
</div>
);
};
@ -72,7 +92,8 @@ function getCellStyle(
tableStyles: TableStyles,
cellOptions: TableCellOptions,
displayValue: DisplayValue,
disableOverflowOnHover = false
disableOverflowOnHover = false,
isStringValue = false
) {
// How much to darken elements depends upon if we're in dark mode
const darkeningFactor = tableStyles.theme.isDark ? 1 : -0.7;
@ -101,10 +122,14 @@ function getCellStyle(
// If we have definied colors return those styles
// Otherwise we return default styles
if (textColor !== undefined || bgColor !== undefined) {
return tableStyles.buildCellContainerStyle(textColor, bgColor, !disableOverflowOnHover);
return tableStyles.buildCellContainerStyle(textColor, bgColor, !disableOverflowOnHover, isStringValue);
}
return disableOverflowOnHover ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer;
if (isStringValue) {
return disableOverflowOnHover ? tableStyles.cellContainerTextNoOverflow : tableStyles.cellContainerText;
} else {
return disableOverflowOnHover ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer;
}
}
function getLinkStyle(tableStyles: TableStyles, cellOptions: TableCellOptions, targetClassName: string | undefined) {