From 4c02d072e3c9c60761ced406ca44c977a539fb96 Mon Sep 17 00:00:00 2001
From: Beto Muniz <contato@betomuniz.com>
Date: Wed, 3 Aug 2022 14:47:22 -0300
Subject: [PATCH] Ensure that tooltip and legend have same parameters to
 calculate and display label equally (#53176)

---
 .../src/components/uPlot/plugins/TooltipPlugin.tsx       | 5 +++--
 public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx  | 2 ++
 .../panel/timeseries/plugins/ContextMenuPlugin.tsx       | 9 ++++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
index 4b9d0ea5120..73e7371476e 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
@@ -25,6 +25,7 @@ import { findMidPointYPosition, pluginLog } from '../utils';
 interface TooltipPluginProps {
   timeZone: TimeZone;
   data: DataFrame;
+  frames?: DataFrame[];
   config: UPlotConfigBuilder;
   mode?: TooltipDisplayMode;
   sortOrder?: SortOrder;
@@ -203,7 +204,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
           series={[
             {
               color: display.color || FALLBACK_COLOR,
-              label: getFieldDisplayName(field, otherProps.data),
+              label: getFieldDisplayName(field, otherProps.data, otherProps.frames),
               value: display ? formattedValueToString(display) : null,
             },
           ]}
@@ -237,7 +238,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
         sortIdx.push(v);
         series.push({
           color: display.color || FALLBACK_COLOR,
-          label: getFieldDisplayName(field, frame),
+          label: getFieldDisplayName(field, frame, otherProps.frames),
           value: display ? formattedValueToString(display) : null,
           isActive: focusedSeriesIdx === i,
         });
diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
index 4186852af1d..a5bf02bb08f 100644
--- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
+++ b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
@@ -71,6 +71,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
             <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
             {options.tooltip.mode === TooltipDisplayMode.None || (
               <TooltipPlugin
+                frames={frames}
                 data={alignedDataFrame}
                 config={config}
                 mode={options.tooltip.mode}
@@ -117,6 +118,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
             ) : (
               <ContextMenuPlugin
                 data={alignedDataFrame}
+                frames={frames}
                 config={config}
                 timeZone={timeZone}
                 replaceVariables={replaceVariables}
diff --git a/public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx
index b27a9f9880a..2bfd5c8d9c6 100644
--- a/public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx
@@ -24,6 +24,7 @@ export interface ContextMenuItemClickPayload {
 
 interface ContextMenuPluginProps {
   data: DataFrame;
+  frames?: DataFrame[];
   config: UPlotConfigBuilder;
   defaultItems?: Array<MenuItemsGroup<ContextMenuItemClickPayload>>;
   timeZone: TimeZone;
@@ -179,6 +180,7 @@ export const ContextMenuPlugin: React.FC<ContextMenuPluginProps> = ({
       {isOpen && coords && (
         <ContextMenuView
           data={data}
+          frames={otherProps.frames}
           defaultItems={defaultItems}
           timeZone={timeZone}
           selection={{ point, coords }}
@@ -196,8 +198,9 @@ export const ContextMenuPlugin: React.FC<ContextMenuPluginProps> = ({
   );
 };
 
-interface ContextMenuProps {
+interface ContextMenuViewProps {
   data: DataFrame;
+  frames?: DataFrame[];
   defaultItems?: MenuItemsGroup[];
   timeZone: TimeZone;
   onClose?: () => void;
@@ -208,7 +211,7 @@ interface ContextMenuProps {
   replaceVariables?: InterpolateFunction;
 }
 
-export const ContextMenuView: React.FC<ContextMenuProps> = ({
+export const ContextMenuView: React.FC<ContextMenuViewProps> = ({
   selection,
   timeZone,
   defaultItems,
@@ -274,7 +277,7 @@ export const ContextMenuView: React.FC<ContextMenuProps> = ({
           timestamp={xFieldFmt(xField.values.get(dataIdx)).text}
           displayValue={displayValue}
           seriesColor={displayValue.color!}
-          displayName={getFieldDisplayName(field, data)}
+          displayName={getFieldDisplayName(field, data, otherProps.frames)}
         />
       );
     }