121 lines
3.7 KiB
HTML
121 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="refresh" content="30">
|
|
<title>Node Monitor</title>
|
|
<style>
|
|
body {
|
|
background-color: #2e2e2e;
|
|
color: #ffffff;
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
}
|
|
h1 {
|
|
color: #ffffff;
|
|
}
|
|
.node {
|
|
margin-bottom: 20px;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.node-header {
|
|
display: flex;
|
|
padding: 15px;
|
|
cursor: pointer;
|
|
background-color: #3a3a3a;
|
|
}
|
|
.node-header:hover {
|
|
background-color: #444;
|
|
}
|
|
.node-info {
|
|
flex: 1;
|
|
}
|
|
.node-metrics {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
.metric {
|
|
text-align: center;
|
|
min-width: 100px;
|
|
}
|
|
.status-badge {
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
.connections-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 15px;
|
|
gap: 10px;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
.connection {
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
min-width: 180px;
|
|
flex: 0 0 calc(20% - 10px);
|
|
}
|
|
.status-active { background-color: #1c3b1a; color: #c3e6cb; }
|
|
.status-inactive { background-color: #441a1f; color: #f5c6cb; }
|
|
.status-pending { background-color: #3b361a; color: #ffeeba; }
|
|
.progress-bar {
|
|
height: 8px;
|
|
margin-top: 5px;
|
|
background-color: #444;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
background-color: #007bff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Node Monitor</h1>
|
|
{% for node in nodes %}
|
|
<div class="node">
|
|
<div class="node-header" onclick="location.href='/app/node/{{ node.node_name }}'">
|
|
<div class="node-info">
|
|
<h2>{{ node.node_name }}</h2>
|
|
<p>Hostname: {{ node.hostname or 'N/A' }}</p>
|
|
<p>Last Updated: {{ node.last_updated or 'N/A' }}</p>
|
|
</div>
|
|
<div class="node-metrics">
|
|
<div class="metric">
|
|
<h3>CPU (%)</h3>
|
|
<p>{{ node.cpu_percent|round(2) if node.cpu_percent else 'N/A' }}</p>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: {{ node.cpu_percent|default(0) }}%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="metric">
|
|
<h3>Memory (%)</h3>
|
|
<p>{{ node.memory_percent|round(1) if node.memory_percent else 'N/A' }}</p>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: {{ node.memory_percent|default(0) }}%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="status-badge status-{{ node.status }}">{{ node.status|upper }}</div>
|
|
</div>
|
|
<div class="connections-container">
|
|
{% for conn in node.connections %}
|
|
<div class="connection status-{{ conn.target_status }}">
|
|
<h3>{{ conn.target_node_name }}</h3>
|
|
<p>Latency: {{ conn.ping_latency_ms|round(1) if conn.ping_latency_ms else 'N/A' }} ms</p>
|
|
</div>
|
|
{% else %}
|
|
<p>No active connections</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p>No nodes found.</p>
|
|
{% endfor %}
|
|
</body>
|
|
</html>
|