feat(dashboard): adding dateTime on graphs

Closes #229

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;
 
@@ -109,6 +110,7 @@ const CommitNavigationGraph = (): JSX.Element => {
   type TCommitValue = {
     commitHash: string;
     commitName?: string;
+    earliestStartTime?: string;
   };
 
   const commitData: TCommitValue[] = [];
@@ -143,6 +145,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);
   });
@@ -155,7 +158,11 @@ const CommitNavigationGraph = (): JSX.Element => {
       valueFormatter: (value: number, context): string => {
         if (context.location == 'tooltip') {
           const currentCommitData = commitData[value];
-          return currentCommitData.commitName ?? currentCommitData.commitHash;
+          return (
+            (currentCommitData.commitName ?? currentCommitData.commitHash) +
+            ' - ' +
+            formatDate(currentCommitData.earliestStartTime as string, true)
+          );
         }
 
         return `commitIndex-${value}`;

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