diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx index 38627531b81..2d48af640c5 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import React, { ReactElement } from 'react'; +import React, { CSSProperties, ReactElement } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; @@ -11,14 +11,22 @@ import { LabelValue } from './types'; interface Props { contentLabelValue: LabelValue[]; customContent?: ReactElement[]; + scrollable?: boolean; isPinned: boolean; } -export const VizTooltipContent = ({ contentLabelValue, customContent, isPinned }: Props) => { +export const VizTooltipContent = ({ contentLabelValue, customContent, isPinned, scrollable = false }: Props) => { const styles = useStyles2(getStyles); + const scrollableStyle: CSSProperties = scrollable + ? { + maxHeight: 400, + overflowY: 'auto', + } + : {}; + return ( -
+
{contentLabelValue.map((labelValue, i) => { const { label, value, color, colorIndicator, colorPlacement, isActive } = labelValue; diff --git a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx index 5c6be434311..b7d10afdb7e 100644 --- a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx +++ b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx @@ -61,11 +61,12 @@ export const TimeSeriesTooltip = ({ const xFieldFmt = xField.display || getDisplayProcessor({ field: xField, theme }); let xVal = xFieldFmt(xField!.values[dataIdxs[0]!]).text; + let links: Array> = []; let contentLabelValue: LabelValue[] = []; // Single mode - if (mode === TooltipDisplayMode.Single || isPinned) { + if (mode === TooltipDisplayMode.Single) { const field = seriesFrame.fields[seriesIdx!]; if (!field) { return null; @@ -75,6 +76,7 @@ export const TimeSeriesTooltip = ({ xVal = xFieldFmt(xField!.values[dataIdx]).text; const fieldFmt = field.display || getDisplayProcessor({ field, theme }); const display = fieldFmt(field.values[dataIdx]); + links = getDataLinks(field, dataIdx); contentLabelValue = [ @@ -88,7 +90,7 @@ export const TimeSeriesTooltip = ({ ]; } - if (mode === TooltipDisplayMode.Multi && !isPinned) { + if (mode === TooltipDisplayMode.Multi) { const fields = seriesFrame.fields; const sortIdx: unknown[] = []; @@ -131,6 +133,12 @@ export const TimeSeriesTooltip = ({ }); } } + + if (seriesIdx != null) { + const field = seriesFrame.fields[seriesIdx]; + const dataIdx = dataIdxs[seriesIdx]!; + links = getDataLinks(field, dataIdx); + } } const getHeaderLabel = (): LabelValue => { @@ -148,7 +156,11 @@ export const TimeSeriesTooltip = ({
- + {isPinned && }