[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>

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);

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 (