From 3ec79696039586154167a3d54ac82ccbcda3904d Mon Sep 17 00:00:00 2001 From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com> Date: Wed, 8 Dec 2021 08:30:43 +0000 Subject: [PATCH] StateTimeline: Fix toolitp not showing when for frames with multiple fields (#42741) (#42815) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * StateTimeline: Fix toolitp not showing when for frames with multiple fields * Update public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx Co-authored-by: Zoltán Bedi * Update public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx Co-authored-by: Zoltán Bedi * Update public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx Co-authored-by: Zoltán Bedi Co-authored-by: Zoltán Bedi (cherry picked from commit 826b3bfd5238bb312b9cab45cb2a7fc1ed11ceda) Co-authored-by: Dominik Prokop --- .../panel/state-timeline/StateTimelinePanel.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx index 7e5c54b0c45..6c2fb9100e9 100755 --- a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx +++ b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useMemo } from 'react'; -import { DataFrame, PanelProps } from '@grafana/data'; +import { DataFrame, FieldType, PanelProps } from '@grafana/data'; import { TooltipPlugin, useTheme2, ZoomPlugin, usePanelContext } from '@grafana/ui'; import { TimelineMode, TimelineOptions } from './types'; import { TimelineChart } from './TimelineChart'; @@ -39,6 +39,12 @@ export const StateTimelinePanel: React.FC = ({ const renderCustomTooltip = useCallback( (alignedData: DataFrame, seriesIdx: number | null, datapointIdx: number | null) => { const data = frames ?? []; + // Count value fields in the state-timeline-ready frame + const valueFieldsCount = data.reduce( + (acc, frame) => acc + frame.fields.filter((field) => field.type !== FieldType.time).length, + 0 + ); + // Not caring about multi mode in StateTimeline if (seriesIdx === null || datapointIdx === null) { return null; @@ -51,7 +57,7 @@ export const StateTimelinePanel: React.FC = ({ * See https://github.com/grafana/support-escalations/issues/932 */ if ( - (!alignedData.meta?.transformations?.length && alignedData.fields.length - 1 !== data.length) || + (!alignedData.meta?.transformations?.length && alignedData.fields.length - 1 !== valueFieldsCount) || !alignedData.fields[seriesIdx] ) { return null;