Gemini, trying to make this "done".

This commit is contained in:
Kalzu Rekku
2025-06-11 22:27:46 +03:00
parent d93b0ee4ee
commit 1cbf9311e5
7 changed files with 300 additions and 135 deletions

View File

@ -1,12 +1,12 @@
document.addEventListener('DOMContentLoaded', () => {
const nodeGridContainer = document.getElementById('node-grid-container');
const nodeCountSpan = document.getElementById('node-count');
const serviceUuidPara = document.getElementById('service-uuid');
const POLLING_INTERVAL_MS = 3000; // Poll every 3 seconds
async function fetchNodeData() {
try {
const response = await fetch('/nodes/status');
// Use window.API_BASE_PATH for dynamic base URL
const response = await fetch(`${window.API_BASE_PATH}/nodes/status`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
@ -15,29 +15,24 @@ document.addEventListener('DOMContentLoaded', () => {
} catch (error) {
console.error("Error fetching node data:", error);
nodeGridContainer.innerHTML = '<p class="loading-message">Error loading node data. Please check server connection.</p>';
serviceUuidPara.style.display = 'block'; // Show UUID on error
}
}
function renderNodeGrid(nodes) {
nodeGridContainer.innerHTML = ''; // Clear existing content
nodeCountSpan.textContent = nodes.length; // Update total node count
serviceUuidPara.style.display = nodes.length === 0 ? 'block' : 'none'; // Toggle Service UUID
if (nodes.length === 0) {
nodeGridContainer.innerHTML = '<p class="loading-message">No nodes reporting yet. Start a client!</p>';
return;
}
// Ensure we have exactly 4 nodes
if (nodes.length !== 4) {
nodeGridContainer.innerHTML = '<p class="loading-message">Expected exactly 4 nodes, got ' + nodes.length + '.</p>';
return;
}
// Create a 4x4 grid container
// Create a dynamic grid container
const grid = document.createElement('div');
grid.classList.add('connection-grid');
// Dynamically set grid columns based on number of nodes + 1 for the header column
// minmax(100px, 1fr) for the row header, then repeat for each node column
grid.style.gridTemplateColumns = `minmax(100px, 1fr) repeat(${nodes.length}, minmax(100px, 1fr))`;
// Add header row for column UUIDs
const headerRow = document.createElement('div');
@ -52,7 +47,7 @@ document.addEventListener('DOMContentLoaded', () => {
});
grid.appendChild(headerRow);
// Create rows for the 4x4 grid
// Create rows for the grid
nodes.forEach((rowNode, rowIndex) => {
const row = document.createElement('div');
row.classList.add('grid-row');
@ -78,7 +73,7 @@ document.addEventListener('DOMContentLoaded', () => {
<p><strong>IP:</strong> ${rowNode.ip}</p>
<p><strong>Last Seen:</strong> ${new Date(rowNode.last_seen).toLocaleTimeString()}</p>
<p><strong>Uptime:</strong> ${rowNode.uptime_seconds ? formatUptime(rowNode.uptime_seconds) : 'N/A'}</p>
<p><strong>Load Avg (1m, 5m, 15m):</strong> ${rowNode.load_avg ? rowNode.load_avg.join(', ') : 'N/A'}</p>
<p><strong>Load Avg (1m, 5m, 15m):</strong> ${rowNode.load_avg ? rowNode.load_avg.map(l => l.toFixed(2)).join(', ') : 'N/A'}</p>
<p><strong>Memory Usage:</strong> ${rowNode.memory_usage_percent ? rowNode.memory_usage_percent.toFixed(2) + '%' : 'N/A'}</p>
</div>
`;
@ -91,8 +86,8 @@ document.addEventListener('DOMContentLoaded', () => {
cell.innerHTML = `
<div class="conn-status-text">Ping: ${displayLatency}</div>
<div class="node-tooltip">
<p><strong>From:</strong> ${rowNode.uuid}</p>
<p><strong>to:</strong> ${colNode.uuid}</p>
<p><strong>From:</strong> ${rowNode.uuid.substring(0, 8)}...</p>
<p><strong>to:</strong> ${colNode.uuid.substring(0, 8)}...</p>
<p><strong>Latency:</strong> ${displayLatency}</p>
</div>
`;