Skip to content

Enhance sensor health UI for Sprint 2 #911

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ohwenyi wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhance sensor health UI for Sprint 2 #911

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 136 additions & 108 deletions src/Components/HMI/ui/public/admin/sensor-health.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,133 +14,161 @@
<script src="/admin/sensor_health/charts.js" defer></script>
</head>
<body>
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
data-sidebar-position="fixed" data-header-position="fixed">
<div
class="page-wrapper"
id="main-wrapper"
data-layout="vertical"
data-navbarbg="skin6"
data-sidebartype="full"
data-sidebar-position="fixed"
data-header-position="fixed"
>
<div id="sidebar"></div>

<div class="body-wrapper">
<div id="header"></div>

<div class="container-fluid">
<div class="sensor-page">


<!-- Mobile backdrop -->
<div class="mobile-backdrop" id="mobile-backdrop"></div>

<!-- MAIN -->
<main class="main">
<header class="page-header">
<div>
<h1 style="margin-bottom: 4px;">Sensor Health</h1>
<p class="card-subtitle" style="margin-bottom: 0;">
Monitor live device health, system performance, GPS location, and recent audio activity from the IoT stream.
</p>
</div>
<div class="page-header-actions"></div>
</header>

<!-- Content root (views load here) -->
<div id="view-root">
<div class="dashboard-shell">

<!-- Summary cards -->
<section class="kpi-grid">
<div class="kpi-card">
<p>SENSOR MONITORING</p>
<h3>Live</h3>
</div>

<div class="kpi-card">
<p>DATA SOURCE</p>
<h3>MQTT</h3>
</div>

<div class="kpi-card">
<p>AUTO REFRESH</p>
<h3>15s</h3>
</div>
</section>


<!-- Sensor overview table -->
<section class="card">
<h3>Sensor Overview</h3>
<p class="card-subtitle">
This table displays the latest live sensor information received from the MQTT broker.
</p>

<div class="form-grid" style="margin-bottom: 16px;">
<div>
<label for="sensor-status-filter">Filter by Status</label>
<select id="sensor-status-filter">
<option>All</option>
<option>Online</option>
<option>Offline</option>
<option>Warning</option>
</select>
</div>

</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Sensor ID</th>
<th>Status</th>
<th>CPU</th>
<th>RAM</th>
<th>Disk</th>
<th>Uptime</th>
<th>GPS</th>
<th>Last Audio</th>
</tr>
</thead>
<tbody id="sensor-overview-tbody">
<tr>
<td colspan="8">Loading sensor data...</td>
</tr>
</tbody>
</table>
<!-- Mobile backdrop -->
<div class="mobile-backdrop" id="mobile-backdrop"></div>

<!-- MAIN -->
<main class="main">
<header class="page-header">
<div>
<h1 style="margin-bottom: 4px;">Sensor Health</h1>
<p class="card-subtitle" style="margin-bottom: 0;">
Monitor live device health, battery level, system performance, GPS location, and recent audio activity.
</p>
</div>
</section>

<section class="card">
<h3>Live Data Notes</h3>
<p class="card-subtitle">
The current dashboard is connected to real-time MQTT-fed sensor data supplied by the IoT team.
</p>

<div class="form-grid">
<div class="card">
<h3>Current Available Fields</h3>
<p class="note">
The live payload currently includes CPU usage, RAM usage, disk usage, uptime, GPS coordinates, and the most recent saved audio file.
<div class="page-header-actions"></div>
</header>

<!-- Content root -->
<div id="view-root">
<div class="dashboard-shell">

<!-- Summary cards -->
<section class="kpi-grid">
<div class="kpi-card">
<p>SENSOR MONITORING</p>
<h3>Live</h3>
</div>

<div class="kpi-card">
<p>DATA SOURCE</p>
<h3>MQTT / Seeded</h3>
</div>

<div class="kpi-card">
<p>AUTO REFRESH</p>
<h3>15s</h3>
</div>
</section>

<!-- Sensor overview table -->
<section class="card">
<h3>Sensor Overview</h3>
<p class="card-subtitle">
Search, filter, and monitor live sensor status in one dashboard view.
</p>
</div>

<div class="card">
<h3>Future Extensions</h3>
<p class="note">
Additional sensor fields such as ambient light, temperature, battery, connectivity, or other health indicators can be added later as the IoT pipeline expands.

<div class="form-grid sensor-toolbar" style="margin-bottom: 16px;">
<div>
<label for="sensor-search-input">Search Sensor</label>
<input
type="text"
id="sensor-search-input"
placeholder="Search by sensor ID"
/>
</div>

<div>
<label for="sensor-status-filter">Filter by Status</label>
<select id="sensor-status-filter">
<option value="All">All</option>
<option value="Online">Online</option>
<option value="Offline">Offline</option>
<option value="Low Battery">Low Battery</option>
</select>
</div>
</div>

<div
id="last-updated-at"
class="card-subtitle"
style="margin-bottom: 12px;"
>
Last updated at: --
</div>

<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Sensor ID</th>
<th>Status</th>
<th>Battery</th>
<th>CPU</th>
<th>RAM</th>
<th>Disk</th>
<th>Uptime</th>
<th>GPS</th>
<th>Last Audio</th>
</tr>
</thead>
<tbody id="sensor-overview-tbody">
<tr>
<td colspan="9">Loading sensor data...</td>
</tr>
</tbody>
</table>
</div>
</section>

<section class="card">
<h3>Monitoring Notes</h3>
<p class="card-subtitle">
The dashboard is designed for live monitoring, filtering, and quick identification of low-battery or offline devices.
</p>
</div>

<div class="form-grid">
<div class="card">
<h3>Status Monitoring</h3>
<p class="note">
Sensors are visually marked by status so operators can quickly distinguish active devices, offline devices, and low-battery devices.
</p>
</div>

<div class="card">
<h3>Future Extensions</h3>
<p class="note">
The page can be further extended with more sensor metadata, additional alert rules, and larger-scale monitoring support.
</p>
</div>
</div>
</section>

</div>
</section>
</div>
</div>
</main>
</main>
</div>
</div>
</div>

<div id="footer"></div>
<div id="footer"></div>
</div>
</div>
</div>

<script>
$(document).ready(function() {
$("#sidebar").load("/admin/component/sidebar-component.html", function() {$.getScript('/admin/js/sidebarmenu.js');});
$("#sidebar").load("/admin/component/sidebar-component.html", function() {
$.getScript('/admin/js/sidebarmenu.js');
});
$("#header").load("/admin/component/header-component.html");
$("#footer").load("/admin/component/footer-component.html");
});
</script>
</body>
</html>
</html>
Loading