Skip to content

[HUD] Move a bunch of code for the main hud tables around #6988

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 12, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 77 additions & 122 deletions torchci/pages/hud/[repoOwner]/[repoName]/[branch]/[[...page]].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -283,93 +283,68 @@ function HudTableBody({
);
}

function GroupFilterableHudTable({
params,
children,
groupNames,
useGrouping,
setUseGrouping,
hideUnstable,
setHideUnstable,
hideGreenColumns,
setHideGreenColumns,
}: {
params: HudParams;
children: React.ReactNode;
groupNames: string[];
useGrouping: boolean;
setUseGrouping: any;
hideUnstable: boolean;
setHideUnstable: any;
hideGreenColumns: boolean;
setHideGreenColumns: any;
}) {
function FiltersAndSettings({}: {}) {
const router = useRouter();
const params = packHudParams(router.query);
const { jobFilter, handleSubmit } = useTableFilter(params);
const headerNames = groupNames;
const [mergeEphemeralLF, setMergeEphemeralLF] = useContext(MergeLFContext);
const [settingsPanelOpen, setSettingsPanelOpen] = useState(false);
const [hideUnstable, setHideUnstable] = usePreference("hideUnstable");
const [hideGreenColumns, setHideGreenColumns] =
useHideGreenColumnsPreference();
const [useGrouping, setUseGrouping] = useGroupingPreference(
params.nameFilter
);

return (
<>
<div style={{ position: "relative", clear: "both" }}>
<div className={styles.hudControlsRow}>
<JobFilterInput
currentFilter={jobFilter}
handleSubmit={handleSubmit}
/>
<SettingsPanel
settingGroups={{
// You need to specify both checkBoxName and key for each setting.
// `checkbox name` is used by CheckBoxSelector while `key` is
// used to uniquely identify the component in the settings panel.
// As far as I can CheckBoxSelector cannot read or write `key` but
// React requires us to set key since it's a list element, so we
// end up with some unfortunate duplication.
"View Options": [
<CheckBoxSelector
value={useGrouping}
setValue={(value) => setUseGrouping(value)}
checkBoxName="groupView"
key="groupView"
labelText={"Use grouped view"}
/>,
<MonsterFailuresCheckbox key="monsterFailures" />,
],
"Filter Options": [
<CheckBoxSelector
value={hideUnstable}
setValue={(value) => setHideUnstable(value)}
checkBoxName="hideUnstable"
key="hideUnstable"
labelText={"Hide unstable jobs"}
/>,
<CheckBoxSelector
value={hideGreenColumns}
setValue={(value) => setHideGreenColumns(value)}
checkBoxName="hideGreenColumns"
key="hideGreenColumns"
labelText={"Hide green columns"}
/>,
<CheckBoxSelector
value={mergeEphemeralLF}
setValue={setMergeEphemeralLF}
checkBoxName="mergeEphemeralLF"
key="mergeEphemeralLF"
labelText={"Condense LF, ephemeral jobs"}
/>,
],
}}
isOpen={settingsPanelOpen}
onToggle={() => setSettingsPanelOpen(!settingsPanelOpen)}
/>
</div>
<table className={styles.hudTable} style={{ overflow: "auto" }}>
<GroupHudTableColumns names={headerNames} />
<GroupHudTableHeader names={headerNames} />
{children}
</table>
</div>
</>
<div className={styles.hudControlsRow}>
<JobFilterInput currentFilter={jobFilter} handleSubmit={handleSubmit} />
<SettingsPanel
settingGroups={{
// You need to specify both checkBoxName and key for each setting.
// `checkbox name` is used by CheckBoxSelector while `key` is
// used to uniquely identify the component in the settings panel.
// As far as I can CheckBoxSelector cannot read or write `key` but
// React requires us to set key since it's a list element, so we
// end up with some unfortunate duplication.
"View Options": [
<CheckBoxSelector
value={useGrouping}
setValue={(value) => setUseGrouping(value)}
checkBoxName="groupView"
key="groupView"
labelText={"Use grouped view"}
/>,
<MonsterFailuresCheckbox key="monsterFailures" />,
],
"Filter Options": [
<CheckBoxSelector
value={hideUnstable}
setValue={(value) => setHideUnstable(value)}
checkBoxName="hideUnstable"
key="hideUnstable"
labelText={"Hide unstable jobs"}
/>,
<CheckBoxSelector
value={hideGreenColumns}
setValue={(value) => setHideGreenColumns(value)}
checkBoxName="hideGreenColumns"
key="hideGreenColumns"
labelText={"Hide green columns"}
/>,
<CheckBoxSelector
value={mergeEphemeralLF}
setValue={setMergeEphemeralLF}
checkBoxName="mergeEphemeralLF"
key="mergeEphemeralLF"
labelText={"Condense LF, ephemeral jobs"}
/>,
],
}}
isOpen={settingsPanelOpen}
onToggle={() => setSettingsPanelOpen(!settingsPanelOpen)}
/>
</div>
);
}

Expand Down Expand Up @@ -416,18 +391,6 @@ export function MonsterFailuresCheckbox() {
);
}

