IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-10 07:35:45 -06:00
Code Issues Packages Projects Releases Wiki Activity

Table panel: Show datalinks for cell display modes JSON View and Gauge derivates (#46020)

Browse Source 
* Show datalinks on Table panel JSON View and Gauge derivates

* Use DataLinksContextMenu on BarGaugeCell

* Change import path

* PR modifications

* Re-add cell container style
This commit is contained in:
Victor Marin 2022-03-29 13:05:30 +03:00 committed by GitHub
parent 9eb2cd537d
commit 5242d44693
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,9 @@
import React, { FC } from 'react';
import { ThresholdsConfig, ThresholdsMode, VizOrientation, getFieldConfigWithMinMax } from '@grafana/data';
import { ThresholdsConfig, ThresholdsMode, VizOrientation, getFieldConfigWithMinMax, LinkModel } from '@grafana/data';
import { BarGauge, BarGaugeDisplayMode } from '../BarGauge/BarGauge';
import { TableCellProps, TableCellDisplayMode } from './types';
import { DataLinksContextMenu, DataLinksContextMenuApi } from '../DataLinks/DataLinksContextMenu';
import { isFunction } from 'lodash';
const defaultScale: ThresholdsConfig = {
mode: ThresholdsMode.Absolute,
@ -18,7 +20,7 @@ const defaultScale: ThresholdsConfig = {
};
export const BarGaugeCell: FC<TableCellProps> = (props) => {
const { field, innerWidth, tableStyles, cell, cellProps } = props;
const { field, innerWidth, tableStyles, cell, cellProps, row } = props;
let config = getFieldConfigWithMinMax(field, false);
if (!config.thresholds) {
@ -37,8 +39,20 @@ export const BarGaugeCell: FC<TableCellProps> = (props) => {
barGaugeMode = BarGaugeDisplayMode.Basic;
}
return (
<div {...cellProps} className={tableStyles.cellContainer}>
const getLinks = () => {
if (!isFunction(field.getLinks)) {
return [] as LinkModel[];
}
return field.getLinks({ valueRowIndex: row.index });
};
const hasLinks = !!getLinks().length;
const renderComponent = (menuProps: DataLinksContextMenuApi) => {
const { openMenu, targetClassName } = menuProps;
return (
<BarGauge
width={innerWidth}
height={tableStyles.cellHeightInner}
@ -48,10 +62,37 @@ export const BarGaugeCell: FC<TableCellProps> = (props) => {
value={displayValue}
orientation={VizOrientation.Horizontal}
theme={tableStyles.theme}
onClick={openMenu}
className={targetClassName}
itemSpacing={1}
lcdCellWidth={8}
displayMode={barGaugeMode}
/>
);
};
return (
<div {...cellProps} className={tableStyles.cellContainer}>
{hasLinks && (
<DataLinksContextMenu links={getLinks} config={config}>
{(api) => renderComponent(api)}
</DataLinksContextMenu>
)}
{!hasLinks && (
<BarGauge
width={innerWidth}
height={tableStyles.cellHeightInner}
field={config}
display={field.display}
text={{ valueSize: 14 }}
value={displayValue}
orientation={VizOrientation.Horizontal}
theme={tableStyles.theme}
itemSpacing={1}
lcdCellWidth={8}
displayMode={barGaugeMode}
/>
)}
</div>
);
};

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

@ -3,9 +3,10 @@ import { css, cx } from '@emotion/css';
import { isString } from 'lodash';
import { TableCellProps, TableFieldOptions } from './types';
import { CellActions } from './CellActions';
import { getCellLinks } from '../../utils';
export function JSONViewCell(props: TableCellProps): JSX.Element {
const { cell, tableStyles, cellProps, field } = props;
const { cell, tableStyles, cellProps, field, row } = props;
const inspectEnabled = Boolean((field.config.custom as TableFieldOptions)?.inspect);
const txt = css`
cursor: pointer;
@ -23,9 +24,24 @@ export function JSONViewCell(props: TableCellProps): JSX.Element {
displayValue = JSON.stringify(value, null, ' ');
}
const { link, onClick } = getCellLinks(field, row);
return (
<div {...cellProps} className={inspectEnabled ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer}>
<div className={cx(tableStyles.cellText, txt)}>{displayValue}</div>
<div className={cx(tableStyles.cellText, txt)}>
{!link && <div className={tableStyles.cellText}>{value}</div>}
{link && (
<a
href={link.href}
onClick={onClick}
target={link.target}
title={link.title}
className={tableStyles.cellLink}
>
{displayValue}
</a>
)}
</div>
{inspectEnabled && <CellActions {...props} previewMode="code" />}
</div>
);