From 40db8d112ae7fee7d70f73fbf50609c3df075de0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= Date: Mon, 20 Oct 2025 11:31:00 +0200 Subject: [PATCH 01/10] Add link to commit SHA in timeline table --- site/frontend/src/pages/status_new/page.vue | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/site/frontend/src/pages/status_new/page.vue b/site/frontend/src/pages/status_new/page.vue index 539cf4fd9..c86b5172c 100644 --- a/site/frontend/src/pages/status_new/page.vue +++ b/site/frontend/src/pages/status_new/page.vue @@ -123,6 +123,18 @@ function PullRequestLink({request}: {request: BenchmarkRequest}) { ); } +function CommitSha({request}: {request: BenchmarkRequest}): string { + if (request.requestType === "Release") { + return request.tag; + } + const sha = request.tag; + return ( + + {sha.substring(0, 13)} + + ); +} + function getJobCompletion( req: BenchmarkRequest, collectors: CollectorConfig[] @@ -174,9 +186,7 @@ loadStatusData(loading); {{ req.requestType }} - - {{ shortenTag(req.tag) }} - + {{ formatStatus(req.status) }}{{ From 37d25e477f8cd30db73f52891e464f619052f546 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= Date: Mon, 20 Oct 2025 12:19:48 +0200 Subject: [PATCH 02/10] Bring the look of the new status page table closer to the old one --- site/frontend/src/pages/status_new/page.vue | 137 ++++++++++---------- 1 file changed, 65 insertions(+), 72 deletions(-) diff --git a/site/frontend/src/pages/status_new/page.vue b/site/frontend/src/pages/status_new/page.vue index c86b5172c..72d1a08ad 100644 --- a/site/frontend/src/pages/status_new/page.vue +++ b/site/frontend/src/pages/status_new/page.vue @@ -4,39 +4,32 @@ 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, - formatISODate, - shortenTag, -} from "../../utils/formatting"; +import {formatISODate, formatSecondsAsDuration} from "../../utils/formatting"; import {useExpandedStore} from "../../utils/expansion"; import { BenchmarkRequest, BenchmarkRequestStatus, CollectorConfig, - StatusResponse, isJobComplete, + StatusResponse, } from "./data"; import Collector from "./collector.vue"; const loading = ref(true); const data: Ref<{ - timeline: BenchmarkRequestWithWaterLine[]; + timeline: BenchmarkRequestRow[]; queueLength: number; collectors: CollectorConfig[]; } | null> = ref(null); -type BenchmarkRequestWithWaterLine = BenchmarkRequest & { +type BenchmarkRequestRow = BenchmarkRequest & { isLastInProgress: boolean; hasPendingJobs: boolean; }; -function getRequestRowClassName(req: BenchmarkRequestWithWaterLine) { - const inProgress = req.status === "InProgress"; - if (inProgress && req.isLastInProgress) { - return "timeline-waterline"; - } else if (inProgress) { +function getRequestRowClassName(req: BenchmarkRequestRow) { + if (req.status === "InProgress") { return "timeline-row-bold"; } return ""; @@ -47,7 +40,7 @@ async function loadStatusData(loading: Ref) { let resp: StatusResponse = await getJson( STATUS_DATA_NEW_URL ); - let timeline: BenchmarkRequestWithWaterLine[] = []; + let timeline: BenchmarkRequestRow[] = []; let queueLength = 0; @@ -135,28 +128,43 @@ function CommitSha({request}: {request: BenchmarkRequest}): string { ); } -function getJobCompletion( - req: BenchmarkRequest, - collectors: CollectorConfig[] -) { +function RequestProgress({ + request, + collectors, +}: { + request: BenchmarkRequest; + collectors: CollectorConfig[]; +}): string { const jobs = collectors .flatMap((c) => c.jobs) - .filter((j) => j.requestTag === req.tag); - if (jobs.length === 0) { - return ""; - } + .filter((j) => j.requestTag === request.tag); const completed = jobs.reduce((acc, job) => { if (isJobComplete(job)) { acc += 1; } return acc; }, 0); - return `${completed} / ${jobs.length}`; + + if (request.status === "Completed") { + return "✅"; + } else if (request.status === "Queued") { + return ""; + } else { + return ( + + ); + } } const {toggleExpanded: toggleExpandedErrors, isExpanded: hasExpandedErrors} = useExpandedStore(); +const tableWidth = 8; + loadStatusData(loading); @@ -175,7 +183,7 @@ loadStatusData(loading); Kind Tag Status - Jobs Complete + Progress Completed At Duration Errors @@ -183,6 +191,9 @@ loadStatusData(loading); @@ -249,74 +267,49 @@ loadStatusData(loading); } .collector-wrapper { - width: 100%; display: flex; align-items: center; flex-direction: column; padding-left: 8px; } -.timeline-waterline { - border-bottom: 1px solid black; - font-weight: bold; -} - .timeline-row-bold { font-weight: bold; } .timeline-wrapper { display: flex; - justify-content: center; - align-items: center; - height: fit-content; flex-direction: column; - width: 100%; - padding-right: 8px; + align-items: center; + margin-bottom: 50px; table { border-collapse: collapse; font-size: 1.1em; - width: 100%; + + @media screen and (max-width: 850px) { + align-self: start; + } th, td { - padding: 0.2em; + text-align: center; } th { - text-align: center; + padding: 1em 0.5em; } - td { - text-align: left; - padding: 0 0.5em; - &.centered { - text-align: center; - } - &.right-align { - text-align: right; - } + td { + padding: 1px 0.5em; } + tr.active { font-weight: bold; } } - - @media screen and (min-width: 1440px) { - width: 100%; - } } -.wrapper { - display: grid; - column-gap: 100px; - grid-template-columns: 1fr; - - @media screen and (min-width: 1440px) { - grid-template-columns: 4fr 6fr; - } -} .current { max-width: 100%; width: fit-content; From 9e2dffdce9ada80b0a0f70cac349cc9f9957d9fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= Date: Mon, 20 Oct 2025 13:59:25 +0200 Subject: [PATCH 03/10] Send job kind to the frontend --- site/frontend/src/pages/status_new/data.ts | 2 ++ site/src/api.rs | 1 + site/src/request_handlers/status_page_new.rs | 1 + 3 files changed, 4 insertions(+) diff --git a/site/frontend/src/pages/status_new/data.ts b/site/frontend/src/pages/status_new/data.ts index 7b6d07055..6bee47353 100644 --- a/site/frontend/src/pages/status_new/data.ts +++ b/site/frontend/src/pages/status_new/data.ts @@ -14,9 +14,11 @@ export type BenchmarkRequest = { }; export type BenchmarkJobStatus = "Queued" | "InProgress" | "Success" | "Failed"; +export type BenchmarkJobKind = "compiletime" | "runtimeInProgress" | "rustc"; export type BenchmarkJob = { requestTag: string; + kind: BenchmarkJobKind; target: string; backend: string; profile: string; diff --git a/site/src/api.rs b/site/src/api.rs index a97aba339..67b4b7d9f 100644 --- a/site/src/api.rs +++ b/site/src/api.rs @@ -438,6 +438,7 @@ pub mod status_new { #[serde(rename_all = "camelCase")] pub struct BenchmarkJob { pub request_tag: String, + pub kind: String, pub target: String, pub backend: String, pub profile: String, diff --git a/site/src/request_handlers/status_page_new.rs b/site/src/request_handlers/status_page_new.rs index cd58ae122..3bd785bf2 100644 --- a/site/src/request_handlers/status_page_new.rs +++ b/site/src/request_handlers/status_page_new.rs @@ -231,6 +231,7 @@ fn job_to_ui(job: &BenchmarkJob) -> status_new::BenchmarkJob { status_new::BenchmarkJob { request_tag: job.request_tag().to_string(), + kind: job.kind().to_string(), target: job.target().as_str().to_string(), backend: job.backend().as_str().to_string(), profile: job.profile().as_str().to_string(), From 943cb33bb8432a1420d31c99360f52378eb82a34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= Date: Mon, 20 Oct 2025 14:12:11 +0200 Subject: [PATCH 04/10] Extract a component for rendering benchmark request tag as commit SHA link --- .../src/pages/status_new/collector.vue | 11 ++++++++-- .../src/pages/status_new/commit-sha.vue | 21 +++++++++++++++++++ site/frontend/src/pages/status_new/page.vue | 15 ++----------- site/frontend/src/utils/formatting.ts | 8 ------- 4 files changed, 32 insertions(+), 23 deletions(-) create mode 100644 site/frontend/src/pages/status_new/commit-sha.vue diff --git a/site/frontend/src/pages/status_new/collector.vue b/site/frontend/src/pages/status_new/collector.vue index 4345692c1..ee86565bd 100644 --- a/site/frontend/src/pages/status_new/collector.vue +++ b/site/frontend/src/pages/status_new/collector.vue @@ -1,8 +1,14 @@ + + diff --git a/site/frontend/src/pages/status_new/page.vue b/site/frontend/src/pages/status_new/page.vue index 72d1a08ad..bd8be04e6 100644 --- a/site/frontend/src/pages/status_new/page.vue +++ b/site/frontend/src/pages/status_new/page.vue @@ -14,6 +14,7 @@ import { StatusResponse, } from "./data"; import Collector from "./collector.vue"; +import CommitSha from "./commit-sha.vue"; const loading = ref(true); @@ -116,18 +117,6 @@ function PullRequestLink({request}: {request: BenchmarkRequest}) { ); } -function CommitSha({request}: {request: BenchmarkRequest}): string { - if (request.requestType === "Release") { - return request.tag; - } - const sha = request.tag; - return ( - - {sha.substring(0, 13)} - - ); -} - function RequestProgress({ request, collectors, @@ -197,7 +186,7 @@ loadStatusData(loading); {{ req.requestType }} - + {{ formatStatus(req.status) }}{{ diff --git a/site/frontend/src/utils/formatting.ts b/site/frontend/src/utils/formatting.ts index 7f32e4eb6..d0b91c292 100644 --- a/site/frontend/src/utils/formatting.ts +++ b/site/frontend/src/utils/formatting.ts @@ -27,11 +27,3 @@ export function formatISODate(dateString?: string): string { } return ""; } - -// Shorten a tag, only commit shas will be truncated -export function shortenTag(tag: string): string { - if (tag.length < 40) { - return tag; - } - return tag.slice(0, 12); -} From f5098dcc3e2e0ba8c2b2844da29f9fd830599160 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= Date: Mon, 20 Oct 2025 14:28:28 +0200 Subject: [PATCH 05/10] Rename table header to fit both future and past times --- site/frontend/src/pages/status_new/page.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/frontend/src/pages/status_new/page.vue b/site/frontend/src/pages/status_new/page.vue index bd8be04e6..3943614a5 100644 --- a/site/frontend/src/pages/status_new/page.vue +++ b/site/frontend/src/pages/status_new/page.vue @@ -173,7 +173,7 @@ loadStatusData(loading); Tag Status Progress - Completed At + Complete at Duration Errors From f8c8d7ec7c1367586cf621d988b97412bb552718 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= Date: Mon, 20 Oct 2025 14:28:35 +0200 Subject: [PATCH 06/10] Right align durations --- site/frontend/src/pages/status_new/page.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/frontend/src/pages/status_new/page.vue b/site/frontend/src/pages/status_new/page.vue index 3943614a5..a0958132e 100644 --- a/site/frontend/src/pages/status_new/page.vue +++ b/site/frontend/src/pages/status_new/page.vue @@ -203,7 +203,7 @@ loadStatusData(loading); {{ formatISODate(req.completedAt) }} (est.) - + {{ getDuration(req) }} From 605e75a6ed5599efa3ac699291ec8ebfc921b090 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= Date: Mon, 20 Oct 2025 14:29:01 +0200 Subject: [PATCH 07/10] Put multiple collectors on a single row if there's enough space --- site/frontend/src/pages/status_new/page.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/frontend/src/pages/status_new/page.vue b/site/frontend/src/pages/status_new/page.vue index a0958132e..249c35369 100644 --- a/site/frontend/src/pages/status_new/page.vue +++ b/site/frontend/src/pages/status_new/page.vue @@ -342,7 +342,7 @@ loadStatusData(loading); .collectors-grid { width: 100%; display: grid; - grid-template-columns: repeat(auto-fill, minmax(500px, 100%)); - gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(800px, 1fr)); + grid-gap: 20px; } From 42d2e48d81edd7e6916c6d64ffe9c56db9d28de6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= Date: Mon, 20 Oct 2025 14:29:29 +0200 Subject: [PATCH 08/10] Render job kind --- .../src/pages/status_new/collector.vue | 55 ++++++++++++------- 1 file changed, 35 insertions(+), 20 deletions(-) diff --git a/site/frontend/src/pages/status_new/collector.vue b/site/frontend/src/pages/status_new/collector.vue index ee86565bd..0b060ff58 100644 --- a/site/frontend/src/pages/status_new/collector.vue +++ b/site/frontend/src/pages/status_new/collector.vue @@ -86,6 +86,21 @@ function ActiveStatus({collector}: {collector: CollectorConfig}) { function toggleShowJobs() { showJobs.value = !showJobs.value; } + +function formatBackend(job: BenchmarkJob): string { + if (job.kind === "compiletime") { + return job.backend; + } else { + return ""; + } +} +function formatProfile(job: BenchmarkJob): string { + if (job.kind === "compiletime") { + return job.profile; + } else { + return ""; + } +}