MrKalzu/node-monitor
1
0
Fork 0
Code Issues Pull Requests Packages Wiki Activity

We now have working api and simple webpages to view the data.

Browse Source
This commit is contained in:
Kalzu Rekku
2025-04-03 22:58:53 +03:00
parent 362d0e7b65
commit 0bee8c7fd3
9 changed files with 943 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
app/templates/index.html Normal file
View File

@ -0,0 +1,120 @@
<!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>