From d8c11cdd7af9a2ad60927cf523be5d7bdd72dec3 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 20 Oct 2022 08:42:21 +0200
Subject: [PATCH] StatuHistoryPanel: Fix zoom not working (#57240) (#57324)

(cherry picked from commit 0dd721d4cea64eb394c0b7b926b0015f600e9295)

Co-authored-by: Victor Marin <36818606+mdvictor@users.noreply.github.com>
---
 .../status-history/StatusHistoryPanel.tsx     | 44 +++++++++++--------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
index f465ea6503d..2aeb84b74b3 100644
--- a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
+++ b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
@@ -136,6 +136,30 @@ export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
     [timeZone, frames, shouldDisplayCloseButton]
   );
 
+  const renderTooltip = (alignedFrame: DataFrame) => {
+    if (options.tooltip.mode === TooltipDisplayMode.None) {
+      return null;
+    }
+
+    if (focusedPointIdx === null || (!isActive && sync && sync() === DashboardCursorSync.Crosshair)) {
+      return null;
+    }
+
+    return (
+      <Portal>
+        {hover && coords && focusedSeriesIdx && (
+          <VizTooltipContainer
+            position={{ x: coords.viewport.x, y: coords.viewport.y }}
+            offset={{ x: TOOLTIP_OFFSET, y: TOOLTIP_OFFSET }}
+            allowPointerEvents={isToolTipOpen.current}
+          >
+            {renderCustomTooltip(alignedFrame, focusedSeriesIdx, focusedPointIdx)}
+          </VizTooltipContainer>
+        )}
+      </Portal>
+    );
+  };
+
   const timezones = useMemo(() => getTimezones(options.timezone, timeZone), [options.timezone, timeZone]);
 
   if (!frames || warn) {
@@ -187,28 +211,10 @@ export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
           });
         }
 
-        if (options.tooltip.mode === TooltipDisplayMode.None) {
-          return null;
-        }
-
-        if (focusedPointIdx === null || (!isActive && sync && sync() === DashboardCursorSync.Crosshair)) {
-          return null;
-        }
-
         return (
           <>
             <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
-            <Portal>
-              {hover && coords && focusedSeriesIdx && (
-                <VizTooltipContainer
-                  position={{ x: coords.viewport.x, y: coords.viewport.y }}
-                  offset={{ x: TOOLTIP_OFFSET, y: TOOLTIP_OFFSET }}
-                  allowPointerEvents={isToolTipOpen.current}
-                >
-                  {renderCustomTooltip(alignedFrame, focusedSeriesIdx, focusedPointIdx)}
-                </VizTooltipContainer>
-              )}
-            </Portal>
+            {renderTooltip(alignedFrame)}
             <OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
           </>
         );