From 9a40555ed3e88f9e626c2cb80614ded27ef237f0 Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Mon, 7 Jul 2025 19:38:20 -0500
Subject: [PATCH] [release-12.0.3] StateTimeline: Add endTime to tooltip
 (#107606)

StateTimeline: Add endTime to tooltip (#106582)

Co-authored-by: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
---
 .../grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx   | 3 ++-
 .../plugins/panel/state-timeline/StateTimelineTooltip2.tsx   | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
index 7d7cdf9504f..f93b6158498 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
@@ -52,8 +52,9 @@ export const VizTooltipRow = ({
         overflowY: 'auto',
       }
     : {
-        whiteSpace: 'wrap',
+        whiteSpace: 'pre-line',
         wordBreak: 'break-word',
+        lineHeight: 1.2,
       };
 
   const [showLabelTooltip, setShowLabelTooltip] = useState(false);
diff --git a/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx b/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx
index 78e02f42e4c..c6c7b3d20c2 100644
--- a/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx
+++ b/public/app/plugins/panel/state-timeline/StateTimelineTooltip2.tsx
@@ -45,6 +45,7 @@ export const StateTimelineTooltip2 = ({
   mode = isPinned ? TooltipDisplayMode.Single : mode;
 
   const contentItems = getContentItems(series.fields, xField, dataIdxs, seriesIdx, mode, sortOrder);
+  let endTime = null;
 
   // append duration in single mode
   if (withDuration && mode === TooltipDisplayMode.Single) {
@@ -60,9 +61,11 @@ export const StateTimelineTooltip2 = ({
 
     if (nextStateTs) {
       duration = nextStateTs && fmtDuration(nextStateTs - stateTs);
+      endTime = nextStateTs;
     } else {
       const to = timeRange.to.valueOf();
       duration = fmtDuration(to - stateTs);
+      endTime = to;
     }
 
     contentItems.push({ label: 'Duration', value: duration });
@@ -84,7 +87,7 @@ export const StateTimelineTooltip2 = ({
 
   const headerItem: VizTooltipItem = {
     label: xField.type === FieldType.time ? '' : (xField.state?.displayName ?? xField.name),
-    value: xVal,
+    value: endTime ? xVal + ' - \n' + xField.display!(endTime).text : xVal,
   };
 
   return (