Toggle status page date format between 12hr and 24hr

Author: Jamesbarford

site/frontend/src/pages/status/date-format-selection.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {DATE_FMT_12HR} from "../../utils/formatting";
+
+const props = defineProps<{
+  dateFmt: string;
+  toggleDate(): void;
+}>();
+</script>
+
+<template>
+  <span>
+    <input
+      @click="props.toggleDate"
+      :checked="props.dateFmt === DATE_FMT_12HR"
+      type="checkbox"
+      id="user-date-fmt-toggle"
+    />
+    <label for="user-date-fmt-toggle">Show 12hr date format</label><br />
+  </span>
+</template>

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,13 +24,15 @@ 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);
 
 const data: Ref<{
   timeline: BenchmarkRequestRow[];
   queueLength: number;
   collectors: CollectorConfig[];
+  dateFmt: string;
 } | null> = ref(null);
 
 type BenchmarkRequestRow = BenchmarkRequest & {
@@ -77,6 +83,7 @@ async function loadStatusData(loading: Ref<boolean>) {
       timeline,
       collectors: resp.collectors,
       queueLength,
+      dateFmt: getDateFmt(),
     };
   });
 }
@@ -101,6 +108,11 @@ function formatStatus(request: BenchmarkRequest): string {
   }
 }
 
+function formatDate(dateString?: string): string {
+  const fmt = data.value.dateFmt;
+  return formatISODate(dateString, fmt);
+}
+
 function hasErrors(request: BenchmarkRequest) {
   return Object.keys(request.errors).length !== 0;
 }
@@ -204,6 +216,17 @@ const {toggleExpanded: toggleExpandedErrors, isExpanded: hasExpandedErrors} =
 
 const tableWidth = 8;
 
+function toggleDate() {
+  let dateFmt: string;
+  if (data.value.dateFmt === DATE_FMT_24HR) {
+    dateFmt = DATE_FMT_12HR;
+  } else {
+    dateFmt = DATE_FMT_24HR;
+  }
+  setDateFmt(dateFmt);
+  data.value.dateFmt = dateFmt;
+}
+
 loadStatusData(loading);
 </script>
 
@@ -212,8 +235,9 @@ loadStatusData(loading);
     <div class="status-page-wrapper">
       <div class="timeline-wrapper">
         <h1>Timeline</h1>
-        <span class="small-padding-bottom">
+        <span class="local-time-message small-padding-bottom">
           <strong>Times are local.</strong>
+          <DateFmtPicker :toggleDate="toggleDate" :dateFmt="data.dateFmt" />
         </span>
         <span class="small-padding-bottom">
           <ExpectedCurrentRequestCompletion />
@@ -256,7 +280,7 @@ loadStatusData(loading);
                   />
                 </td>
                 <td>
-                  {{ formatISODate(req.completedAt) }}
+                  {{ formatDate(req.completedAt) }}
                   <span v-if="req.endEstimated">(est.)</span>
                 </td>
                 <td style="text-align: right">
@@ -421,4 +445,11 @@ loadStatusData(loading);
 .small-padding-bottom {
   padding-bottom: 8px;
 }
+
+.local-time-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 12px;
+}
 </style>

site/frontend/src/utils/formatting.ts

@@ -20,10 +20,23 @@ export function formatSecondsAsDuration(time: number): string {
   return s;
 }
 
+export const DATE_FMT_KEY = "__rustc-perf-user-date-fmt-preference__";
+export const DATE_FMT_24HR = "yyyy-MM-dd HH:mm:ss";
+export const DATE_FMT_12HR = "yyyy-MM-dd pp";
+
+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` -> `"2025-09-10 08:22:47"`
-export function formatISODate(dateString?: string): string {
+export function formatISODate(dateString?: string, fmt?: string): string {
   if (dateString) {
-    return format(parseISO(dateString), "yyyy-MM-dd HH:mm:ss");
+    const dateFmt = fmt ?? getDateFmt();
+    return format(parseISO(dateString), dateFmt);
   }
   return "";
 }