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 { formatDateShort } 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) +
+            ' - ' +
+            formatDateShort(currentCommitData.earliestStartTime as string)
+          );
         }
 
         return `commitIndex-${value}`;

dashboard/src/utils/utils.ts

@@ -17,6 +17,22 @@ export function formatDate(date: Date | string): string {
   return new Intl.DateTimeFormat('en-US', options).format(date);
 }
 
+export function formatDateShort(date: Date | string): string {
+  const options: Intl.DateTimeFormatOptions = {
+    year: '2-digit',
+    month: 'numeric',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  };
+
+  if (typeof date === 'string') date = new Date(date);
+  if (isNaN(date.getTime())) return '-';
+
+  return new Intl.DateTimeFormat('en-US', options).format(date);
+}
+
 export const getDateOffset = (date: Date): string => {
   return format(date, 'z');
 };