crates/server: update templates with improved dashboard and styling

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I07f9de61588f61aae003f78c30fd6d326a6a6964
This commit is contained in:
raf 2026-02-02 01:27:05 +03:00
commit b4d3c9d501
Signed by: NotAShelf
GPG key ID: 29D95B64378DB4BF
14 changed files with 1139 additions and 609 deletions

View file

@ -51,8 +51,12 @@
</div>
</details>
{% if api_keys.is_empty() %}
<p class="empty">No API keys.</p>
<div class="empty">
<div class="empty-title">No API keys</div>
<div class="empty-hint">Create an API key above to enable API access.</div>
</div>
{% else %}
<div class="table-wrap">
<table>
<thead>
<tr><th>Name</th><th>Role</th><th>Created</th><th>Last Used</th>{% if is_admin %}<th>Actions</th>{% endif %}</tr>
@ -71,6 +75,7 @@
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% endif %}
@ -103,8 +108,12 @@
</details>
{% endif %}
{% if builders.is_empty() %}
<p class="empty">No remote builders configured.</p>
<div class="empty">
<div class="empty-title">No remote builders configured</div>
<div class="empty-hint">Remote builders distribute builds across multiple machines.</div>
</div>
{% else %}
<div class="table-wrap">
<table>
<thead>
<tr><th>Name</th><th>SSH URI</th><th>Systems</th><th>Max Jobs</th><th>Enabled</th>{% if is_admin %}<th>Actions</th>{% endif %}</tr>
@ -127,6 +136,7 @@
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% endblock %}
{% block scripts %}
@ -144,22 +154,29 @@ document.getElementById('create-key-form')?.addEventListener('submit', async (e)
role: document.getElementById('key-role').value,
}),
});
const data = await res.json();
const data = await res.json().catch(() => ({}));
if (res.ok) {
msg.innerHTML = '<div class="flash-message flash-success">Key created: <code>' + data.key + '</code><br>Copy this now, it will not be shown again.</div>';
msg.innerHTML = '<div class="flash-message flash-success">Key created: <code>' + escapeHtml(data.key || '') + '</code><br>Copy this now, it will not be shown again.</div>';
setTimeout(() => window.location.reload(), 5000);
} else {
msg.innerHTML = '<div class="flash-message flash-error">' + (data.error || 'Error') + '</div>';
throw new Error(data.error || data.message || 'Unknown error');
}
} catch(e) {
msg.innerHTML = '<div class="flash-message flash-error">Request failed</div>';
} catch(err) {
showError(msg, err.message);
}
});
async function deleteKey(id) {
if (!confirm('Delete this API key?')) return;
const res = await fetch('/api/v1/api-keys/' + id, { method: 'DELETE' });
if (res.ok) window.location.reload();
else alert('Failed to delete key');
try {
const res = await fetch('/api/v1/api-keys/' + id, { method: 'DELETE' });
if (!res.ok) {
const err = await res.json().catch(() => ({ error: res.statusText }));
throw new Error(err.error || err.message || 'Failed to delete key');
}
window.location.reload();
} catch(err) {
alert(escapeHtml(err.message));
}
}
document.getElementById('create-builder-form')?.addEventListener('submit', async (e) => {
e.preventDefault();
@ -175,30 +192,43 @@ document.getElementById('create-builder-form')?.addEventListener('submit', async
max_jobs: parseInt(document.getElementById('builder-maxjobs').value) || 4,
}),
});
if (res.ok) {
window.location.reload();
} else {
const data = await res.json();
msg.innerHTML = '<div class="flash-message flash-error">' + (data.error || 'Error') + '</div>';
if (!res.ok) {
const data = await res.json().catch(() => ({ error: res.statusText }));
throw new Error(data.error || data.message || 'Unknown error');
}
} catch(e) {
msg.innerHTML = '<div class="flash-message flash-error">Request failed</div>';
window.location.reload();
} catch(err) {
showError(msg, err.message);
}
});
async function toggleBuilder(id, enable) {
const res = await fetch('/api/v1/admin/builders/' + id, {
method: 'PUT',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ enabled: enable }),
});
if (res.ok) window.location.reload();
else alert('Failed to update builder');
try {
const res = await fetch('/api/v1/admin/builders/' + id, {
method: 'PUT',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ enabled: enable }),
});
if (!res.ok) {
const err = await res.json().catch(() => ({ error: res.statusText }));
throw new Error(err.error || err.message || 'Failed to update builder');
}
window.location.reload();
} catch(err) {
alert(escapeHtml(err.message));
}
}
async function deleteBuilder(id) {
if (!confirm('Delete this builder?')) return;
const res = await fetch('/api/v1/admin/builders/' + id, { method: 'DELETE' });
if (res.ok) window.location.reload();
else alert('Failed to delete builder');
try {
const res = await fetch('/api/v1/admin/builders/' + id, { method: 'DELETE' });
if (!res.ok) {
const err = await res.json().catch(() => ({ error: res.statusText }));
throw new Error(err.error || err.message || 'Failed to delete builder');
}
window.location.reload();
} catch(err) {
alert(escapeHtml(err.message));
}
}
</script>
{% endif %}