Add Raspberry Pi health monitoring

Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Mathieu Moran
2026-08-09 19:57:07 -04:00
co-authored by Copilot
parent d3bc313e7f
commit 8b664667e5
8 changed files with 355 additions and 70 deletions
+28 -17
View File
@@ -11,7 +11,7 @@
<h3 class="text-dark mb-0">Dashboard</h3><a class="btn btn-primary btn-sm d-none d-sm-inline-block" role="button" href="#"><i class="fas fa-download fa-sm text-white-50"></i>&nbsp;Placeholder button</a>
</div>
<div class="row">
<div class="col-md-6 col-xl-3 mb-4">
<div class="col-md-6 col-xl-4 mb-4">
<div class="card shadow border-start-primary py-2">
<div class="card-body">
<div class="row align-items-center no-gutters">
@@ -24,7 +24,7 @@
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-4">
<div class="col-md-6 col-xl-4 mb-4">
<div class="card shadow border-start-success py-2">
<div class="card-body">
<div class="row align-items-center no-gutters">
@@ -37,7 +37,7 @@
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-4">
<div class="col-md-6 col-xl-4 mb-4">
<div class="card shadow border-start-info py-2">
<div class="card-body">
<div class="row align-items-center no-gutters">
@@ -50,20 +50,31 @@
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 mb-4">
<div class="card shadow border-start-warning py-2">
<div class="card-body">
<div class="row align-items-center no-gutters">
<div class="col me-2">
<div class="text-uppercase text-info fw-bold text-xs mb-1"><span>UPTIME</span></div>
<div class="row g-0 align-items-center">
<div class="col-auto">
<div id="rpi-uptime" class="text-dark fw-bold h5 mb-0 me-3"><span>unknown</span></div>
</div>
</div>
</div>
<div class="col-auto"><i class="fas fa-clipboard-list fa-2x text-gray-300"></i></div>
</div>
</div>
<div class="card shadow mb-4" id="pi-health-card">
<div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
<h6 class="text-primary fw-bold m-0">Pi health</h6>
<span id="pi-health-updated" class="small text-muted">Loading...</span>
</div>
<div class="card-body">
<div id="pi-health-warning" class="alert alert-warning" role="alert" hidden></div>
<div id="pi-health-error" class="alert alert-danger" role="alert" hidden></div>
<div class="row g-4">
<div class="col-6 col-lg-3">
<div class="text-uppercase text-muted fw-bold text-xs mb-1">CPU temperature</div>
<div id="pi-temperature" class="h5 text-dark fw-bold mb-0">--</div>
</div>
<div class="col-6 col-lg-3">
<div class="text-uppercase text-muted fw-bold text-xs mb-1">Memory used</div>
<div id="pi-memory" class="h5 text-dark fw-bold mb-0">--</div>
</div>
<div class="col-6 col-lg-3">
<div class="text-uppercase text-muted fw-bold text-xs mb-1">Disk used</div>
<div id="pi-disk" class="h5 text-dark fw-bold mb-0">--</div>
</div>
<div class="col-6 col-lg-3">
<div class="text-uppercase text-muted fw-bold text-xs mb-1">Uptime</div>
<div id="pi-uptime" class="h5 text-dark fw-bold mb-0">--</div>
</div>
</div>
</div>