ASF-Nabd/monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
mahmamdouh
2025-12-27 01:17:10 +01:00
commit e0fa3018ea
315 changed files with 2167 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

556
monitor.html Normal file
View File

@@ -0,0 +1,556 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASF Infrastructure Monitor</title>
<link rel="icon" type="image/png" href="/static/app logo.png">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color: #020617;
--card-bg: rgba(15, 23, 42, 0.8);
--accent-blue: #38bdf8;
--accent-purple: #a855f7;
--status-green: #10b981;
--status-red: #ef4444;
--status-yellow: #f59e0b;
--text-main: #f8fafc;
--text-dim: #94a3b8;
--glass-border: rgba(255, 255, 255, 0.1);
}
body {
font-family: 'Outfit', sans-serif;
background-color: var(--bg-color);
background-image:
radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.05) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.05) 0%, transparent 40%);
color: var(--text-main);
margin: 0;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
text-align: center;
margin-bottom: 50px;
animation: fadeInDown 0.8s ease-out;
}
.header-logo {
height: 80px;
margin-bottom: 15px;
filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
}
h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
background: linear-gradient(to right, var(--accent-blue), var(--accent-purple));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
header p {
color: var(--text-dim);
font-size: 1.1rem;
}
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 30px;
max-width: 1400px;
margin: 0 auto;
flex: 1;
}
.card {
background: var(--card-bg);
backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 25px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, border-color 0.3s ease;
position: relative;
overflow: hidden;
}
.card:hover {
transform: translateY(-5px);
border-color: rgba(56, 189, 248, 0.3);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--glass-border);
padding-bottom: 20px;
margin-bottom: 25px;
}
.device-info {
display: flex;
align-items: center;
gap: 20px;
}
.device-info h2 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
.device-info small {
color: var(--text-dim);
font-size: 0.9rem;
}
.status-badge {
padding: 6px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 6px;
}
.status-online {
background: rgba(16, 185, 129, 0.1);
color: var(--status-green);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.status-offline {
background: rgba(239, 68, 68, 0.1);
color: var(--status-red);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.gauge-wrapper {
background: rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 16px;
text-align: center;
position: relative;
}
.gauge-container {
height: 140px;
position: relative;
}
.gauge-label {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.gauge-value {
font-size: 1.2rem;
font-weight: 700;
display: block;
}
.gauge-name {
font-size: 0.7rem;
color: var(--text-dim);
text-transform: uppercase;
}
.metrics-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}
.metric-card {
background: rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.metric-label {
font-size: 0.75rem;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.metric-value {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-main);
}
/* Web Services */
.service-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.service-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 20px;
background: rgba(0, 0, 0, 0.2);
border-radius: 16px;
border: 1px solid transparent;
transition: all 0.2s ease;
}
.service-item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--glass-border);
}
.service-name {
display: flex;
align-items: center;
gap: 12px;
font-weight: 500;
}
.service-logo {
width: 32px;
height: 32px;
object-fit: contain;
border-radius: 6px;
}
.service-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 600;
}
footer {
text-align: center;
margin-top: 50px;
padding: 20px;
border-top: 1px solid var(--glass-border);
}
.footer-logo {
height: 60px;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.footer-logo:hover {
opacity: 1;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
transition: opacity 0.5s ease;
}
.loader {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: var(--accent-blue);
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="loading" class="loading-overlay">
<span class="loader"></span>
</div>
<header>
<img src="/static/app image.png" alt="ASF Logo" class="header-logo">
<h1>ASF Infrastructure Monitor</h1>
<p>Real-time system health and service availability</p>
</header>
<div class="dashboard-grid">
<!-- Ubuntu Server PC -->
<div class="card" id="card-pc">
<div class="card-header">
<div class="device-info">
<i class="fas fa-server fa-2x" style="color: #fb923c;"></i>
<div>
<h2>Ubuntu Server PC</h2>
<small>asf-server.duckdns.org</small>
</div>
</div>
<div id="pc-status" class="status-badge status-offline">
<i class="fas fa-circle"></i> <span>Offline</span>
</div>
</div>
<div class="stats-grid">
<div class="gauge-wrapper">
<div class="gauge-container"><canvas id="pcCpu"></canvas></div>
<div class="gauge-label">
<span class="gauge-value" id="pcCpuVal">0%</span>
<span class="gauge-name">CPU</span>
</div>
</div>
<div class="gauge-wrapper">
<div class="gauge-container"><canvas id="pcRam"></canvas></div>
<div class="gauge-label">
<span class="gauge-value" id="pcRamVal">0%</span>
<span class="gauge-name">RAM</span>
</div>
</div>
</div>
<div class="metrics-row">
<div class="metric-card">
<span class="metric-label">Temperature</span>
<span class="metric-value" id="pcTemp">--°C</span>
</div>
<div class="metric-card">
<span class="metric-label">Disk Usage</span>
<span class="metric-value" id="pcDisk">--%</span>
</div>
</div>
</div>
<!-- Raspberry Pi -->
<div class="card" id="card-pi">
<div class="card-header">
<div class="device-info">
<i class="fab fa-raspberry-pi fa-2x" style="color: #e11d48;"></i>
<div>
<h2>Raspberry Pi</h2>
<small>rpi-asf-tb.duckdns.org</small>
</div>
</div>
<div id="pi-status" class="status-badge status-offline">
<i class="fas fa-circle"></i> <span>Offline</span>
</div>
</div>
<div class="stats-grid">
<div class="gauge-wrapper">
<div class="gauge-container"><canvas id="piCpu"></canvas></div>
<div class="gauge-label">
<span class="gauge-value" id="piCpuVal">0%</span>
<span class="gauge-name">CPU</span>
</div>
</div>
<div class="gauge-wrapper">
<div class="gauge-container"><canvas id="piRam"></canvas></div>
<div class="gauge-label">
<span class="gauge-value" id="piRamVal">0%</span>
<span class="gauge-name">RAM</span>
</div>
</div>
</div>
<div class="metrics-row">
<div class="metric-card">
<span class="metric-label">Temperature</span>
<span class="metric-value" id="piTemp">--°C</span>
</div>
<div class="metric-card">
<span class="metric-label">Disk Usage</span>
<span class="metric-value" id="piDisk">--%</span>
</div>
</div>
</div>
<!-- Web Services -->
<div class="card">
<div class="card-header">
<div class="device-info">
<i class="fas fa-globe fa-2x" style="color: var(--accent-blue);"></i>
<h2>Web Services</h2>
</div>
</div>
<ul class="service-list" id="service-list">
<!-- Services will be injected here -->
</ul>
</div>
</div>
<footer>
<img src="/static/Nabd.png" alt="Nabd Logo" class="footer-logo">
</footer>
<script>
const charts = {};
function createGauge(id, color) {
const ctx = document.getElementById(id).getContext('2d');
charts[id] = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [0, 100],
backgroundColor: [color, 'rgba(255, 255, 255, 0.05)'],
borderWidth: 0,
borderRadius: 10,
}]
},
options: {
cutout: '85%',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: { enabled: false }
},
animation: { duration: 1000 }
}
});
}
function updateGauge(id, value) {
if (charts[id]) {
const val = parseFloat(value) || 0;
charts[id].data.datasets[0].data = [val, 100 - val];
charts[id].update();
document.getElementById(id + 'Val').textContent = val.toFixed(1) + '%';
}
}
function updateStatus(id, status) {
const el = document.getElementById(id + '-status');
const span = el.querySelector('span');
el.className = 'status-badge ' + (status === 'online' ? 'status-online' : 'status-offline');
span.textContent = status.charAt(0).toUpperCase() + status.slice(1);
}
async function fetchData() {
try {
const response = await fetch('/api/status');
const data = await response.json();
// Update PC
updateStatus('pc', data.pc.status);
if (data.pc.status === 'online') {
updateGauge('pcCpu', data.pc.cpu);
updateGauge('pcRam', data.pc.ram);
document.getElementById('pcTemp').textContent = data.pc.temp + '°C';
document.getElementById('pcDisk').textContent = data.pc.disk + '%';
}
// Update PI
updateStatus('pi', data.pi.status);
if (data.pi.status === 'online') {
updateGauge('piCpu', data.pi.cpu);
updateGauge('piRam', data.pi.ram);
document.getElementById('piTemp').textContent = data.pi.temp + '°C';
document.getElementById('piDisk').textContent = data.pi.disk + '%';
}
// Update Services
const serviceList = document.getElementById('service-list');
serviceList.innerHTML = data.services.map(s => `
<li class="service-item">
<div class="service-name">
<img src="${getServiceLogo(s.name)}" class="service-logo" onerror="this.src='https://via.placeholder.com/32?text=${s.name.charAt(0)}'">
${s.name}
</div>
<div class="service-status" style="color: ${s.status === 'online' ? 'var(--status-green)' : 'var(--status-red)'}">
<i class="fas ${s.status === 'online' ? 'fa-check-circle' : 'fa-times-circle'}"></i>
${s.status === 'online' ? s.latency : 'Offline'}
</div>
</li>
`).join('');
document.getElementById('loading').style.opacity = '0';
setTimeout(() => document.getElementById('loading').style.display = 'none', 500);
} catch (error) {
console.error('Error fetching data:', error);
}
}
function getServiceLogo(name) {
const logos = {
'Gitea': 'https://gitea.io/images/gitea.png',
'OpenProject': '/static/openproject_files/openproject-logo-centered-blue-background-d7fcb3fb.png',
'Draw.io': 'https://app.diagrams.net/images/logo-flat.svg',
'TestArena': '/static/testarena.png',
'TBM': '/static/tbm.ico',
'Board': 'https://excalidraw.com/favicon-32x32.png'
};
return logos[name] || '';
}
// Initialize
createGauge('pcCpu', '#38bdf8');
createGauge('pcRam', '#a855f7');
createGauge('piCpu', '#38bdf8');
createGauge('piRam', '#a855f7');
fetchData();
setInterval(fetchData, 60000); // Update every 1 minute
</script>
</body>
</html>