From 16e610ee8fd5642ba8e747390d38aabe6975f956 Mon Sep 17 00:00:00 2001
From: Ondrej Kokes <ondrej.kokes@gmail.com>
Date: Wed, 9 Mar 2022 10:16:54 +0100
Subject: [PATCH] Add a tooltip for unix times (ISO strings) (#10376)

* Add a tooltip for unix times (ISO strings)

Signed-off-by: Ondrej Kokes <ondrej.kokes@gmail.com>

* Leverage useLocalTime to adjust ISO string tooltips

Signed-off-by: Ondrej Kokes <ondrej.kokes@gmail.com>

* revert pre styling removal

Signed-off-by: Ondrej Kokes <ondrej.kokes@gmail.com>
---
 .../react-app/src/pages/graph/DataTable.tsx   | 21 ++++++++++++-------
 web/ui/react-app/src/pages/graph/Panel.tsx    |  2 +-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/ui/react-app/src/pages/graph/DataTable.tsx b/web/ui/react-app/src/pages/graph/DataTable.tsx
index d82d88cf9..4e0f4e61d 100644
--- a/web/ui/react-app/src/pages/graph/DataTable.tsx
+++ b/web/ui/react-app/src/pages/graph/DataTable.tsx
@@ -5,6 +5,8 @@ import { Alert, Table } from 'reactstrap';
 import SeriesName from './SeriesName';
 import { Metric } from '../../types/types';
 
+import moment from 'moment';
+
 export interface QueryResult {
   data:
     | null
@@ -24,6 +26,7 @@ export interface QueryResult {
         resultType: 'string';
         result: string;
       };
+  useLocalTime: boolean;
 }
 
 interface InstantSample {
@@ -47,7 +50,7 @@ const limitSeries = <S extends InstantSample | RangeSamples>(series: S[]): S[] =
   return series;
 };
 
-const DataTable: FC<QueryResult> = ({ data }) => {
+const DataTable: FC<QueryResult> = ({ data, useLocalTime }) => {
   if (data === null) {
     return <Alert color="light">No data queried yet</Alert>;
   }
@@ -76,17 +79,21 @@ const DataTable: FC<QueryResult> = ({ data }) => {
       break;
     case 'matrix':
       rows = (limitSeries(data.result) as RangeSamples[]).map((s, index) => {
-        const valueText = s.values
-          .map((v) => {
-            return v[1] + ' @' + v[0];
-          })
-          .join('\n');
+        const valuesAndTimes = s.values.map((v) => {
+          const printedDatetime = moment.unix(v[0]).toISOString(useLocalTime);
+          return (
+            <React.Fragment>
+              {v[1]} @{<span title={printedDatetime}>{v[0]}</span>}
+              <br />
+            </React.Fragment>
+          );
+        });
         return (
           <tr style={{ whiteSpace: 'pre' }} key={index}>
             <td>
               <SeriesName labels={s.metric} format={doFormat} />
             </td>
-            <td>{valueText}</td>
+            <td>{valuesAndTimes}</td>
           </tr>
         );
       });
diff --git a/web/ui/react-app/src/pages/graph/Panel.tsx b/web/ui/react-app/src/pages/graph/Panel.tsx
index 1cb0c1fde..244a7606e 100644
--- a/web/ui/react-app/src/pages/graph/Panel.tsx
+++ b/web/ui/react-app/src/pages/graph/Panel.tsx
@@ -325,7 +325,7 @@ class Panel extends Component<PanelProps, PanelState> {
                         onChangeTime={this.handleChangeEndTime}
                       />
                     </div>
-                    <DataTable data={this.state.data} />
+                    <DataTable data={this.state.data} useLocalTime={this.props.useLocalTime} />
                   </>
                 )}
               </TabPane>