in torchci/pages/failure/[capture].tsx [16:89]
function FailureInfo({
totalCount,
jobCount,
samples,
}: {
totalCount: number;
jobCount: { [jobName: string]: number };
samples: JobData[];
}) {
// Populate the last 14 days
const dayBuckets: Map<string, number> = new Map();
for (let i = 13; i >= 0; i--) {
const time = dayjs().local().subtract(i, "day").format("MM/D");
dayBuckets.set(time, 0);
}
samples.forEach((job) => {
const time = dayjs(job.time!).local().format("MM/D");
if (!dayBuckets.has(time)) {
return;
}
dayBuckets.set(time, dayBuckets.get(time)! + 1);
});
const data: any = [];
dayBuckets.forEach((count, date) => {
data.push({ date, count });
});
return (
<div>
<div>
<h3>Failure count </h3>
<BarChart width={800} height={150} data={data}>
<Tooltip />
<CartesianGrid vertical={false} strokeDasharray="3 3" />
<Bar yAxisId="left" dataKey="count" fill="#8884d8" />
<XAxis dataKey="date" interval={0} />
<YAxis yAxisId="left" dataKey="count" allowDecimals={false} />
<YAxis
yAxisId="right"
dataKey="count"
orientation="right"
allowDecimals={false}
/>
</BarChart>
<h3>Failures by job</h3>
<table>
<tbody>
{Object.entries(jobCount).map(([job, count]) => (
<tr key={job}>
<td>{job}</td>
<td>{count as number}</td>
</tr>
))}
</tbody>
</table>
</div>
<h3>Failures ({totalCount} total)</h3>
<ul>
{samples.map((sample) => (
<li key={sample.id}>
<JobSummary job={sample} />
<div>
<JobLinks job={sample} />
</div>
<LogViewer job={sample} />
</li>
))}
</ul>
</div>
);
}