Show at the top of the timeline when the current benchmark is expected to finish

site/frontend/src/pages/status/commit-sha.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import {computed} from "vue";
+import {tagLooksLikeSha} from "./data";
 
 const props = defineProps<{
   tag: string;
+  truncate?: boolean;
 }>();
 
-const looksLikeSha = computed(() => props.tag.length === 40);
+const looksLikeSha = computed(() => tagLooksLikeSha(props.tag));
 </script>
 
 <template>
@@ -14,7 +16,7 @@ const looksLikeSha = computed(() => props.tag.length === 40);
     :title="tag"
     :href="'https://github.com/rust-lang/rust/commit/' + tag"
   >
-    {{ tag.substring(0, 13) }}
+    {{ truncate ? tag.substring(0, 13) : tag }}
   </a>
   <template v-else>
     {{ tag }}

site/frontend/src/pages/status/data.ts

@@ -48,3 +48,11 @@ export type StatusResponse = {
 export function isJobComplete(job: BenchmarkJob): boolean {
   return job.status === "Failed" || job.status === "Success";
 }
+
+export function isRequestInProgress(req: BenchmarkRequest): boolean {
+  return req.status === "InProgress";
+}
+
+export function tagLooksLikeSha(tag: string): boolean {
+  return tag.length === 40;
+}

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

@@ -1,15 +1,21 @@
 <script setup lang="tsx">
 import {h, ref, Ref} from "vue";
+import {differenceInSeconds} from "date-fns";
 
 import {getJson} from "../../utils/requests";
 import {STATUS_DATA_URL} from "../../urls";
 import {withLoading} from "../../utils/loading";
-import {formatISODate, formatSecondsAsDuration} from "../../utils/formatting";
+import {
+  formatISODate,
+  formatSecondsAsDuration,
+  parseDateIsoStringOrNull,
+} from "../../utils/formatting";
 import {useExpandedStore} from "../../utils/expansion";
 import {
   BenchmarkRequest,
   CollectorConfig,
   isJobComplete,
+  isRequestInProgress,
   StatusResponse,
 } from "./data";
 import Collector from "./collector.vue";
@@ -104,6 +110,31 @@ function getErrorsLength(errors: Dict<string>) {
   return `${errorsLen} ${errorsLen > 1 ? "s" : ""}`;
 }
 
+function ExpectedCurrentRequestCompletion() {
+  const req = data.value.timeline.find(isRequestInProgress);
+  if (!req) return "";
+  if (!req.endEstimated) return "";
+  if (!req.completedAt) return "";
+  const estimatedCompleted = parseDateIsoStringOrNull(req.completedAt);
+  if (!estimatedCompleted) {
+    return null;
+  }
+
+  const now = new Date();
+  const diffSeconds = differenceInSeconds(estimatedCompleted, now);
+  const prettyDisplay = formatSecondsAsDuration(diffSeconds);
+
+  return (
+    <span>
+      Current Benchmark for{" "}
+      <strong>
+        <CommitSha tag={req.tag}></CommitSha>
+      </strong>{" "}
+      expected to end in approximately {prettyDisplay}
+    </span>
+  );
+}
+
 function PullRequestLink({request}: {request: BenchmarkRequest}) {
   if (request.requestType === "Release") {
     return "";
@@ -164,7 +195,12 @@ loadStatusData(loading);
     <div class="status-page-wrapper">
       <div class="timeline-wrapper">
         <h1>Timeline</h1>
-        <strong>Times are local.</strong>
+        <span class="small-padding-bottom">
+          <strong>Times are local.</strong>
+        </span>
+        <span class="small-padding-bottom">
+          <ExpectedCurrentRequestCompletion />
+        </span>
         <div style="margin-bottom: 10px">
           Queue length: {{ data.queueLength }}
         </div>
@@ -189,7 +225,7 @@ loadStatusData(loading);
               <tr :class="getRequestRowClassName(req)">
                 <td><PullRequestLink :request="req" /></td>
                 <td>{{ req.requestType }}</td>
-                <td><CommitSha :tag="req.tag"></CommitSha></td>
+                <td><CommitSha :truncate="true" :tag="req.tag"></CommitSha></td>
                 <td>
                   {{ formatStatus(req)
                   }}{{
@@ -364,4 +400,8 @@ loadStatusData(loading);
   grid-template-columns: repeat(auto-fill, minmax(800px, 1fr));
   grid-gap: 20px;
 }
+
+.small-padding-bottom {
+  padding-bottom: 8px;
+}
 </style>

site/frontend/src/utils/formatting.ts

@@ -27,3 +27,14 @@ export function formatISODate(dateString?: string): string {
   }
   return "";
 }
+
+export function parseDateIsoStringOrNull(dateString?: string): Date | null {
+  if (dateString) {
+    try {
+      return parseISO(dateString);
+    } catch (e) {
+      return null;
+    }
+  }
+  return null;
+}