Use StoredValue to remember preferred date format

Author: Kobzol

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

site/frontend/src/pages/status/page.vue

@@ -9,10 +9,9 @@ import {
   formatISODate,
   formatSecondsAsDuration,
   parseDateIsoStringOrNull,
-  setDateFmt,
-  getDateFmt,
   DATE_FMT_12HR,
   DATE_FMT_24HR,
+  preferredDateTimeFormat,
 } from "../../utils/formatting";
 import {useExpandedStore} from "../../utils/expansion";
 import {
@@ -34,11 +33,6 @@ 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<string> = ref(getDateFmt());
-
 type BenchmarkRequestRow = BenchmarkRequest & {
   isLastInProgress: boolean;
   hasPendingJobs: boolean;
@@ -216,13 +210,12 @@ const tableWidth = 8;
 
 function toggleDate() {
   let nextDateFmt: string;
-  if (dateFmt.value === DATE_FMT_24HR) {
+  if (preferredDateTimeFormat.value === DATE_FMT_24HR) {
     nextDateFmt = DATE_FMT_12HR;
   } else {
     nextDateFmt = DATE_FMT_24HR;
   }
-  setDateFmt(nextDateFmt);
-  dateFmt.value = nextDateFmt;
+  preferredDateTimeFormat.value = nextDateFmt;
 }
 
 loadStatusData(loading);
@@ -235,7 +228,10 @@ loadStatusData(loading);
         <h1>Timeline</h1>
         <span class="local-time-message small-padding-bottom">
           <strong>Times are local.</strong>
-          <DateFmtPicker :toggleDate="toggleDate" :dateFmt="dateFmt" />
+          <DateFmtPicker
+            :toggleDate="toggleDate"
+            :dateFmt="preferredDateTimeFormat"
+          />
         </span>
         <span class="small-padding-bottom">
           <ExpectedCurrentRequestCompletion />

site/frontend/src/urls.ts

@@ -1,4 +1,5 @@
-const BASE_URL = window.location.origin + "/perf";
+// const BASE_URL = window.location.origin + "/perf";
+const BASE_URL = "https://perf.rust-lang.org/perf";
 
 export const INFO_URL = `${BASE_URL}/info`;
 

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,24 +22,17 @@ export function formatSecondsAsDuration(time: number): string {
   return s;
 }
 
-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;
-}
+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) {
-    const dateFmt = getDateFmt();
+    const dateFmt = preferredDateTimeFormat.value;
     return format(parseISO(dateString), dateFmt);
   }
   return "";