Add Raspberry Pi health monitoring

Co-authored-by: Copilot <[email protected]>

static/js/yaris.js

@@ -7,11 +7,11 @@ const socket = io();
 // Generic placeholder center (not a real location) - re-centers automatically
 // to the real live GPS fix once one comes in (see gps_location handler below).
 var map = L.map('map', { minZoom: 8, maxZoom: 15 }).setView([48.505, -0.09], 12);
-            L.tileLayer('/static/vendor/tiles/{z}/{x}/{y}.png', {
+            const mapTiles = L.tileLayer('/static/vendor/tiles/{z}/{x}/{y}.png', {
             attribution: '&copy; <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
             minZoom: 8,
             maxZoom: 15
-            }).addTo(map);
+            });
             var carMarker = L.marker(map.getCenter()).addTo(map)
             .bindPopup('your car... soon(tm)');
 
@@ -60,12 +60,16 @@ socket.on('obd_status', function(data) {
 });
 
 socket.on('obd_speed', function(data) {
+    const status = document.getElementById('obd-speed');
+    if (!Array.isArray(data)) {
+        status.textContent = data;
+        return;
+    }
 
     const time = data[0]; // Assuming data[0] is the time value
     const speed = data[1]; // Assuming data[1] is the speed value
     const maxDataPoints = 8; // Adjust this value as needed
 
-    const status = document.getElementById('obd-speed');
     status.innerHTML = speed;
 
     // Get a reference to the chart's data
@@ -98,11 +102,6 @@ socket.on('obd_error', function(data) {
     }
 });
 
-socket.on('rpi_uptime', function(data) {
-    const status = document.getElementById('rpi-uptime');
-    status.innerHTML = data;
-});
-
 let mapCentered = false;
 
 socket.on('gps_location', function(data) {
@@ -115,6 +114,9 @@ socket.on('gps_location', function(data) {
     const lat = data[0];
     const lon = data[1];
     if (lat != null && lon != null) {
+        if (!map.hasLayer(mapTiles)) {
+            mapTiles.addTo(map);
+        }
         carMarker.setLatLng([lat, lon]);
         if (!mapCentered) {
             map.setView([lat, lon], 15);
@@ -122,3 +124,97 @@ socket.on('gps_location', function(data) {
         }
     }
 });
+
+function formatUptime(seconds) {
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    return days ? `${days}d ${hours}h` : `${hours}h ${minutes}m`;
+}
+
+function setHealthValue(id, value) {
+    document.getElementById(id).textContent = value;
+}
+
+function healthWarningLabel(warning) {
+    return {
+        under_voltage: "Power supply undervoltage",
+        frequency_capped: "CPU frequency capped",
+        throttled: "CPU currently throttled",
+        soft_temperature_limit: "CPU temperature limit active",
+        high_temperature: "CPU temperature is high",
+        disk_nearly_full: "Disk is nearly full",
+        memory_pressure: "Memory usage is high",
+    }[warning] || warning;
+}
+
+function historicalHealthWarningLabel(warning) {
+    return {
+        under_voltage: "Power supply undervoltage",
+        frequency_capped: "CPU frequency capping",
+        throttled: "CPU throttling",
+        soft_temperature_limit: "CPU temperature limiting",
+    }[warning] || warning;
+}
+
+async function refreshHealth() {
+    const response = await fetch("/api/health");
+    const health = await response.json();
+    if (!response.ok) {
+        throw new Error(health.error || "Could not load Pi health.");
+    }
+
+    setHealthValue(
+        "pi-temperature",
+        health.temperature_c == null ? "Unavailable" : `${health.temperature_c.toFixed(1)} °C`
+    );
+    setHealthValue(
+        "pi-memory",
+        health.memory == null ? "Unavailable" : `${health.memory.used_percent.toFixed(1)}%`
+    );
+    setHealthValue(
+        "pi-disk",
+        health.disk == null
+            ? "Unavailable"
+            : `${health.disk.used_percent.toFixed(1)}% · ${YarisUI.formatBytes(health.disk.free_bytes)} free`
+    );
+    setHealthValue(
+        "pi-uptime",
+        health.uptime_seconds == null ? "Unavailable" : formatUptime(health.uptime_seconds)
+    );
+
+    const warning = document.getElementById("pi-health-warning");
+    const currentWarnings = health.warnings.map(healthWarningLabel);
+    const historicalWarnings = health.historical_warnings.map(
+        historicalHealthWarningLabel
+    );
+    const warnings = currentWarnings.concat(
+        historicalWarnings.length
+            ? [`Previously detected: ${historicalWarnings.join(", ")}`]
+            : []
+    );
+    warning.hidden = warnings.length === 0;
+    warning.textContent = warnings.join(" · ");
+
+    const error = document.getElementById("pi-health-error");
+    const unavailable = Object.keys(health.errors);
+    error.hidden = unavailable.length === 0;
+    error.textContent = unavailable.length
+        ? `Unavailable health sources: ${unavailable.join(", ")}`
+        : "";
+    document.getElementById("pi-health-updated").textContent =
+        `Updated ${new Date().toLocaleTimeString()}`;
+}
+
+refreshHealth().catch(function (error) {
+    const message = document.getElementById("pi-health-error");
+    message.textContent = error.message;
+    message.hidden = false;
+});
+window.setInterval(function () {
+    refreshHealth().catch(function (error) {
+        const message = document.getElementById("pi-health-error");
+        message.textContent = error.message;
+        message.hidden = false;
+    });
+}, 30000);