From 1cee0bee9dede60eae00807aa5b8d804ed96e089 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 26 May 2022 13:00:24 -0400
Subject: [PATCH] [v8.5.x] Timeseries: Fix outside range stale state (#49655)

* Timeseries: fix outside range stale state (#49633)

Co-authored-by: Todd Treece <todd.treece@grafana.com>
(cherry picked from commit df90393057918328a11c16cf758e1b0848edfe27)

* remove typed array

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
---
 .../panel/candlestick/CandlestickPanel.tsx    |  2 +-
 .../state-timeline/StateTimelinePanel.tsx     |  2 +-
 .../status-history/StatusHistoryPanel.tsx     |  2 +-
 .../panel/timeseries/TimeSeriesPanel.tsx      |  2 +-
 .../timeseries/plugins/OutsideRangePlugin.tsx | 27 ++++++++++++-------
 5 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
index 5d27d426974..dff38c09883 100644
--- a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
+++ b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
@@ -308,7 +308,7 @@ export const CandlestickPanel: React.FC<CandlestickPanelProps> = ({
               />
             )}
 
-            <OutsideRangePlugin config={config} range={timeRange} onChangeTimeRange={onChangeTimeRange} />
+            <OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
           </>
         );
       }}
diff --git a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
index 54d5ea2f0b0..3a0f899c06a 100755
--- a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
+++ b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
@@ -118,7 +118,7 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
               timeZone={timeZone}
               renderTooltip={renderCustomTooltip}
             />
-            <OutsideRangePlugin config={config} range={timeRange} onChangeTimeRange={onChangeTimeRange} />
+            <OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
           </>
         );
       }}
diff --git a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
index e7b35c9eca5..982ea02d88f 100755
--- a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
+++ b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
@@ -72,7 +72,7 @@ export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
           <>
             <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
             <TooltipPlugin data={alignedFrame} config={config} mode={options.tooltip.mode} timeZone={timeZone} />
-            <OutsideRangePlugin config={config} range={timeRange} onChangeTimeRange={onChangeTimeRange} />
+            <OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
           </>
         );
       }}
diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
index 104031cfc88..c479cf2deb5 100644
--- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
+++ b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
@@ -130,7 +130,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
               />
             )}
 
-            <OutsideRangePlugin config={config} range={timeRange} onChangeTimeRange={onChangeTimeRange} />
+            <OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
           </>
         );
       }}
diff --git a/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx b/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx
index 6cf3cd30532..bcc7cf8a87c 100644
--- a/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx
@@ -1,34 +1,43 @@
-import React, { useLayoutEffect, useRef } from 'react';
-import uPlot from 'uplot';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import uPlot, { Scale } from 'uplot';
 
-import { TimeRange, AbsoluteTimeRange } from '@grafana/data';
+import { AbsoluteTimeRange } from '@grafana/data';
 import { UPlotConfigBuilder, Button } from '@grafana/ui';
 
 interface ThresholdControlsPluginProps {
   config: UPlotConfigBuilder;
-  range: TimeRange;
   onChangeTimeRange: (timeRange: AbsoluteTimeRange) => void;
 }
 
-export const OutsideRangePlugin: React.FC<ThresholdControlsPluginProps> = ({ config, range, onChangeTimeRange }) => {
+export const OutsideRangePlugin: React.FC<ThresholdControlsPluginProps> = ({ config, onChangeTimeRange }) => {
   const plotInstance = useRef<uPlot>();
+  const [timevalues, setTimeValues] = useState<number[]>([]);
+  const [timeRange, setTimeRange] = useState<Scale | undefined>();
 
   useLayoutEffect(() => {
     config.addHook('init', (u) => {
       plotInstance.current = u;
     });
+
+    config.addHook('setScale', (u) => {
+      setTimeValues(u.data?.[0] ?? []);
+      setTimeRange(u.scales['x'] ?? undefined);
+    });
   }, [config]);
 
-  const timevalues = plotInstance.current?.data?.[0];
-  if (!timevalues || !plotInstance.current || timevalues.length < 2 || !onChangeTimeRange) {
+  if (timevalues.length < 2 || !onChangeTimeRange) {
+    return null;
+  }
+
+  if (!timeRange || !timeRange.time || !timeRange.min || !timeRange.max!) {
     return null;
   }
 
   // Time values are always sorted for uPlot to work
   const first = timevalues[0];
   const last = timevalues[timevalues.length - 1];
-  const fromX = range.from.valueOf();
-  const toX = range.to.valueOf();
+  const fromX = timeRange.min;
+  const toX = timeRange.max;
 
   // (StartA <= EndB) and (EndA >= StartB)
   if (first <= toX && last >= fromX) {