Merge pull request #2354 from Jamesbarford/feat/chose-date-fmt

Toggle status page date format between 24hr and 12hr

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/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,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);
 </script>
 
@@ -212,8 +226,12 @@ 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="preferredDateTimeFormat"
+          />
         </span>
         <span class="small-padding-bottom">
           <ExpectedCurrentRequestCompletion />
@@ -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;
+}
 </style>

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 "";
 }