TimeseriesPanel: Fix variables in data links (#56729)

* TimeseriesPanel: Fix variables in data links

* Refactor variable fix for all Timeseries panels

* cr mods
This commit is contained in:
Victor Marin 2022-10-18 14:22:31 +03:00 committed by GitHub
parent 178b05160a
commit 76d6e3c075
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 17 deletions

View File

@ -26,3 +26,4 @@ export { PanelPlugin, type SetFieldConfigOptionsArgs, type StandardOptionConfig
export { createFieldConfigRegistry } from './panel/registryFactories';
export { type QueryRunner, type QueryRunnerOptions } from './types/queryRunner';
export { type GroupingToMatrixTransformerOptions } from './transformations/transformers/groupingToMatrix';
export { getLinksSupplier } from './field/fieldOverrides';

View File

@ -16,6 +16,10 @@ export class SortedVector<T = any> implements Vector<T> {
return this.source.get(this.order[index]);
}
getOrderIndex(index: number): number {
return this.order[index];
}
toArray(): T[] {
return vectorToArray(this);
}

View File

@ -4,7 +4,7 @@
import React, { useMemo } from 'react';
import uPlot from 'uplot';
import { Field, getDisplayProcessor, PanelProps } from '@grafana/data';
import { Field, getDisplayProcessor, PanelProps, getLinksSupplier } from '@grafana/data';
import { PanelDataErrorView } from '@grafana/runtime';
import { TooltipDisplayMode } from '@grafana/schema';
import { usePanelContext, TimeSeries, TooltipPlugin, ZoomPlugin, UPlotConfigBuilder, useTheme2 } from '@grafana/ui';
@ -243,6 +243,16 @@ export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
options={options}
>
{(config, alignedDataFrame) => {
alignedDataFrame.fields.forEach((field) => {
field.getLinks = getLinksSupplier(
alignedDataFrame,
field,
field.state!.scopedVars!,
replaceVariables,
timeZone
);
});
return (
<>
<ZoomPlugin config={config} onZoom={onChangeTimeRange} />

View File

@ -1,6 +1,6 @@
import React, { useMemo } from 'react';
import { Field, PanelProps } from '@grafana/data';
import { Field, PanelProps, getLinksSupplier } from '@grafana/data';
import { PanelDataErrorView } from '@grafana/runtime';
import { TooltipDisplayMode } from '@grafana/schema';
import { usePanelContext, TimeSeries, TooltipPlugin, ZoomPlugin, KeyboardPlugin } from '@grafana/ui';
@ -65,6 +65,16 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
options={options}
>
{(config, alignedDataFrame) => {
alignedDataFrame.fields.forEach((field) => {
field.getLinks = getLinksSupplier(
alignedDataFrame,
field,
field.state!.scopedVars!,
replaceVariables,
timeZone
);
});
return (
<>
<KeyboardPlugin config={config} />

View File

@ -2,7 +2,15 @@ import { css as cssCore, Global } from '@emotion/react';
import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { useClickAway } from 'react-use';
import { CartesianCoords2D, DataFrame, getFieldDisplayName, InterpolateFunction, TimeZone } from '@grafana/data';
import {
CartesianCoords2D,
DataFrame,
getFieldDisplayName,
InterpolateFunction,
SortedVector,
TimeZone,
ValueLinkConfig,
} from '@grafana/data';
import {
ContextMenu,
GraphContextMenuHeader,
@ -249,23 +257,27 @@ export const ContextMenuView: React.FC<ContextMenuViewProps> = ({
const hasLinks = field.config.links && field.config.links.length > 0;
const valueLinkConfig: ValueLinkConfig = {};
if (field.values instanceof SortedVector) {
valueLinkConfig.valueRowIndex = field.values.getOrderIndex(dataIdx);
} else {
valueLinkConfig.valueRowIndex = dataIdx;
}
if (hasLinks) {
if (field.getLinks) {
items.push({
items: field
.getLinks({
valueRowIndex: dataIdx,
})
.map<MenuItemProps>((link) => {
return {
label: link.title,
ariaLabel: link.title,
url: link.href,
target: link.target,
icon: link.target === '_self' ? 'link' : 'external-link-alt',
onClick: link.onClick,
};
}),
items: field.getLinks(valueLinkConfig).map<MenuItemProps>((link) => {
return {
label: link.title,
ariaLabel: link.title,
url: link.href,
target: link.target,
icon: link.target === '_self' ? 'link' : 'external-link-alt',
onClick: link.onClick,
};
}),
});
}
}