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

Table: Fixes broken link styles after recent cell options PR (#61582)

Browse Source 
* Table: Fixes broken link styles after recent cell options PR

* Share migration and fix bar gauge as well

* Remove unused import

* Review fixes

* Fixed test

Co-authored-by: Kyle Cunningham <kyle@codeincarnate.com>
This commit is contained in:
Torkel Ödegaard
2023-01-17 17:08:23 +01:00
committed by GitHub
parent bb7410aa09
commit 8620909006
8 changed files with 168 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,7 @@ import { BarGauge } from '../BarGauge/BarGauge';
import { DataLinksContextMenu, DataLinksContextMenuApi } from '../DataLinks/DataLinksContextMenu';
import { TableCellProps, TableCellDisplayMode } from './types';
import { getCellOptions } from './utils';
const defaultScale: ThresholdsConfig = {
mode: ThresholdsMode.Absolute,
@@ -39,28 +40,9 @@ export const BarGaugeCell: FC<TableCellProps> = (props) => {
// Set default display mode
let barGaugeMode: BarGaugeDisplayMode = BarGaugeDisplayMode.Gradient;
// Support deprecated settings
const usingDeprecatedSettings = field.config.custom.displayMode !== undefined;
// If we're using the old settings format we read the displayMode directly from
// the cell options
if (usingDeprecatedSettings) {
if (
(field.config.custom && field.config.custom.cellOptions.displayMode === TableCellDisplayMode.Gauge) ||
(field.config.custom && field.config.custom.cellOptions.displayMode === BarGaugeDisplayMode.Lcd)
) {
barGaugeMode = BarGaugeDisplayMode.Lcd;
} else if (
(field.config.custom && field.config.custom.cellOptions.displayMode === TableCellDisplayMode.Gauge) ||
(field.config.custom && field.config.custom.cellOptions.displayMode === BarGaugeDisplayMode.Basic)
) {
barGaugeMode = BarGaugeDisplayMode.Basic;
}
}
// Otherwise in the case of sub-options we read specifically from the sub-options
// object in order to get the display mode
else {
barGaugeMode = field.config.custom.cellOptions.mode;
const cellOptions = getCellOptions(field);
if (cellOptions.type === TableCellDisplayMode.Gauge) {
barGaugeMode = cellOptions.mode ?? BarGaugeDisplayMode.Gradient;
}
const getLinks = () => {

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

@@ -2,8 +2,8 @@ import { cx } from '@emotion/css';
import React, { FC, ReactElement } from 'react';
import tinycolor from 'tinycolor2';
import { DisplayValue, Field, formattedValueToString } from '@grafana/data';
import { TableCellBackgroundDisplayMode } from '@grafana/schema';
import { DisplayValue, formattedValueToString } from '@grafana/data';
import { TableCellBackgroundDisplayMode, TableCellOptions } from '@grafana/schema';
import { getCellLinks, getTextColorForAlphaBackground } from '../../utils';
import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
@@ -11,6 +11,7 @@ import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
import { CellActions } from './CellActions';
import { TableStyles } from './styles';
import { TableCellDisplayMode, TableCellProps, TableFieldOptions } from './types';
import { getCellOptions } from './utils';
export const DefaultCell: FC<TableCellProps> = (props) => {
const { field, cell, tableStyles, row, cellProps } = props;
@@ -27,7 +28,8 @@ export const DefaultCell: FC<TableCellProps> = (props) => {
const showFilters = field.config.filterable;
const showActions = (showFilters && cell.value !== undefined) || inspectEnabled;
const cellStyle = getCellStyle(tableStyles, field, displayValue, inspectEnabled);
const cellOptions = getCellOptions(field);
const cellStyle = getCellStyle(tableStyles, cellOptions, displayValue, inspectEnabled);
const hasLinks = Boolean(getCellLinks(field, row)?.length);
return (
@@ -38,7 +40,7 @@ export const DefaultCell: FC<TableCellProps> = (props) => {
<DataLinksContextMenu links={() => getCellLinks(field, row) || []}>
{(api) => {
return (
<div onClick={api.openMenu} className={getLinkStyle(tableStyles, field, api.targetClassName)}>
<div onClick={api.openMenu} className={getLinkStyle(tableStyles, cellOptions, api.targetClassName)}>
{value}
</div>
);
@@ -53,49 +55,24 @@ export const DefaultCell: FC<TableCellProps> = (props) => {
function getCellStyle(
tableStyles: TableStyles,
field: Field,
cellOptions: TableCellOptions,
displayValue: DisplayValue,
disableOverflowOnHover = false
) {
// How much to darken elements depends upon if we're in dark mode
const darkeningFactor = tableStyles.theme.isDark ? 1 : -0.7;
// See if we're using deprecated settings
const usingDeprecatedSettings = field.config.custom?.displayMode !== undefined;
// Setup color variables
let textColor: string | undefined = undefined;
let bgColor: string | undefined = undefined;
// Set colors using deprecated settings format
if (usingDeprecatedSettings) {
if (field.config.custom?.displayMode === TableCellDisplayMode.ColorText) {
textColor = displayValue.color;
} else if (field.config.custom?.displayMode === TableCellDisplayMode.ColorBackground) {
if (cellOptions.type === TableCellDisplayMode.ColorText) {
textColor = displayValue.color;
} else if (cellOptions.type === TableCellDisplayMode.ColorBackground) {
if (cellOptions.mode === TableCellBackgroundDisplayMode.Basic) {
textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
bgColor = tinycolor(displayValue.color).toRgbString();
} else if (
field.config.custom?.displayMode === TableCellDisplayMode.ColorBackground &&
field.config.custom?.backgroundDisplayMode === TableCellBackgroundDisplayMode.Gradient
) {
const bgColor2 = tinycolor(displayValue.color)
.darken(10 * darkeningFactor)
.spin(5);
textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
bgColor = `linear-gradient(120deg, ${bgColor2.toRgbString()}, ${displayValue.color})`;
}
}
// Set colors using updated sub-options format
else {
const cellDisplayMode = field.config.custom?.cellOptions?.mode;
const cellDisplayType = field.config.custom?.cellOptions?.type;
if (cellDisplayType === TableCellDisplayMode.ColorText) {
textColor = displayValue.color;
} else if (cellDisplayMode === TableCellBackgroundDisplayMode.Basic) {
textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
bgColor = tinycolor(displayValue.color).toRgbString();
} else if (cellDisplayMode === TableCellBackgroundDisplayMode.Gradient) {
} else if (cellOptions.mode === TableCellBackgroundDisplayMode.Gradient) {
const bgColor2 = tinycolor(displayValue.color)
.darken(10 * darkeningFactor)
.spin(5);
@@ -113,8 +90,8 @@ function getCellStyle(
return disableOverflowOnHover ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer;
}
function getLinkStyle(tableStyles: TableStyles, field: Field, targetClassName: string | undefined) {
if (field.config.custom?.displayMode === TableCellDisplayMode.Auto) {
function getLinkStyle(tableStyles: TableStyles, cellOptions: TableCellOptions, targetClassName: string | undefined) {
if (cellOptions.type === TableCellDisplayMode.Auto) {
return cx(tableStyles.cellLink, targetClassName);
}

68
packages/grafana-ui/src/components/Table/utils.tsx
View File

@@ -16,6 +16,12 @@ import {
GrafanaTheme2,
ArrayVector,
} from '@grafana/data';
import {
BarGaugeDisplayMode,
TableAutoCellOptions,
TableCellBackgroundDisplayMode,
TableCellOptions,
} from '@grafana/schema';
import { BarGaugeCell } from './BarGaugeCell';
import { DefaultCell } from './DefaultCell';
@@ -344,3 +350,65 @@ export function createFooterCalculationValues(rows: Row[]): any[number] {
return values;
}
const defaultCellOptions: TableAutoCellOptions = { type: TableCellDisplayMode.Auto };
export function getCellOptions(field: Field): TableCellOptions {
if (field.config.custom?.displayMode) {
return migrateTableDisplayModeToCellOptions(field.config.custom?.displayMode);
}
if (!field.config.custom?.cellOptions) {
return defaultCellOptions;
}
return (field.config.custom as TableFieldOptions).cellOptions;
}
/**
* Migrates table cell display mode to new object format.
*
* @param displayMode The display mode of the cell
* @returns TableCellOptions object in the correct format
* relative to the old display mode.
*/
export function migrateTableDisplayModeToCellOptions(displayMode: TableCellDisplayMode): TableCellOptions {
switch (displayMode) {
// In the case of the gauge we move to a different option
case 'basic':
case 'gradient-gauge':
case 'lcd-gauge':
let gaugeMode = BarGaugeDisplayMode.Basic;
if (displayMode === 'gradient-gauge') {
gaugeMode = BarGaugeDisplayMode.Gradient;
} else if (displayMode === 'lcd-gauge') {
gaugeMode = BarGaugeDisplayMode.Lcd;
}
return {
type: TableCellDisplayMode.Gauge,
mode: gaugeMode,
};
// Also true in the case of the color background
case 'color-background':
case 'color-background-solid':
let mode = TableCellBackgroundDisplayMode.Basic;
// Set the new mode field, somewhat confusingly the
// color-background mode is for gradient display
if (displayMode === 'color-background') {
mode = TableCellBackgroundDisplayMode.Gradient;
}
return {
type: TableCellDisplayMode.ColorBackground,
mode: mode,
};
default:
return {
// @ts-ignore
type: displayMode,
};
}
}