function HudTable({ params }: { params: HudParams }) {
const data = useHudData(params);
if (data === undefined) {
return <LoadingPage />;
}
return (
<>
<GroupedHudTable params={params} data={data} />
</>
);
}

function HudHeader({ params }: { params: HudParams }) {
function handleBranchSubmit(branch: string) {
window.location.href = formatHudUrlForRoute("hud", { ...params, branch });
Expand Down Expand Up @@ -525,7 +488,10 @@ export default function Hud() {
style={{ marginLeft: "10px" }}
/>
</div>
<HudTable params={params} />
<div style={{ position: "relative", clear: "both" }}>
<FiltersAndSettings />
<GroupedHudTable params={params} />
</div>
<PageSelector params={params} baseUrl="hud" />
<br />
<div>
Expand Down Expand Up @@ -576,13 +542,9 @@ function CopyPermanentLink({
return <CopyLink textToCopy={url} compressed={false} style={style} />;
}

function GroupedHudTable({
params,
data,
}: {
params: HudParams;
data: RowData[];
}) {
function GroupedHudTable({ params }: { params: HudParams }) {
const router = useRouter();
const data = useHudData(params);
const { data: unstableIssuesData } = useSWR<IssueLabelApiResponse>(
`/api/issue/unstable`,
fetcher,
Expand All @@ -592,19 +554,16 @@ function GroupedHudTable({
}
);
const jobNames = new Set(
data.flatMap((row) => Array.from(row.nameToJobs.keys()))
data?.flatMap((row) => Array.from(row.nameToJobs.keys()))
);

const [hideUnstable, setHideUnstable] = usePreference("hideUnstable");
const [hideGreenColumns, setHideGreenColumns] =
useHideGreenColumnsPreference();
const [useGrouping, setUseGrouping] = useGroupingPreference(
params.nameFilter
);
const [hideUnstable] = usePreference("hideUnstable");
const [hideGreenColumns] = useHideGreenColumnsPreference();
const [useGrouping] = useGroupingPreference(params.nameFilter);

const { shaGrid, groupNameMapping, jobsWithFailures, groupsWithFailures } =
getGroupingData(
data,
data ?? [],
jobNames,
(!useGrouping && hideUnstable) || (useGrouping && !hideUnstable),
unstableIssuesData ?? []
Expand All @@ -614,7 +573,6 @@ function GroupedHudTable({

const { jobFilter } = useTableFilter(params);

const router = useRouter();
useEffect(() => {
// Only run on component mount, this assumes that the user's preference is
// the value in local storage
Expand Down Expand Up @@ -681,26 +639,23 @@ function GroupedHudTable({
return true;
});

if (data === undefined) {
return <LoadingPage />;
}

return (
<GroupingContext.Provider
value={{ groupNameMapping, expandedGroups, setExpandedGroups }}
>
<GroupFilterableHudTable
params={params}
groupNames={names}
useGrouping={useGrouping}
setUseGrouping={setUseGrouping}
hideUnstable={hideUnstable}
setHideUnstable={setHideUnstable}
hideGreenColumns={hideGreenColumns}
setHideGreenColumns={setHideGreenColumns}
>
<table className={styles.hudTable} style={{ overflow: "auto" }}>
<GroupHudTableColumns names={names} />
<GroupHudTableHeader names={names} />
<HudTableBody
shaGrid={shaGrid}
names={names}
unstableIssues={unstableIssuesData ?? []}
/>
</GroupFilterableHudTable>
</table>
</GroupingContext.Provider>
);
}