Merge pull request #2339 from Kobzol/collector-compress

Modify UI of the status page

Author: Kobzol

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

@@ -1,12 +1,22 @@
 <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,
+  format,
+} from "date-fns";
+import {
+  formatISODate,
+  formatSecondsAsDuration,
+  parseDateIsoStringOrNull,
+} from "../../utils/formatting";
 import {
   CollectorConfig,
   BenchmarkJobStatus,
   isJobComplete,
   BenchmarkJob,
+  BenchmarkJobKind,
 } from "./data";
 import CommitSha from "./commit-sha.vue";
 
@@ -45,6 +55,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();
@@ -101,6 +117,35 @@ 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);
+}
+
+// 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");
+}
+
+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>
@@ -182,18 +227,18 @@ 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) }}
               </td>
-              <td>
-                {{ formatISODate(job.startedAt) }}
+              <td :title="`Started ${timeSince(job.startedAt)} ago`">
+                {{ formatTime(job.startedAt) }}
               </td>
-              <td>
-                {{ formatISODate(job.completedAt) }}
+              <td :title="jobDuration(job)">
+                {{ formatTime(job.completedAt) }}
               </td>
-              <td>{{ job.kind }}</td>
+              <td>{{ formatJobKind(job.kind) }}</td>
               <td>{{ formatBackend(job) }}</td>
               <td>
                 {{ formatProfile(job) }}

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}) {