[] => {
const tables = Array.from(root.querySelectorAll("table"))
.filter((table) => table.hasAttribute("data-sortable"));
for (const table of tables) {
const headings = table.querySelectorAll("th button[data-column]");
for (const heading of Array.from(headings)) {
heading.addEventListener("click", () => {
const column = Number(heading.getAttribute("data-column"));
order = {
column,
descending: order?.column === column && !order.descending,
};
// The heading may have arrived in a rendering and been placed in
// the table the page already had.
sortTable(heading.closest("table") ?? table, order);
});
}
}
return tables;
};
listen(page);
page.addEventListener(LIVE_PAGE_UPDATE, (event) => {
const tables = listen(event.detail);
if (order === undefined) return;
for (const table of tables) sortTable(table, order);
});
}
/** The page's own script, which keeps its table sortable. */
export const CI_JOBS_SCRIPT = `
const LIVE_PAGE_UPDATE = ${JSON.stringify(LIVE_PAGE_UPDATE)};
const sortTable = ${sortTable.toString()};
(${followSorting.toString()})(document);`;
function summary(collected: CiJobs): string {
const count = (status: Status) =>
collected.jobs.filter((job) => job.status === status).length;
// A job is counted as failing however old its failure is, since age decides
// the color of its row and not whether it is failing.
const failing = collected.jobs.filter((job) => job.failing).length;
const unreadable =
collected.jobs.filter((job) => job.status === "warn" && !job.failing)
.length + collected.unreadableRepos.length;
const facts: Array<[string, string]> = [
// The same count the tile's header carries: the jobs it speaks for.
["jobs", String(collected.jobs.length - count("unknown"))],
["repositories", String(collected.repos.length)],
["passing", String(count("good"))],
["failing", String(failing)],
["unreadable", String(unreadable)],
["no verdict", String(count("unknown"))],
[
"running",
String(
collected.jobs.filter((job) => job.runningHref !== undefined).length,
),
],
];
return `${
facts.map(([term, value]) =>
`- ${term}
- ${escapeHtml(value)}
`
).join("")
}
`;
}
function content(
head: string,
body: string,
status?: Status,
): LivePageContent {
return {
title: "CI jobs",
styles: STYLES,
head,
body,
script: CI_JOBS_SCRIPT,
status,
};
}
/** The page for one collection, or the page saying there is not one. */
export function ciJobsPage(
collected: CiJobs | undefined,
now = Date.now(),
): LivePageContent {
if (collected === undefined) {
return content(
"",
`The ci tile has not finished a collection yet. It reads every repository in the organization, which takes a few seconds, and this page shows what it last saw.
`,
);
}
// A workflow with no verdict has nothing to report in the table's trigger,
// result, and timing columns, and a workflow only a pull request triggers is
// one of these. They go under the table rather than through it, where
// thirteen rows of dashes would sit between the failures and everything
// that passed. One with a run in progress carries the running dot there as
// it would in the table.
const judged = collected.jobs.filter((job) => job.status !== "unknown");
const silent = ordered(collected.jobs.filter((job) => job.status === "unknown"));
const rows = ordered(judged).map((job) => jobRow(job, now)).join("");
const unjudged = silent.length === 0
? ""
: `Workflows with no verdict · ${silent.length}
`;
const unreadable = collected.unreadableRepos.length === 0
? ""
: `Repositories that could not be read · ${collected.unreadableRepos.length}
`;
return content(
`collected ${minutePrecision(collected.collectedAt)} · ${
escapeHtml(compactSpan(now - collected.collectedAt))
} ago`,
`${summary(collected)}
Jobs · ${judged.length}
${unjudged}
${unreadable}`,
ciJobsStatus(collected),
);
}