From 24475cfddacc41fa3b9c0b5c5ea605fecc4029a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= <zoltan.bedi@gmail.com>
Date: Mon, 27 Sep 2021 09:46:30 +0200
Subject: [PATCH] Fix: State timeline panel tooltip error when data is not in
 sync (#39438)

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

* Move check from tooltip to panel
---
 .../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!);