Add real-time GPU usage column to cluster nodes page - displays live VRAM...

Add real-time GPU usage column to cluster nodes page - displays live VRAM usage and GPU utilization with visual progress bars between GPU Memory and Workers columns

templates/admin/cluster_nodes.html

@@ -99,6 +99,7 @@
                     <th>Weight</th>
                     <th>GPUs</th>
                     <th>GPU Memory</th>
+                    <th>GPU Usage</th>
                     <th>Workers</th>
                     <th>IP Address</th>
                     <th>Uptime</th>
@@ -109,7 +110,7 @@
             </thead>
             <tbody id="nodesTableBody">
                 <tr>
-                    <td colspan="12" style="text-align: center; color: #6b7280;">Loading cluster nodes...</td>
+                    <td colspan="13" style="text-align: center; color: #6b7280;">Loading cluster nodes...</td>
                 </tr>
             </tbody>
         </table>
@@ -167,7 +168,7 @@ function updateNodesTable() {
         .catch(error => {
             console.error('Error fetching nodes:', error);
             document.getElementById('nodesTableBody').innerHTML =
-                '<tr><td colspan="11" style="text-align: center; color: #dc2626;">Error loading cluster nodes</td></tr>';
+                '<tr><td colspan="12" style="text-align: center; color: #dc2626;">Error loading cluster nodes</td></tr>';
         });
 }
 
@@ -175,7 +176,7 @@ function renderNodesTable() {
     const tbody = document.getElementById('nodesTableBody');
 
     if (nodesData.length === 0) {
-        tbody.innerHTML = '<tr><td colspan="11" style="text-align: center; color: #6b7280;">No cluster nodes found</td></tr>';
+        tbody.innerHTML = '<tr><td colspan="12" style="text-align: center; color: #6b7280;">No cluster nodes found</td></tr>';
         return;
     }
 
@@ -185,6 +186,10 @@ function renderNodesTable() {
             <td>${node.hostname}</td>
             <td>${node.weight || 100}</td>
             <td>${node.gpus}</td>
+            <td>
+                ${node.gpu_memory.length > 0 ? node.gpu_memory.join('<br>') : 'No GPU info'}
+                ${node.total_memory > 0 ? `<br><strong>Total: ${node.total_memory}GB</strong>` : ''}
+            </td>
             <td>
                 ${node.gpu_usage_info && node.gpu_usage_info.length > 0 ? node.gpu_usage_info.map(gpu => `
                     <div class="gpu-info" style="margin-bottom: 0.5rem;">
@@ -199,8 +204,7 @@ function renderNodesTable() {
                             </span>
                         </div>
                     </div>
-                `).join('') : node.gpu_memory.length > 0 ? node.gpu_memory.join('<br>') : 'No GPU info'}
-                ${node.total_memory > 0 ? `<br><strong>Total: ${node.total_memory}GB</strong>` : ''}
+                `).join('') : 'No real-time data'}
             </td>
             <td>
                 <strong>${node.workers_available}</strong> workers<br>