Improvements to UI, added error-notice element. Detecting when watcher is down.

static/client.js

@@ -1,5 +1,6 @@
 let config;
 let lastPulse = 0;
+const setError = (text)=>{document.querySelector('error-notice').innerText = text;};
 document.addEventListener("DOMContentLoaded", async () => {
 	let $main = document.querySelector('main');
 	const refreshStatus = async () => {
@@ -8,6 +9,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 			if (!response.ok) {
 				throw new Error(`Error fetching status.json: ${response.statusText}`);
 			}
+			setError(''); // Clear errors
 			const status = await response.json();
 			$main.innerHTML = '';
 			config = status.config;
@@ -64,13 +66,12 @@ document.addEventListener("DOMContentLoaded", async () => {
 						let tcp = Math.max(...endpointPoints.map(p=>p[i]?.tcp).filter(p=>p));
 						combinedLogs.push({t, err, ttfb, dur, dns, tcp});
 					}
-					console.log(combinedLogs);
 					$statusBar.setLogs(combinedLogs);
 					$site.querySelector('h1').after($statusBar);
 				}
 			}
 		} catch (error) {
-			console.error("Error loading server status:", error);
+			setError("Error loading server status:", error);
 		}
 	};
 	refreshStatus();
@@ -104,8 +105,12 @@ class StatusBar extends HTMLElement {
 		this.innerHTML = '';
 		this.logs = logs;
 		let points = [];
+		let lastDate = lastPulse;
+		if(lastPulse < (Date.now() - config.interval*60_000 - 20_000 )) { // Detect when last pulse is too long ago, give grace period of 20sec -> Watcher is probably down, use Date.now
+			lastDate = Date.now();
+		}
 		for(let i=config.nDataPoints-1;i>=0;i--) {
-			let date = lastPulse - i * config.interval * 60_000;
+			let date = lastDate - i * config.interval * 60_000;
 			let point = findClosestPoint(logs, date, config.interval * 60_000/2);
 			points.push(point);
 			const $entry = document.createElement('status-bar-entry');

static/index.html

@@ -14,6 +14,7 @@
 		<header>
 			<h1>Pulse</h1>
 		</header>
+		<error-notice></error-notice>
 		<main></main>
 		<footer>
 			Powered by <a href="https://github.com/ybouane/pulse">Pulse</a> — Made with 🤍 by <a href="https://x.com/ybouane">@ybouane</a>

static/style.css

@@ -56,10 +56,24 @@ header {
 	}
 }
 
+error-notice {
+	border-radius: 3px;
+	background:rgb(159, 20, 20);
+	padding:5px 12px;
+	&:empty {
+		display:none;
+	}
+}
+
 main {
 	max-width:900px;
 	width:95%;
 	flex-grow: 1;
+	& .site {
+		& + .site {
+			margin-top:50px;
+		}
+	}
 }
 
 footer {
@@ -107,7 +121,6 @@ status-bar {
 			padding:3px 8px;
 			background:#000000;
 			border-radius:4px;
-			transition-delay: 0.3s;
 
 			display: flex;
 			flex-flow:column nowrap;
@@ -133,7 +146,6 @@ status-bar {
 			pointer-events:initial;
 			transform:translate(-50%, -5px);
 			opacity:1;
-			transition-delay: 0s;
 		}
 		&:hover > div {
 			z-index:2;

watcher.js

@@ -1,4 +1,3 @@
-import config from './config.js';
 import fs from 'fs/promises';
 import {watchFile} from 'fs';
 let config = (await import('./config.js')).default;
@@ -136,7 +135,6 @@ while(true) {
 		} catch(e) {console.error(`Could not find status.json file [${statusFile}], will create it.`)}
 		status = status || {};
 		status.sites = status.sites || {};
-		status.lastPulse = startPulse;
 		status.config = {
 			interval				: config.interval,
 			nDataPoints				: config.nDataPoints,
@@ -278,6 +276,7 @@ while(true) {
 			}
 			config.verbose && console.log(' ');//New line
 		}
+		status.lastPulse = Date.now();
 		await fs.writeFile(statusFile, JSON.stringify(status, undefined, config.readableStatusJson?2:undefined));
 	} catch(e) {
 		console.error(e);