diff --git a/dashboard/src/pages/TreeDetails/Tabs/CommitNavigationGraph.tsx b/dashboard/src/pages/TreeDetails/Tabs/CommitNavigationGraph.tsx index ad80d95..399321f 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; @@ -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}`; diff --git a/dashboard/src/utils/utils.ts b/dashboard/src/utils/utils.ts index 8134458..c1ff89a 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);