From ceb0cb41b9d54baea87eb1c510d389fa63051021 Mon Sep 17 00:00:00 2001
From: Lucas Bracher <lucas.bracher@profusion.mobi>
Date: Fri, 20 Sep 2024 18:07:25 -0300
Subject: [PATCH] feat(dashboard): adding dateTime on graphs

Closes #229
---
 .../Tabs/CommitNavigationGraph.tsx            | 22 ++++++++++++++-----
 dashboard/src/utils/utils.ts                  |  8 +++----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/dashboard/src/pages/TreeDetails/Tabs/CommitNavigationGraph.tsx b/dashboard/src/pages/TreeDetails/Tabs/CommitNavigationGraph.tsx
index ad80d95c..a0a09e41 100644
--- a/dashboard/src/pages/TreeDetails/Tabs/CommitNavigationGraph.tsx
+++ b/dashboard/src/pages/TreeDetails/Tabs/CommitNavigationGraph.tsx
@@ -13,6 +13,7 @@ import { useTreeCommitHistory } from '@/api/TreeDetails';
 import type { TLineChartProps } from '@/components/LineChart/LineChart';
 import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
 import { MessagesKey } from '@/locales/messages';
+import { formatDate } from '@/utils/utils';
 
 const graphDisplaySize = 7;
 
@@ -94,9 +95,7 @@ const CommitNavigationGraph = (): JSX.Element => {
       color: Colors.Red,
     },
     {
-      label: formatMessage({
-        id: messagesId.mid,
-      }),
+      label: formatMessage({ id: messagesId.mid }),
       id: 'mid',
       data: [],
       color: Colors.Gray,
@@ -109,6 +108,7 @@ const CommitNavigationGraph = (): JSX.Element => {
   type TCommitValue = {
     commitHash: string;
     commitName?: string;
+    earliestStartTime?: string;
   };
 
   const commitData: TCommitValue[] = [];
@@ -143,6 +143,7 @@ const CommitNavigationGraph = (): JSX.Element => {
     commitData.unshift({
       commitHash: item.git_commit_hash,
       commitName: item.git_commit_name,
+      earliestStartTime: item.earliest_start_time,
     });
     xAxisIndexes.push(index);
   });
@@ -153,12 +154,21 @@ const CommitNavigationGraph = (): JSX.Element => {
       min: 100,
       data: xAxisIndexes,
       valueFormatter: (value: number, context): string => {
+        const currentCommitData = commitData[value];
+        const currentCommitDateTime = formatDate(
+          currentCommitData.earliestStartTime ?? '-',
+          true,
+        );
+
         if (context.location == 'tooltip') {
-          const currentCommitData = commitData[value];
-          return currentCommitData.commitName ?? currentCommitData.commitHash;
+          return (
+            (currentCommitData.commitName ?? currentCommitData.commitHash) +
+            ' - ' +
+            currentCommitDateTime
+          );
         }
 
-        return `commitIndex-${value}`;
+        return `commitIndex-${value} - ${currentCommitDateTime}`;
       },
     },
   ];
diff --git a/dashboard/src/utils/utils.ts b/dashboard/src/utils/utils.ts
index 81344584..c1ff89a1 100644
--- a/dashboard/src/utils/utils.ts
+++ b/dashboard/src/utils/utils.ts
@@ -1,14 +1,14 @@
 import { format } from 'date-fns';
 
-export function formatDate(date: Date | string): string {
+export function formatDate(date: Date | string, short?: boolean): string {
   const options: Intl.DateTimeFormatOptions = {
-    year: 'numeric',
-    month: 'long',
+    year: short ? '2-digit' : 'numeric',
+    month: short ? 'numeric' : 'long',
     day: 'numeric',
     hour: '2-digit',
     minute: '2-digit',
     second: '2-digit',
-    timeZoneName: 'short',
+    timeZoneName: short ? undefined : 'short',
   };
 
   if (typeof date === 'string') date = new Date(date);