Skip to content

Commit cfae2af

Browse files
subinz1subinz1
authored
[CRCR] Align per-repo page styling and fix tooltip behavior (#8467)
## Summary Aligns both PR and nightly per-repo dashboard pages (`/crcr/{org}/{repo}`) with the main HUD styling, and fixes tooltip-related issues. ### 1. Fix scrollbar on tooltip hover The table wrapper uses `overflowX: auto` for horizontal scrolling, but the `TooltipTarget` popup (`position: absolute`) expands the scrollable area vertically, causing both scrollbars to flash on hover. Setting `overflowY: visible` on both table wrappers lets the tooltip escape the container without triggering scrollbars. ### 2. Align column/row highlighting with main HUD - **PR matrix header**: Was applying `hudStyles.highlight` to both the `<th>` and the inner `<span>`, causing a double-highlight. Removed highlight from `<th>` to match main HUD. - **Nightly matrix**: Converted from inline styles to `hudStyles` CSS classes and added column/row highlighting via `CrcrPinnedContext`. ### 3. Align nightly matrix with PR matrix styling Replaced all inline style constants (`headerBaseStyle`, `jobHeaderStyle`, `jobHeaderNameStyle`, `cellStyle`) with `hudStyles` CSS classes (`hudTable`, `regularHeader`, `jobHeader`, `jobHeaderName`, `colTime`, `colSha`, `colCommit`, `colJob`, `jobMetadata`, `jobMetadataTruncated`, `mono`). Both matrices now use identical styling. ### 4. Link "Show log" to specific job Tooltip "Show log" link now navigates to the specific job (`workflow_run_url/job/check_run_id`) instead of the workflow run overview page. ### Cleanup - Removed unused `CSSProperties` import - Removed unused MUI `Tooltip` import (replaced with native `title` attribute) - Added `hudStyles.mono` to SHA cell in PR matrix for consistency | Commit | What | |--------|------| | `016880f` | Fix scrollbar on tooltip hover (`overflowY: visible`) | | `1ef362f` | Align highlighting + convert nightly to hudStyles | | `f5df5d1` | Fix Prettier ternary formatting | | `1936683` | Fix Prettier className ternary | | `67067fd` | Replace MUI Tooltip with native `title` in nightly | | `fa28915` | Add `mono` class to SHA cell in PR matrix | | `90a76d6` | Link "Show log" to specific job via `check_run_id` | ## Test plan - [ ] Hover over job cell — no scrollbars appear - [ ] Click a cell to pin tooltip — "Show log" links to the specific job - [ ] Click a column header — yellow highlight through entire column - [ ] Click a row — yellow highlight on entire row - [ ] Press Escape or click elsewhere — highlight dismissed - [ ] SHA column renders in monospace on both PR and nightly views - [ ] All above works on both PR view and nightly view (`?event=nightly`)
1 parent 0fe1899 commit cfae2af

1 file changed

Lines changed: 92 additions & 94 deletions

File tree

‎torchci/pages/crcr/[org]/[repo].tsx‎

Lines changed: 92 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
SelectChangeEvent,
1010
Skeleton,
1111
Stack,
12-
Tooltip,
1312
Typography,
1413
} from "@mui/material";
1514
import { durationDisplay } from "components/common/TimeUtils";
@@ -21,7 +20,6 @@ import Head from "next/head";
2120
import NextLink from "next/link";
2221
import { useRouter } from "next/router";
2322
import {
24-
CSSProperties,
2523
createContext,
2624
useCallback,
2725
useContext,
@@ -238,8 +236,16 @@ const conclusionCssColor: Record<string, string> = {
238236
neutral: "var(--color-grey, #8b949e)",
239237
};
240238

239+
function jobUrl(job: CrcrJobRow): string {
240+
if (job.workflow_run_url && job.check_run_id) {
241+
return `${job.workflow_run_url}/job/${job.check_run_id}`;
242+
}
243+
return job.workflow_run_url || "";
244+
}
245+
241246
function JobCellTooltipContent({ job }: { job: CrcrJobRow }) {
242247
const conclusion = job.status === "completed" ? job.conclusion : job.status;
248+
const url = jobUrl(job);
243249
const lines = [
244250
`Job: ${job.job_name}`,
245251
`Status: ${conclusion}`,
@@ -258,10 +264,10 @@ function JobCellTooltipContent({ job }: { job: CrcrJobRow }) {
258264
return (
259265
<div style={{ whiteSpace: "pre-line", fontSize: "0.8rem" }}>
260266
{lines.join("\n")}
261-
{job.workflow_run_url && (
267+
{url && (
262268
<div style={{ marginTop: 4 }}>
263269
<a
264-
href={job.workflow_run_url}
270+
href={url}
265271
target="_blank"
266272
rel="noopener noreferrer"
267273
style={{ color: "var(--link-color, #58a6ff)" }}
@@ -403,11 +409,12 @@ function GroupedJobCell({
403409
</div>
404410
{jobs.map((j) => {
405411
const c = j.status === "completed" ? j.conclusion : j.status;
412+
const url = jobUrl(j);
406413
return (
407414
<div key={j.job_name}>
408-
{j.workflow_run_url ? (
415+
{url ? (
409416
<a
410-
href={j.workflow_run_url}
417+
href={url}
411418
target="_blank"
412419
rel="noopener noreferrer"
413420
style={{ color: "var(--link-color, #58a6ff)" }}
@@ -640,41 +647,6 @@ function useCommitInfo(
640647
}, [data]);
641648
}
642649

643-
// ---- Table Styles (matching main HUD) ----
644-
645-
const headerBaseStyle: CSSProperties = {
646-
fontFamily: "sans-serif",
647-
fontSize: "0.75rem",
648-
fontWeight: 600,
649-
padding: "4px 6px",
650-
whiteSpace: "nowrap",
651-
textAlign: "left",
652-
borderBottom: "1px solid #30363d",
653-
};
654-
655-
const jobHeaderStyle: CSSProperties = {
656-
fontFamily: "sans-serif",
657-
height: 120,
658-
whiteSpace: "nowrap",
659-
padding: 0,
660-
borderBottom: "1px solid #30363d",
661-
position: "relative",
662-
};
663-
664-
const jobHeaderNameStyle: CSSProperties = {
665-
transform: "translate(5px, 45px) rotate(315deg)",
666-
transformOrigin: "left bottom",
667-
width: 12,
668-
fontWeight: 400,
669-
fontSize: "0.75em",
670-
};
671-
672-
const cellStyle: CSSProperties = {
673-
padding: "3px 6px",
674-
whiteSpace: "nowrap",
675-
fontSize: "0.8rem",
676-
verticalAlign: "middle",
677-
};
678650
// ---- PR Matrix Table ----
679651

680652
function CrcrMatrix({
@@ -752,7 +724,7 @@ function CrcrMatrix({
752724

753725
return (
754726
<>
755-
<div style={{ overflowX: "auto" }}>
727+
<div style={{ overflowX: "auto", overflowY: "visible" }}>
756728
<table className={hudStyles.hudTable}>
757729
<colgroup>
758730
<col className={hudStyles.colTime} />
@@ -774,9 +746,7 @@ function CrcrMatrix({
774746
{columns.map((col) => (
775747
<th
776748
key={col.name}
777-
className={`${hudStyles.jobHeader} ${
778-
pinnedId.name === col.name ? hudStyles.highlight : ""
779-
}`}
749+
className={hudStyles.jobHeader}
780750
style={{ cursor: "pointer" }}
781751
onClick={(e) => {
782752
e.stopPropagation();
@@ -832,13 +802,15 @@ function CrcrMatrix({
832802
<LocalTimeDisplay timestamp={row.latestTime} />
833803
</td>
834804
<td className={hudStyles.jobMetadata}>
835-
<a
836-
href={`https://github.com/${row.upstreamRepo}/commit/${row.sha}`}
837-
target="_blank"
838-
rel="noopener noreferrer"
839-
>
840-
{row.sha ? row.sha.substring(0, 7) : "–"}
841-
</a>
805+
<span className={hudStyles.mono}>
806+
<a
807+
href={`https://github.com/${row.upstreamRepo}/commit/${row.sha}`}
808+
target="_blank"
809+
rel="noopener noreferrer"
810+
>
811+
{row.sha ? row.sha.substring(0, 7) : "–"}
812+
</a>
813+
</span>
842814
</td>
843815
<td className={hudStyles.jobMetadata}>
844816
<div className={hudStyles.jobMetadataTruncated}>
@@ -1004,6 +976,7 @@ function CrcrNightlyMatrix({
1004976
[matrix]
1005977
);
1006978
const commitInfoMap = useCommitInfo(upstreamRepo, nightlyShas);
979+
const [pinnedId, setPinnedId] = useContext(CrcrPinnedContext);
1007980

1008981
if (error) {
1009982
return (
@@ -1026,36 +999,47 @@ function CrcrNightlyMatrix({
1026999
return (
10271000
<>
10281001
<NightlySummaryCards data={data} />
1029-
<div style={{ overflowX: "auto" }}>
1030-
<table
1031-
style={{
1032-
borderCollapse: "collapse",
1033-
fontSize: "0.85rem",
1034-
width: "100%",
1035-
}}
1036-
>
1002+
<div style={{ overflowX: "auto", overflowY: "visible" }}>
1003+
<table className={hudStyles.hudTable}>
10371004
<colgroup>
1038-
<col style={{ width: 80 }} />
1039-
<col style={{ width: 60 }} />
1040-
<col style={{ width: 340 }} />
1005+
<col className={hudStyles.colTime} />
1006+
<col className={hudStyles.colSha} />
1007+
<col className={hudStyles.colCommit} />
10411008
{columns.map((col) => (
1042-
<col key={col.name} style={{ width: 18 }} />
1009+
<col key={col.name} className={hudStyles.colJob} />
10431010
))}
10441011
</colgroup>
10451012
<thead>
10461013
<tr>
1047-
<th style={headerBaseStyle}>Time</th>
1048-
<th style={headerBaseStyle}>SHA</th>
1049-
<th style={headerBaseStyle}>Commit</th>
1014+
<th className={hudStyles.regularHeader}>Time</th>
1015+
<th className={hudStyles.regularHeader}>SHA</th>
1016+
<th className={hudStyles.regularHeader}>Commit</th>
10501017
{columns.map((col) => (
1051-
<th key={col.name} style={jobHeaderStyle}>
1018+
<th
1019+
key={col.name}
1020+
className={hudStyles.jobHeader}
1021+
style={{ cursor: "pointer" }}
1022+
onClick={(e) => {
1023+
e.stopPropagation();
1024+
setPinnedId({
1025+
sha: undefined,
1026+
name: pinnedId.name === col.name ? undefined : col.name,
1027+
});
1028+
}}
1029+
>
10521030
<div
1031+
className={hudStyles.jobHeaderName}
10531032
style={{
1054-
...jobHeaderNameStyle,
10551033
fontWeight: col.type === "group" ? 700 : 400,
10561034
}}
10571035
>
1058-
{col.name}
1036+
<span
1037+
className={
1038+
pinnedId.name === col.name ? hudStyles.highlight : ""
1039+
}
1040+
>
1041+
{col.name}
1042+
</span>
10591043
</div>
10601044
</th>
10611045
))}
@@ -1066,49 +1050,62 @@ function CrcrNightlyMatrix({
10661050
const commit = commitInfoMap.get(row.sha);
10671051
const commitTitle =
10681052
commit?.title || `nightly (${row.sha.substring(0, 12)})`;
1053+
const isRowHighlighted = pinnedId.sha === row.sha;
1054+
const rowClass = isRowHighlighted ? hudStyles.highlight : "";
10691055
return (
1070-
<tr key={row.sha} style={{ borderBottom: "1px solid #30363d" }}>
1071-
<td style={cellStyle}>
1056+
<tr
1057+
key={row.sha}
1058+
className={rowClass}
1059+
onClick={(e) => {
1060+
if (
1061+
pinnedId.name !== undefined ||
1062+
pinnedId.sha !== undefined
1063+
) {
1064+
return;
1065+
}
1066+
e.stopPropagation();
1067+
setPinnedId({ sha: row.sha, name: undefined });
1068+
}}
1069+
style={{ cursor: "pointer" }}
1070+
>
1071+
<td className={hudStyles.jobMetadata}>
10721072
<LocalTimeDisplay timestamp={row.latestTime} />
10731073
</td>
1074-
<td style={cellStyle}>
1075-
<a
1076-
href={`https://github.com/${row.upstreamRepo}/commit/${row.sha}`}
1077-
target="_blank"
1078-
rel="noopener noreferrer"
1079-
style={{ color: "#58a6ff", textDecoration: "none" }}
1080-
>
1081-
{row.sha.substring(0, 7)}
1082-
</a>
1074+
<td className={hudStyles.jobMetadata}>
1075+
<span className={hudStyles.mono}>
1076+
<a
1077+
href={`https://github.com/${row.upstreamRepo}/commit/${row.sha}`}
1078+
target="_blank"
1079+
rel="noopener noreferrer"
1080+
>
1081+
{row.sha.substring(0, 7)}
1082+
</a>
1083+
</span>
10831084
</td>
1084-
<td style={{ ...cellStyle, maxWidth: 340 }}>
1085-
<Tooltip title={commitTitle}>
1085+
<td className={hudStyles.jobMetadata}>
1086+
<div className={hudStyles.jobMetadataTruncated}>
10861087
<a
10871088
href={`https://github.com/${row.upstreamRepo}/commit/${row.sha}`}
10881089
target="_blank"
10891090
rel="noopener noreferrer"
1090-
style={{
1091-
color: "#58a6ff",
1092-
textDecoration: "none",
1093-
overflow: "hidden",
1094-
textOverflow: "ellipsis",
1095-
whiteSpace: "nowrap",
1096-
display: "block",
1097-
}}
1091+
title={commitTitle}
10981092
>
10991093
{commitTitle}
11001094
</a>
1101-
</Tooltip>
1095+
</div>
11021096
</td>
11031097
{columns.map((col) => {
1098+
const colHighlight =
1099+
pinnedId.name === col.name ? hudStyles.highlight : "";
11041100
if (col.type === "group" && col.members) {
11051101
const groupJobs = col.members
11061102
.map((m) => row.jobs.get(m))
11071103
.filter((j): j is CrcrJobRow => j != null);
11081104
return (
11091105
<td
11101106
key={col.name}
1111-
style={{ ...cellStyle, textAlign: "center" }}
1107+
className={`${hudStyles.jobMetadata} ${colHighlight}`}
1108+
style={{ textAlign: "center" }}
11121109
>
11131110
{groupJobs.length > 0 ? (
11141111
<GroupedJobCell
@@ -1126,7 +1123,8 @@ function CrcrNightlyMatrix({
11261123
return (
11271124
<td
11281125
key={col.name}
1129-
style={{ ...cellStyle, textAlign: "center" }}
1126+
className={`${hudStyles.jobMetadata} ${colHighlight}`}
1127+
style={{ textAlign: "center" }}
11301128
>
11311129
{job ? <JobCell job={job} sha={row.sha} /> : "–"}
11321130
</td>

0 commit comments

Comments
 (0)