Merge pull request #2283 from Jamesbarford/feat/job-completion-count

Job completion progress in the timeline

Author: Kobzol

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

@@ -2,7 +2,7 @@
 import {h, ref, Ref} from "vue";
 import {parseISO, differenceInHours} from "date-fns";
 import {formatISODate, shortenTag} from "../../utils/formatting";
-import {CollectorConfig, BenchmarkJobStatus} from "./data";
+import {CollectorConfig, BenchmarkJobStatus, isJobComplete} from "./data";
 
 const props = defineProps<{
   collector: CollectorConfig;
@@ -56,9 +56,7 @@ function ActiveStatus({collector}: {collector: CollectorConfig}) {
         statusText = "Offline";
         statusClass = "offline";
       } else {
-        const allJobsComplete = collector.jobs.every(
-          (job) => job.status === "Failed" || job.status === "Success"
-        );
+        const allJobsComplete = collector.jobs.every(isJobComplete);
         if (allJobsComplete) {
           statusText = "Waiting";
           statusClass = "waiting";

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

@@ -42,3 +42,7 @@ export type StatusResponse = {
   requests: BenchmarkRequest[];
   collectors: CollectorConfig[];
 };
+
+export function isJobComplete(job: BenchmarkJob): boolean {
+  return job.status === "Failed" || job.status === "Success";
+}

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

@@ -15,6 +15,7 @@ import {
   BenchmarkRequestStatus,
   CollectorConfig,
   StatusResponse,
+  isJobComplete,
 } from "./data";
 import Collector from "./collector.vue";
 
@@ -122,6 +123,25 @@ function PullRequestLink({request}: {request: BenchmarkRequest}) {
   );
 }
 
+function getJobCompletion(
+  req: BenchmarkRequest,
+  collectors: CollectorConfig[]
+) {
+  const jobs = collectors
+    .flatMap((c) => c.jobs)
+    .filter((j) => j.requestTag === req.tag);
+  if (jobs.length === 0) {
+    return "";
+  }
+  const completed = jobs.reduce((acc, job) => {
+    if (isJobComplete(job)) {
+      acc += 1;
+    }
+    return acc;
+  }, 0);
+  return `${completed} / ${jobs.length}`;
+}
+
 const {toggleExpanded: toggleExpandedErrors, isExpanded: hasExpandedErrors} =
   useExpandedStore();
 
@@ -143,6 +163,7 @@ loadStatusData(loading);
               <th>Kind</th>
               <th>Tag</th>
               <th>Status</th>
+              <th>Jobs Complete</th>
               <th>Completed At</th>
               <th>Duration</th>
               <th>Errors</th>
@@ -162,6 +183,9 @@ loadStatusData(loading);
                     req.status === "Completed" && req.hasPendingJobs ? "*" : ""
                   }}
                 </td>
+                <td>
+                  {{ getJobCompletion(req, data.collectors) }}
+                </td>
                 <td>
                   {{ formatISODate(req.completedAt) }}
                   <span v-if="req.endEstimated">(est.)</span>