diff --git a/site/frontend/src/pages/compare/prefs.ts b/site/frontend/src/pages/compare/prefs.ts index 5a03582c7..5e8203600 100644 --- a/site/frontend/src/pages/compare/prefs.ts +++ b/site/frontend/src/pages/compare/prefs.ts @@ -1,4 +1,5 @@ import {createStoredValue} from "../../storage"; +import {DATE_FMT_24HR} from "../../utils/formatting"; export const PREF_FILTERS_OPENED = createStoredValue( "compare.filters-opened", @@ -8,3 +9,7 @@ export const PREF_AGGREGATIONS_OPENED = createStoredValue( "compare.aggregations-opened", false ); +export const PREF_DATETIME_FORMAT = createStoredValue( + "general.date-time-format", + DATE_FMT_24HR +); diff --git a/site/frontend/src/pages/status/date-format-selection.vue b/site/frontend/src/pages/status/date-format-selection.vue new file mode 100644 index 000000000..ea730b934 --- /dev/null +++ b/site/frontend/src/pages/status/date-format-selection.vue @@ -0,0 +1,20 @@ + + + diff --git a/site/frontend/src/pages/status/page.vue b/site/frontend/src/pages/status/page.vue index 0f91fa89a..2ae9a9f0f 100644 --- a/site/frontend/src/pages/status/page.vue +++ b/site/frontend/src/pages/status/page.vue @@ -9,6 +9,9 @@ import { formatISODate, formatSecondsAsDuration, parseDateIsoStringOrNull, + DATE_FMT_12HR, + DATE_FMT_24HR, + preferredDateTimeFormat, } from "../../utils/formatting"; import {useExpandedStore} from "../../utils/expansion"; import { @@ -20,6 +23,7 @@ import { } from "./data"; import Collector from "./collector.vue"; import CommitSha from "./commit-sha.vue"; +import DateFmtPicker from "./date-format-selection.vue"; const loading = ref(true); @@ -204,6 +208,16 @@ const {toggleExpanded: toggleExpandedErrors, isExpanded: hasExpandedErrors} = const tableWidth = 8; +function toggleDate() { + let nextDateFmt: string; + if (preferredDateTimeFormat.value === DATE_FMT_24HR) { + nextDateFmt = DATE_FMT_12HR; + } else { + nextDateFmt = DATE_FMT_24HR; + } + preferredDateTimeFormat.value = nextDateFmt; +} + loadStatusData(loading); @@ -212,8 +226,12 @@ loadStatusData(loading);

Timeline

- + Times are local. + @@ -421,4 +439,11 @@ loadStatusData(loading); .small-padding-bottom { padding-bottom: 8px; } + +.local-time-message { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 12px; +} diff --git a/site/frontend/src/utils/formatting.ts b/site/frontend/src/utils/formatting.ts index 16e5fdf96..c8319a3f8 100644 --- a/site/frontend/src/utils/formatting.ts +++ b/site/frontend/src/utils/formatting.ts @@ -1,4 +1,6 @@ import {parseISO, format} from "date-fns"; +import {createPersistedRef} from "../storage"; +import {PREF_DATETIME_FORMAT} from "../pages/compare/prefs"; // `time` has to be in seconds export function formatSecondsAsDuration(time: number): string { @@ -20,10 +22,18 @@ export function formatSecondsAsDuration(time: number): string { return s; } -// Takes a date like `2025-09-10T08:22:47.161348Z` -> `"2025-09-10 08:22:47"` +// Date formats taken from https://date-fns.org/v4.1.0/docs/format +export const DATE_FMT_24HR = "yyyy-MM-dd HH:mm:ss"; +export const DATE_FMT_12HR = "yyyy-MM-dd hh:mm:ss a"; + +export const preferredDateTimeFormat = createPersistedRef(PREF_DATETIME_FORMAT); + +// Takes a date like `2025-09-10T08:22:47.161348Z` and formats it according to +// the user preference stored in local storage (either 12 hour or 24 hour format). export function formatISODate(dateString?: string): string { if (dateString) { - return format(parseISO(dateString), "yyyy-MM-dd HH:mm:ss"); + const dateFmt = preferredDateTimeFormat.value; + return format(parseISO(dateString), dateFmt); } return ""; }