54 lines
1.5 KiB
HTML
54 lines
1.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Job Queue{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h2>Job Queue</h2>
|
|
<p class="text-muted">Monitor and manage benchmark jobs.</p>
|
|
|
|
<!-- Jobs list -->
|
|
<div id="jobs-list"
|
|
hx-get="/api/v1/jobs"
|
|
hx-trigger="load"
|
|
hx-target="#jobs-content">
|
|
<p>Loading jobs...</p>
|
|
</div>
|
|
<div id="jobs-content"></div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Load jobs when page loads
|
|
document.addEventListener('htmx:afterRequest', function(evt) {
|
|
if (evt.detail.target.id === 'jobs-content') {
|
|
renderJobs(JSON.parse(evt.detail.xhr.response));
|
|
}
|
|
});
|
|
|
|
function renderJobs(jobIds) {
|
|
const container = document.getElementById('jobs-content');
|
|
container.innerHTML = '';
|
|
|
|
if (!jobIds || jobIds.length === 0) {
|
|
container.innerHTML = '<div class="alert alert-info">No jobs in queue.</div>';
|
|
return;
|
|
}
|
|
|
|
jobIds.forEach(jobId => {
|
|
const div = document.createElement('div');
|
|
div.className = 'card mb-2';
|
|
div.innerHTML = `
|
|
<div class="card-body">
|
|
<h5 class="card-title">${jobId}</h5>
|
|
<p class="card-text text-muted">Job details will appear here...</p>
|
|
</div>
|
|
`;
|
|
container.appendChild(div);
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %} |