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

51
website/index.html
View File

@ -1,13 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rapture Homelab Portal</title>
<link rel="stylesheet" href="style.css">
<!-- 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>
<body>
<!-- Ambient underwater bioluminescent glow blobs -->
@ -52,17 +56,19 @@
</div>
<!-- Hidden Audio Element (Hotlinking a public domain 1930s Jazz Track) -->
<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://archive.org/download/classic_jazz_recordings/AlBowlly-MidnightTheStarsAndYou1934.mp3" type="audio/mp3">
<source src="https://upload.wikimedia.org/wikipedia/commons/d/d1/Buddy_Bolden_Band_-_The_Humbug.ogg"
type="audio/ogg">
<source src="https://archive.org/download/classic_jazz_recordings/AlBowlly-MidnightTheStarsAndYou1934.mp3"
type="audio/mp3">
</audio>
</div>
</section>
<!-- Card Section 1: Homelab Nodes -->
<section class="card-section">
<h2>System Nodes</h2>
<div class="grid">
<div class="card">
<div class="card-header">
<span id="status-ipa" class="status-indicator online"></span>
@ -102,11 +108,41 @@
</div>
</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 -->
<section class="card-section">
<h2>Applications & Services</h2>
<div class="grid">
<!-- Navidrome Link -->
<a href="https://music.shooey.xyz" target="_blank" class="card link-card">
<div class="card-header">
@ -170,4 +206,5 @@
<script src="script.js"></script>
</body>
</html>
</html>

21
website/style.css
View File

@ -518,3 +518,24 @@ body::after {
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);
}