From e90558d3b3fa36883d1677359757683ad0fcbd11 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 27 Sep 2021 04:15:27 -0400
Subject: [PATCH] Fix: State timeline panel tooltip error when data is not in
 sync (#39438) (#39634)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix: State timeline panel tooltip error when data is not in sync

* Move check from tooltip to panel

(cherry picked from commit 24475cfddacc41fa3b9c0b5c5ea605fecc4029a0)

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
---
 .../panel/state-timeline/StateTimelinePanel.tsx     | 13 ++++++++++++-
 .../panel/state-timeline/StateTimelineTooltip.tsx   |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
index 096c8e27798..cbc035e39d7 100755
--- a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
+++ b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
@@ -37,14 +37,25 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
 
   const renderCustomTooltip = useCallback(
     (alignedData: DataFrame, seriesIdx: number | null, datapointIdx: number | null) => {
+      const data = frames ?? [];
       // Not caring about multi mode in StateTimeline
       if (seriesIdx === null || datapointIdx === null) {
         return null;
       }
 
+      /**
+       * There could be a case when the tooltip shows a data from one of a multiple query and the other query finishes first
+       * from refreshing. This causes data to be out of sync. alignedData - 1 because Time field doesn't count.
+       * Render nothing in this case to prevent error.
+       * See https://github.com/grafana/support-escalations/issues/932
+       */
+      if (alignedData.fields.length - 1 !== data.length || !alignedData.fields[seriesIdx]) {
+        return null;
+      }
+
       return (
         <StateTimelineTooltip
-          data={frames ?? []}
+          data={data}
           alignedData={alignedData}
           seriesIdx={seriesIdx}
           datapointIdx={datapointIdx}
diff --git a/public/app/plugins/panel/state-timeline/StateTimelineTooltip.tsx b/public/app/plugins/panel/state-timeline/StateTimelineTooltip.tsx
index 53eb510aa11..58d32a6cedd 100644
--- a/public/app/plugins/panel/state-timeline/StateTimelineTooltip.tsx
+++ b/public/app/plugins/panel/state-timeline/StateTimelineTooltip.tsx
@@ -32,6 +32,7 @@ export const StateTimelineTooltip: React.FC<StateTimelineTooltipProps> = ({
   const xFieldFmt = xField.display || getDisplayProcessor({ field: xField, timeZone, theme });
 
   const field = alignedData.fields[seriesIdx!];
+
   const dataFrameFieldIndex = field.state?.origin;
   const fieldFmt = field.display || getDisplayProcessor({ field, timeZone, theme });
   const value = field.values.get(datapointIdx!);