From 6b2b7943e21a1529cf2cab39abce5456a37a4b20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Fri, 5 Dec 2025 13:00:23 +0100
Subject: [PATCH 1/6] Do not show negative time in expected benchmark end

---
 site/frontend/src/pages/status/page.vue | 42 +++++++++++++------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/site/frontend/src/pages/status/page.vue b/site/frontend/src/pages/status/page.vue
index 1504fb9eb..0f91fa89a 100644
--- a/site/frontend/src/pages/status/page.vue
+++ b/site/frontend/src/pages/status/page.vue
@@ -122,32 +122,34 @@ function ExpectedCurrentRequestCompletion() {
 
   const now = new Date();
   const diffSeconds = differenceInSeconds(estimatedCompleted, now);
-  const prettyDisplay = formatSecondsAsDuration(diffSeconds);
 
+  let expectedEnd: string;
+  if (diffSeconds >= 0) {
+    let remainingSeconds = formatSecondsAsDuration(diffSeconds);
+    expectedEnd = `expected to end in approximately ${remainingSeconds}`;
+  } else {
+    expectedEnd = "is running longer than expected";
+  }
+
+  let kind = "PR";
+  let link;
   if (req.requestType === "Release") {
-    return (
-      <span>
-        Current Benchmark for{" "}
-        <strong>
-          <CommitSha tag={req.tag}></CommitSha>
-        </strong>{" "}
-        expected to end in approximately {prettyDisplay}
-      </span>
-    );
+    link = <CommitSha tag={req.tag}></CommitSha>;
+    kind = "";
   } else {
     const url = `https://github.com/rust-lang/rust/pull/${req.pr}`;
-    return (
-      <span>
-        Current Benchmark for PR{" "}
-        <strong>
-          <a href={url} target="_blank">
-            #{req.pr}
-          </a>{" "}
-        </strong>
-        expected to end in approximately {prettyDisplay}
-      </span>
+    link = (
+      <a href={url} target="_blank">
+        #{req.pr}
+      </a>
     );
   }
+
+  return (
+    <span>
+      Current benchmark for {kind} <strong>{link}</strong> {expectedEnd}.
+    </span>
+  );
 }
 
 function PullRequestLink({request}: {request: BenchmarkRequest}) {

From 714fcafff87705aa9d59aedf3daae0fe85a379c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Fri, 5 Dec 2025 13:04:12 +0100
Subject: [PATCH 2/6] Truncate tag in collector table

---
 site/frontend/src/pages/status/collector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/frontend/src/pages/status/collector.vue b/site/frontend/src/pages/status/collector.vue
index c414c2aa9..5f1f0d285 100644
--- a/site/frontend/src/pages/status/collector.vue
+++ b/site/frontend/src/pages/status/collector.vue
@@ -182,7 +182,7 @@ function formatProfile(job: BenchmarkJob): string {
           <template v-for="job in collector.jobs">
             <tr v-if="ACTIVE_FILTERS[job.status]">
               <td>
-                <CommitSha :tag="job.requestTag"></CommitSha>
+                <CommitSha :tag="job.requestTag" :truncate="true"></CommitSha>
               </td>
               <td>
                 {{ formatJobStatus(job.status) }}

From ac23782e69989db119daa81fa1a8c6d82ea40751 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Fri, 5 Dec 2025 13:07:21 +0100
Subject: [PATCH 3/6] Show time since a job has started

---
 site/frontend/src/pages/status/collector.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/site/frontend/src/pages/status/collector.vue b/site/frontend/src/pages/status/collector.vue
index 5f1f0d285..ee0ea8438 100644
--- a/site/frontend/src/pages/status/collector.vue
+++ b/site/frontend/src/pages/status/collector.vue
@@ -1,7 +1,11 @@
 <script setup lang="tsx">
 import {h, ref, Ref} from "vue";
-import {parseISO, differenceInHours} from "date-fns";
-import {formatISODate} from "../../utils/formatting";
+import {parseISO, differenceInHours, differenceInSeconds} from "date-fns";
+import {
+  formatISODate,
+  formatSecondsAsDuration,
+  parseDateIsoStringOrNull,
+} from "../../utils/formatting";
 import {
   CollectorConfig,
   BenchmarkJobStatus,
@@ -101,6 +105,15 @@ function formatProfile(job: BenchmarkJob): string {
     return "";
   }
 }
+function timeSince(timestamp: string): string {
+  const date = parseDateIsoStringOrNull(timestamp);
+  if (date === null) {
+    return "";
+  }
+  const now = new Date();
+  const diffSeconds = differenceInSeconds(now, date);
+  return formatSecondsAsDuration(diffSeconds);
+}
 </script>
 
 <template>
@@ -187,7 +200,7 @@ function formatProfile(job: BenchmarkJob): string {
               <td>
                 {{ formatJobStatus(job.status) }}
               </td>
-              <td>
+              <td :title="`Started ${timeSince(job.startedAt)} ago`">
                 {{ formatISODate(job.startedAt) }}
               </td>
               <td>

From 87576ce0a75a206811cf90aab7a5ba5d5f6d9388 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Fri, 5 Dec 2025 13:08:01 +0100
Subject: [PATCH 4/6] Shorten `compiletime` to just `compile`

---
 site/frontend/src/pages/status/collector.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/site/frontend/src/pages/status/collector.vue b/site/frontend/src/pages/status/collector.vue
index ee0ea8438..dae4c3822 100644
--- a/site/frontend/src/pages/status/collector.vue
+++ b/site/frontend/src/pages/status/collector.vue
@@ -11,6 +11,7 @@ import {
   BenchmarkJobStatus,
   isJobComplete,
   BenchmarkJob,
+  BenchmarkJobKind,
 } from "./data";
 import CommitSha from "./commit-sha.vue";
 
@@ -49,6 +50,12 @@ function formatJobStatus(status: BenchmarkJobStatus): string {
       return "Unknown";
   }
 }
+function formatJobKind(kind: BenchmarkJobKind): string {
+  if (kind === "compiletime") {
+    return "compile";
+  }
+  return kind;
+}
 
 function ActiveStatus({collector}: {collector: CollectorConfig}) {
   const now = new Date();
@@ -206,7 +213,7 @@ function timeSince(timestamp: string): string {
               <td>
                 {{ formatISODate(job.completedAt) }}
               </td>
-              <td>{{ job.kind }}</td>
+              <td>{{ formatJobKind(job.kind) }}</td>
               <td>{{ formatBackend(job) }}</td>
               <td>
                 {{ formatProfile(job) }}

From 2f61c20c1cb7407a1260df01563d43ca3d8f59ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Fri, 5 Dec 2025 13:11:30 +0100
Subject: [PATCH 5/6] Only show time, not date, in collector job datetime
 columns

---
 site/frontend/src/pages/status/collector.vue | 21 +++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/site/frontend/src/pages/status/collector.vue b/site/frontend/src/pages/status/collector.vue
index dae4c3822..c775e1b13 100644
--- a/site/frontend/src/pages/status/collector.vue
+++ b/site/frontend/src/pages/status/collector.vue
@@ -1,6 +1,11 @@
 <script setup lang="tsx">
 import {h, ref, Ref} from "vue";
-import {parseISO, differenceInHours, differenceInSeconds} from "date-fns";
+import {
+  parseISO,
+  differenceInHours,
+  differenceInSeconds,
+  format,
+} from "date-fns";
 import {
   formatISODate,
   formatSecondsAsDuration,
@@ -121,6 +126,16 @@ function timeSince(timestamp: string): string {
   const diffSeconds = differenceInSeconds(now, date);
   return formatSecondsAsDuration(diffSeconds);
 }
+
+// Takes a date like `2025-09-10T08:22:47.161348Z` and shows just the time
+// portion (`08:22:47`).
+function formatTime(dateString: string | null): string {
+  const date = parseDateIsoStringOrNull(dateString);
+  if (date === null) {
+    return "";
+  }
+  return format(date, "HH:mm:ss");
+}
 </script>
 
 <template>
@@ -208,10 +223,10 @@ function timeSince(timestamp: string): string {
                 {{ formatJobStatus(job.status) }}
               </td>
               <td :title="`Started ${timeSince(job.startedAt)} ago`">
-                {{ formatISODate(job.startedAt) }}
+                {{ formatTime(job.startedAt) }}
               </td>
               <td>
-                {{ formatISODate(job.completedAt) }}
+                {{ formatTime(job.completedAt) }}
               </td>
               <td>{{ formatJobKind(job.kind) }}</td>
               <td>{{ formatBackend(job) }}</td>

From 25b3936430039628ce484410bc3142ed638c7909 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Fri, 5 Dec 2025 13:15:47 +0100
Subject: [PATCH 6/6] Show duration of completed jobs on hover

---
 site/frontend/src/pages/status/collector.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/site/frontend/src/pages/status/collector.vue b/site/frontend/src/pages/status/collector.vue
index c775e1b13..dbe6f6499 100644
--- a/site/frontend/src/pages/status/collector.vue
+++ b/site/frontend/src/pages/status/collector.vue
@@ -136,6 +136,16 @@ function formatTime(dateString: string | null): string {
   }
   return format(date, "HH:mm:ss");
 }
+
+function jobDuration(job: BenchmarkJob): string {
+  if (!isJobComplete(job)) {
+    return "";
+  }
+  const start = parseDateIsoStringOrNull(job.startedAt);
+  const end = parseDateIsoStringOrNull(job.completedAt);
+  const diff = differenceInSeconds(end, start);
+  return `Job took ${formatSecondsAsDuration(diff)}`;
+}
 </script>
 
 <template>
@@ -225,7 +235,7 @@ function formatTime(dateString: string | null): string {
               <td :title="`Started ${timeSince(job.startedAt)} ago`">
                 {{ formatTime(job.startedAt) }}
               </td>
-              <td>
+              <td :title="jobDuration(job)">
                 {{ formatTime(job.completedAt) }}
               </td>
               <td>{{ formatJobKind(job.kind) }}</td>