93 lines
3.3 KiB
HTML
93 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container mt-4">
|
|
|
|
<!--Available tools section-->
|
|
<h2>Available Benchmarking Tools</h2>
|
|
|
|
<!-- Server-side rendered tools -->
|
|
{% if tools %}
|
|
<div class="row">
|
|
{% for tool_name, tool in tools.items() %}
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card {% if tool.available %}border-success{% else %}border-secondary{% endif %}">
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{ tool.name }}</h5>
|
|
<p class="card-text">
|
|
{% if tool.available %}
|
|
<span class="badge bg-success">Available</span>
|
|
{% if tool.version %}
|
|
<small class="text-muted">{{ tool.version }}</small>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="badge bg-secondary">Not Installed</span>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!--Available drives section-->
|
|
<h2 class="mt-5">Available Drives</h2>
|
|
<p class="text-muted">
|
|
<i class="bi bi-info-circle"></i>
|
|
Mounted drives are grayed out and cannot be benchmarked.
|
|
</p>
|
|
<div id="drives-list" hx-get="/api/v1/drives" hx-trigger="load" hx-target="#drives-content"></div>
|
|
<div id="drives-content" class="row"></div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// HTMX event to render drives after loading
|
|
document.addEventListener('htmx:afterRequest', function (evt) {
|
|
if (evt.detail.target.id === 'drives-content') {
|
|
renderDrives(JSON.parse(evt.detail.xhr.response));
|
|
}
|
|
});
|
|
|
|
function renderDrives(data) {
|
|
const container = document.getElementById('drives-content');
|
|
container.innerHTML = '';
|
|
|
|
if (!data.drives || data.drives.length === 0) {
|
|
container.innerHTML = '<div class="col-12"><p class="text-muted">No drives found.</p></div>';
|
|
return;
|
|
}
|
|
|
|
data.drives.forEach(drive => {
|
|
const col = document.createElement('div');
|
|
col.className = 'col-md-4 mb-3';
|
|
|
|
const card = document.createElement('div');
|
|
card.className = `drive-card ${drive.mounted ? 'disabled' : 'available'}`;
|
|
|
|
card.innerHTML = `
|
|
<div class="card-body">
|
|
<h5 class="card-title">${drive.name}</h5>
|
|
<p class="card-text">
|
|
<strong>Size:</strong> ${drive.size}<br>
|
|
<strong>Model:</strong> ${drive.model || 'Unknown'}<br>
|
|
${drive.serial ? `<strong>Serial:</strong> ${drive.serial}<br>` : ''}
|
|
${drive.mount_point ? `<strong>Mounted at:</strong> ${drive.mount_point}<br>` : ''}
|
|
</p>
|
|
<div>
|
|
${drive.mounted
|
|
? '<span class="badge bg-secondary">Mounted - Unavailable</span>'
|
|
: '<span class="badge bg-success">Available for Benchmark</span>'
|
|
}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
col.appendChild(card);
|
|
container.appendChild(col);
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %} |