Date and job status formatting

Author: Jamesbarford

site/frontend/src/pages/status_new/collector.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {ref, Ref} from "vue";
+import {formatISODate} from "../../utils/formatting";
 import {CollectorConfig, BenchmarkJobStatus} from "./data";
 
 const props = defineProps<{
@@ -26,6 +27,19 @@ const ACTIVE_FILTERS: Ref<Record<BenchmarkJobStatus, boolean>> = ref({
 function filterJobByStatus(status: string) {
   ACTIVE_FILTERS.value[status] = !ACTIVE_FILTERS.value[status];
 }
+
+function formatJobStatus(status: BenchmarkJobStatus): string {
+  switch (status) {
+    case "InProgress":
+      return "In progress";
+    case "Success":
+    case "Failed":
+    case "Queued":
+      return status;
+    default:
+      return "Unknown";
+  }
+}
 </script>
 
 <template>
@@ -62,14 +76,14 @@ function filterJobByStatus(status: string) {
         <span class="collector-meta-name">
           <strong>Last Heartbeat:</strong>
         </span>
-        <span>{{ collector.lastHeartbeatAt }}</span>
+        <span>{{ formatISODate(collector.lastHeartbeatAt) }}</span>
       </div>
 
       <div class="collector-meta">
         <span class="collector-meta-name">
           <strong>Date Added:</strong>
         </span>
-        <span>{{ collector.dateAdded }}</span>
+        <span>{{ formatISODate(collector.dateAdded) }}</span>
       </div>
     </div>
 
@@ -83,7 +97,7 @@ function filterJobByStatus(status: string) {
                 class="table-collector-status-filter-btn"
                 @click="filterJobByStatus(filter)"
               >
-                {{ filter }}
+                {{ formatJobStatus(filter) }}
                 <input
                   type="checkbox"
                   value="filter"
@@ -115,10 +129,10 @@ function filterJobByStatus(status: string) {
                 {{ job.requestTag }}
               </td>
               <td class="table-cell-padding">
-                {{ job.status }}
+                {{ formatJobStatus(job.status) }}
               </td>
               <td class="table-cell-padding">
-                {{ job.startedAt }}
+                {{ formatISODate(job.startedAt) }}
               </td>
               <td class="table-cell-padding">{{ job.backend }}</td>
               <td class="table-cell-padding">{{ job.profile }}</td>

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

@@ -4,7 +4,7 @@ import {h, ref, Ref} from "vue";
 import {getJson} from "../../utils/requests";
 import {STATUS_DATA_NEW_URL} from "../../urls";
 import {withLoading} from "../../utils/loading";
-import {formatSecondsAsDuration} from "../../utils/formatting";
+import {formatSecondsAsDuration, formatISODate} from "../../utils/formatting";
 import {useExpandedStore} from "../../utils/expansion";
 import {
   BenchmarkRequest,
@@ -158,7 +158,7 @@ loadStatusData(loading);
                     req.status === "Completed" && req.hasPendingJobs ? "*" : ""
                   }}
                 </td>
-                <td v-html="req.completedAt"></td>
+                <td v-html="formatISODate(req.completedAt)"></td>
                 <td v-html="getDuration(req)"></td>
 
                 <td v-if="hasErrors(req.errors)">

site/frontend/src/utils/formatting.ts

@@ -1,3 +1,5 @@
+import {parseISO, format} from "date-fns";
+
 // `time` has to be in seconds
 export function formatSecondsAsDuration(time: number): string {
   let seconds = time % 60;
@@ -17,3 +19,11 @@ 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 function formatISODate(dateString?: string): string {
+  if (dateString) {
+    return format(parseISO(dateString), "yyyy-MM-dd HH:mm:ss");
+  }
+  return "";
+}