sho/homelab-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Embed live CPU and RAM monitor into dashboard website

Browse Source
This commit is contained in:
Isshi0417 2026-07-08 07:06:54 +00:00
parent 48816a8815
commit 76edd1009b
2 changed files with 65 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
website/index.html
View File

@ -1,13 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rapture Homelab Portal</title> <title>Rapture Homelab Portal</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<!-- Importing Art Deco fonts (Cinzel and Montserrat) --> <!-- Importing Art Deco fonts (Cinzel and Montserrat) -->
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Montserrat:wght@300;400;600&display=swap"
rel="stylesheet">
</head> </head>
<body> <body>
<!-- Ambient underwater bioluminescent glow blobs --> <!-- Ambient underwater bioluminescent glow blobs -->
@ -52,8 +56,10 @@
</div> </div>
<!-- Hidden Audio Element (Hotlinking a public domain 1930s Jazz Track) --> <!-- Hidden Audio Element (Hotlinking a public domain 1930s Jazz Track) -->
<audio id="radio-audio" crossorigin="anonymous" loop> <audio id="radio-audio" crossorigin="anonymous" loop>
<source src="https://upload.wikimedia.org/wikipedia/commons/d/d1/Buddy_Bolden_Band_-_The_Humbug.ogg" type="audio/ogg"> <source src="https://upload.wikimedia.org/wikipedia/commons/d/d1/Buddy_Bolden_Band_-_The_Humbug.ogg"
<source src="https://archive.org/download/classic_jazz_recordings/AlBowlly-MidnightTheStarsAndYou1934.mp3" type="audio/mp3"> type="audio/ogg">
<source src="https://archive.org/download/classic_jazz_recordings/AlBowlly-MidnightTheStarsAndYou1934.mp3"
type="audio/mp3">
</audio> </audio>
</div> </div>
</section> </section>
@ -102,6 +108,36 @@
</div> </div>
</section> </section>
<!-- Card Section: System Telemetry -->
<section class="card-section">
<h2>System Telemetry</h2>
<div class="telemetry-grid">
<div class="card telemetry-card">
<div class="card-header">
<span class="status-indicator online"></span>
<h3>CPU Utilization (All Nodes)</h3>
</div>
<!-- Note: Replace '1860' with your actual dashboard UID if different! -->
<iframe
src="http://172.30.1.200:3001/d-solo/rYdddlPWk/node-exporter-full?orgId=1&from=1783404586946&to=1783490986946&timezone=browser&var-ds_prometheus=cfrgo5x9dgrgge&var-job=homelab-nodes&var-nodename=web-portfolio.lab.local&var-node=172.30.1.201:9100&refresh=1m&theme=dark&panelId=panel-20"
class="telemetry-iframe" frameborder="0"></iframe>
</div>
<div class="card telemetry-card">
<div class="card-header">
<span class="status-indicator online"></span>
<h3>Memory Utilization (All Nodes)</h3>
</div>
<!-- Note: Replace '1860' with your actual dashboard UID if different! -->
<iframe
src="http://172.30.1.200:3001/d-solo/rYdddlPWk/node-exporter-full?orgId=1&from=1783404523350&to=1783490923350&timezone=browser&var-ds_prometheus=cfrgo5x9dgrgge&var-job=homelab-nodes&var-nodename=web-portfolio.lab.local&var-node=172.30.1.201:9100&refresh=1m&theme=dark&panelId=panel-16"
class="telemetry-iframe" frameborder="0"></iframe>
</div>
</div>
</section>
<!-- Card Section 2: Services & Applications --> <!-- Card Section 2: Services & Applications -->
<section class="card-section"> <section class="card-section">
<h2>Applications & Services</h2> <h2>Applications & Services</h2>
@ -170,4 +206,5 @@
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

21
website/style.css
View File

@ -518,3 +518,24 @@ body::after {
background-color: var(--red-glow) !important; background-color: var(--red-glow) !important;
} }
/* Telemetry Grid & Grafana Embed Iframe Styling */
.telemetry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 24px;
}
.telemetry-card {
height: 380px; /* Generous height to fit Grafana timelines */
padding: 16px;
}
.telemetry-iframe {
width: 100%;
height: 100%;
border: 1px solid var(--gold-accent);
background: var(--bg-dark);
border-radius: 2px;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
}