Remove Status column from cluster nodes table

- Use green background color to indicate connected nodes
- Remove status text column for cleaner interface
- Update colspan values for table messages
parent eb1870d9
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
.table th { background: #f8fafc; font-weight: 600; color: #374151; } .table th { background: #f8fafc; font-weight: 600; color: #374151; }
.status-connected { color: #065f46; font-weight: 500; } .status-connected { color: #065f46; font-weight: 500; }
.status-disconnected { color: #dc2626; font-weight: 500; } .status-disconnected { color: #dc2626; font-weight: 500; }
.node-row-connected { background-color: #f0fdf4; } /* Light green background for connected nodes */
.alert { padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; } .alert { padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }
.alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; } .alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; } .alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
...@@ -93,7 +94,6 @@ ...@@ -93,7 +94,6 @@
<table class="table" id="nodesTable"> <table class="table" id="nodesTable">
<thead> <thead>
<tr> <tr>
<th>Status</th>
<th>Node Name</th> <th>Node Name</th>
<th>Hostname</th> <th>Hostname</th>
<th>Weight</th> <th>Weight</th>
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
</thead> </thead>
<tbody id="nodesTableBody"> <tbody id="nodesTableBody">
<tr> <tr>
<td colspan="13" style="text-align: center; color: #6b7280;">Loading cluster nodes...</td> <td colspan="12" style="text-align: center; color: #6b7280;">Loading cluster nodes...</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -167,7 +167,7 @@ function updateNodesTable() { ...@@ -167,7 +167,7 @@ function updateNodesTable() {
.catch(error => { .catch(error => {
console.error('Error fetching nodes:', error); console.error('Error fetching nodes:', error);
document.getElementById('nodesTableBody').innerHTML = document.getElementById('nodesTableBody').innerHTML =
'<tr><td colspan="13" style="text-align: center; color: #dc2626;">Error loading cluster nodes</td></tr>'; '<tr><td colspan="11" style="text-align: center; color: #dc2626;">Error loading cluster nodes</td></tr>';
}); });
} }
...@@ -175,17 +175,12 @@ function renderNodesTable() { ...@@ -175,17 +175,12 @@ function renderNodesTable() {
const tbody = document.getElementById('nodesTableBody'); const tbody = document.getElementById('nodesTableBody');
if (nodesData.length === 0) { if (nodesData.length === 0) {
tbody.innerHTML = '<tr><td colspan="12" style="text-align: center; color: #6b7280;">No cluster nodes found</td></tr>'; tbody.innerHTML = '<tr><td colspan="11" style="text-align: center; color: #6b7280;">No cluster nodes found</td></tr>';
return; return;
} }
tbody.innerHTML = nodesData.map(node => ` tbody.innerHTML = nodesData.map(node => `
<tr class="${node.is_local ? 'local-worker-row' : ''}"> <tr class="${node.is_local ? 'local-worker-row' : ''} ${node.connected ? 'node-row-connected' : ''}">
<td>
<span class="status-${node.connected ? 'connected' : 'disconnected'}">
${node.connected ? (node.is_local ? '● Local' : '● Connected') : '● Disconnected'}
</span>
</td>
<td>${node.token_name}${node.backend ? ` (${node.backend.toUpperCase()})` : ''}</td> <td>${node.token_name}${node.backend ? ` (${node.backend.toUpperCase()})` : ''}</td>
<td>${node.hostname}</td> <td>${node.hostname}</td>
<td>${node.weight || 100}</td> <td>${node.weight || 100}</td>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment