From e0c630e9150c449100b1c1402cb5e11b5fc166fb Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Wed, 21 Sep 2022 03:57:47 +0100
Subject: [PATCH] Status History Panel: Show X-Axis Value in Tooltip (#54563)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Matheus Benini <matheus_benini@hotmail.com>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>
Co-authored-by: juliopiubello <juliopiubellow@gmail.com>
---
 .../plugins/panel/status-history/StatusHistoryTooltip.tsx   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/panel/status-history/StatusHistoryTooltip.tsx b/public/app/plugins/panel/status-history/StatusHistoryTooltip.tsx
index a22cffbc39d..b6d9448fe28 100644
--- a/public/app/plugins/panel/status-history/StatusHistoryTooltip.tsx
+++ b/public/app/plugins/panel/status-history/StatusHistoryTooltip.tsx
@@ -49,6 +49,9 @@ export const StatusHistoryTooltip: React.FC<StatusHistoryTooltipProps> = ({
     });
   }
 
+  const xField = alignedData.fields[0];
+  const xFieldFmt = xField.display || getDisplayProcessor({ field: xField, timeZone, theme });
+
   const dataFrameFieldIndex = field.state?.origin;
   const fieldFmt = field.display || getDisplayProcessor({ field, timeZone, theme });
   const value = field.values.get(datapointIdx!);
@@ -64,9 +67,10 @@ export const StatusHistoryTooltip: React.FC<StatusHistoryTooltipProps> = ({
   return (
     <div>
       <div style={{ fontSize: theme.typography.bodySmall.fontSize }}>
-        {fieldDisplayName}
+        <strong>{xFieldFmt(xField.values.get(datapointIdx)).text}</strong>
         <br />
         <SeriesTableRow label={display.text} color={display.color || FALLBACK_COLOR} isActive />
+        {fieldDisplayName}
       </div>
       {links.length > 0 && (
         <div