122 lines
2.7 KiB
JavaScript
122 lines
2.7 KiB
JavaScript
let jobThroughputInterval; // declared out here so the controller can clear it when leaving the page
|
|
|
|
const jobThroughputXRange = 60; // range of the X-axis of the job throughput chart
|
|
const jobThroughputOffScreen = 2; // how many points to show off the left side of the chart, so it can be pruned without janking the display
|
|
|
|
async function jobPageMain() {
|
|
const {repoID, rowID} = parseURIPath()
|
|
|
|
const jobs = await app.Jobs({
|
|
repo_id: repoID,
|
|
job_ids: [rowID]
|
|
});
|
|
|
|
if (jobs.length != 1) {
|
|
// TODO: handle error better
|
|
console.error("Bad/unknown job ID:", rowID, jobs);
|
|
return;
|
|
}
|
|
|
|
const job = jobs[0];
|
|
console.log("JOB:", job);
|
|
|
|
$('.job-config-code').innerText = maxlenStr(JSON.stringify(JSON.parse(job.config), null, 4), 1024*100);
|
|
|
|
// claim the job elements on this page for this job
|
|
assignJobElements($('#page-content'), job);
|
|
|
|
// fill out the majority of the job UI
|
|
jobProgressUpdate(job);
|
|
|
|
if (job.parent) {
|
|
$('#parent-job-container').classList.remove('d-none');
|
|
renderJobPreview($('#parent-job-list'), job.parent);
|
|
jobProgressUpdate(job.parent);
|
|
}
|
|
|
|
if (job.children?.length > 0) {
|
|
$('#subsequent-jobs-container').classList.remove('d-none');
|
|
for (const child of job.children) {
|
|
renderJobPreview($('#subsequent-jobs-list'), child);
|
|
jobProgressUpdate(child);
|
|
}
|
|
}
|
|
|
|
|
|
// set up throughput chart
|
|
|
|
const jobStats = tlz.jobStats[job.id];
|
|
let seriesData = [];
|
|
if (jobStats) {
|
|
seriesData = jobStats.chartSeries;
|
|
}
|
|
|
|
const elem = $('#chart-active-job-throughput');
|
|
let chartOptions = {};
|
|
|
|
if (!elem.chart) {
|
|
elem.chart = echarts.init(elem/*, null, {
|
|
renderer: 'svg' // TODO: SVG is vector, so it scales when page is zoomed; see if it's performant enough
|
|
}*/);
|
|
|
|
chartOptions = {
|
|
grid: {
|
|
top: 10,
|
|
bottom: 10,
|
|
left: 10,
|
|
right: 10,
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
xAxis: {
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
width: 2,
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Job Throughput',
|
|
type: 'line',
|
|
smooth: true,
|
|
showSymbol: false,
|
|
data: seriesData,
|
|
animationDurationUpdate: 1000,
|
|
animationEasingUpdate: "linear",
|
|
lineStyle: {
|
|
width: 3,
|
|
color: tabler.getColor('blue'),
|
|
},
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: tabler.getColor("primary")
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: tabler.hexToRgba(tabler.getColor("primary"), .1)
|
|
}
|
|
])
|
|
}
|
|
}
|
|
]
|
|
};
|
|
}
|
|
|
|
elem.chart.setOption(chartOptions);
|
|
}
|