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..cd5af192d 100644 --- a/site/frontend/src/pages/status/page.vue +++ b/site/frontend/src/pages/status/page.vue @@ -9,6 +9,10 @@ import { formatISODate, formatSecondsAsDuration, parseDateIsoStringOrNull, + setDateFmt, + getDateFmt, + DATE_FMT_12HR, + DATE_FMT_24HR, } from "../../utils/formatting"; import {useExpandedStore} from "../../utils/expansion"; import { @@ -20,6 +24,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); @@ -29,6 +34,11 @@ const data: Ref<{ collectors: CollectorConfig[]; } | null> = ref(null); +// This state exists so the UI immediately update when a user changes their +// date format preference. As only setting Local Storage does not trigger a +// re-render. +const dateFmt: Ref = ref(getDateFmt()); + type BenchmarkRequestRow = BenchmarkRequest & { isLastInProgress: boolean; hasPendingJobs: boolean; @@ -204,6 +214,17 @@ const {toggleExpanded: toggleExpandedErrors, isExpanded: hasExpandedErrors} = const tableWidth = 8; +function toggleDate() { + let nextDateFmt: string; + if (dateFmt.value === DATE_FMT_24HR) { + nextDateFmt = DATE_FMT_12HR; + } else { + nextDateFmt = DATE_FMT_24HR; + } + setDateFmt(nextDateFmt); + dateFmt.value = nextDateFmt; +} + loadStatusData(loading); @@ -212,8 +233,9 @@ loadStatusData(loading);

Timeline

- + Times are local. + @@ -421,4 +443,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..30eb1e520 100644 --- a/site/frontend/src/utils/formatting.ts +++ b/site/frontend/src/utils/formatting.ts @@ -20,10 +20,25 @@ export function formatSecondsAsDuration(time: number): string { return s; } -// Takes a date like `2025-09-10T08:22:47.161348Z` -> `"2025-09-10 08:22:47"` +export const DATE_FMT_KEY = "__rustc-perf-user-date-fmt-preference__"; +// 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 function setDateFmt(dateFmt: string) { + window.localStorage.setItem(DATE_FMT_KEY, dateFmt); +} + +export function getDateFmt() { + return window.localStorage.getItem(DATE_FMT_KEY) ?? DATE_FMT_24HR; +} + +// 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 = getDateFmt(); + return format(parseISO(dateString), dateFmt); } return ""; }