feat(core,backend,frontend): lists drives available for benchmarking

templates/index.html

@@ -2,8 +2,10 @@
 
 {% block content %}
 <div class="container mt-4">
+
+    <!--Available tools section-->
     <h2>Available Benchmarking Tools</h2>
-    
+
     <!-- Server-side rendered tools -->
     {% if tools %}
     <div class="row">
@@ -14,12 +16,12 @@
                     <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 %}
+                        <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>
+                        <span class="badge bg-secondary">Not Installed</span>
                         {% endif %}
                     </p>
                 </div>
@@ -28,7 +30,64 @@
         {% endfor %}
     </div>
     {% endif %}
-    
-    <div id="tools-content"></div>
+
+    <!--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 %}