Add build cancellation feature to cloud-init process</message>

<message>Implement a new API endpoint for cancelling ongoing cloud-init builds, allowing users to request a build cancellation via the dashboard. Update the dashboard UI to include a cancel button that appears during the build process, enhancing user experience by providing control over long-running operations. Modify the build script to check for cancellation requests, ensuring that builds can be stopped gracefully. This feature improves usability and responsiveness in the cloud-init image building workflow.
This commit is contained in:
nearxos
2026-02-23 10:21:06 +02:00
parent e13ad3d8f9
commit ec973cc2b3
5 changed files with 90 additions and 2 deletions

View File

@@ -448,6 +448,7 @@
</div>
<div style="margin-bottom:0.75rem;">
<button type="button" id="buildCloudInitBtn" class="btn btn-primary">Download &amp; build cloud-init image</button>
<button type="button" id="buildCloudInitCancelBtn" class="btn btn-outline" style="display:none; margin-left:0.5rem;">Cancel build</button>
</div>
<div id="buildCloudInitStatus" class="backups-mono" style="font-size:0.85rem; min-height:1.5em; margin-bottom:0.5rem;"></div>
<details style="margin-top:0.5rem;">
@@ -893,9 +894,11 @@
fetch('/api/build-cloudinit-status').then(function(r) { return r.json(); }).then(function(d) {
var el = document.getElementById('buildCloudInitStatus');
var btn = document.getElementById('buildCloudInitBtn');
var cancelBtn = document.getElementById('buildCloudInitCancelBtn');
if (!el) return;
var busy = ['resolving','downloading','decompressing','injecting','finalizing'].indexOf(d.phase) >= 0;
if (btn) btn.disabled = busy;
if (cancelBtn) { cancelBtn.style.display = busy ? 'inline-block' : 'none'; cancelBtn.disabled = false; }
if (d.phase === 'idle' && !d.message) {
el.textContent = '';
} else if (d.phase === 'done') {
@@ -904,12 +907,26 @@
fetchGoldenInfo();
} else if (d.phase === 'error') {
el.textContent = 'Error: ' + (d.error || d.message || 'Unknown');
} else if (d.phase === 'cancelled') {
el.textContent = 'Build cancelled.';
} else {
el.textContent = (d.phase || '') + ': ' + (d.message || '');
}
if (busy) setTimeout(fetchBuildStatus, 5000);
}).catch(function() {});
}
function cancelBuildCloudInit() {
var cancelBtn = document.getElementById('buildCloudInitCancelBtn');
if (cancelBtn) cancelBtn.disabled = true;
document.getElementById('buildCloudInitStatus').textContent = 'Cancelling…';
fetch('/api/build-cloudinit-cancel', { method: 'POST', headers: { 'Content-Type': 'application/json' } })
.then(function(r) { return r.json(); })
.then(function(d) {
if (d.ok) setTimeout(fetchBuildStatus, 2000);
else alert(d.error || 'Cancel request failed');
})
.catch(function() { if (cancelBtn) cancelBtn.disabled = false; });
}
function startBuildCloudInit() {
var btn = document.getElementById('buildCloudInitBtn');
@@ -993,6 +1010,8 @@
fetchCloudInitTemplates();
var buildBtn = document.getElementById('buildCloudInitBtn');
if (buildBtn) buildBtn.onclick = startBuildCloudInit;
var cancelBuildBtn = document.getElementById('buildCloudInitCancelBtn');
if (cancelBuildBtn) cancelBuildBtn.onclick = cancelBuildCloudInit;
var variantSel = document.getElementById('buildVariant');
if (variantSel) variantSel.onchange = fetchRaspiosUrl;
var templateLoadBtn = document.getElementById('buildTemplateLoad');