From aacc3a074b92befd4944c4ec55ee7690cde24987 Mon Sep 17 00:00:00 2001
From: ybouane <yassine@bouanane.com>
Date: Wed, 9 Oct 2024 22:33:48 -0400
Subject: [PATCH] Base implementation of status-bar custom elment

---
 static/client.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/static/client.js b/static/client.js
index d8d5be8..192f68e 100644
--- a/static/client.js
+++ b/static/client.js
@@ -70,3 +70,53 @@ const findClosestPoint = (logs, t, maxDistance=Infinity) => {
 	}
 	return best;
 }
+
+class StatusBar extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	set logs(logs) {
+		console.log(logs);
+		this.shadowRoot.innerHTML = '';
+		this.logs_ = logs;
+		let now = Date.now();
+		for(let i=config.nDataPoints;i>0;i--) {
+			let date = now - i * config.interval * 60_000;
+			let point = findClosestPoint(logs, date, config.interval * 60_000/2);
+			const $entry = document.createElement('status-bar-entry');
+			if(point) {
+				$entry.innerHTML = `<div>
+	<strong>${formatDate(point.t)}</strong>
+	<em title="Total Request Time">Total <span class="dur">N/A</span></em>
+	<span title="Time To First Byte">TTFB <span class="ttfb">N/A</span></span>
+	<span title="Download Time">Download Time <span class="dll">N/A</span></span>
+</div>`;
+				if(point.err) {
+					$entry.setAttribute('data-status', 'outage');
+					$entry.querySelector('em').innerText = point.err;
+				} else {
+					if(point.dur > config.responseTimeWarning) {
+						$entry.setAttribute('data-status', 'highly-degraded');
+					} else if(point.dur > config.responseTimeGood) {
+						$entry.setAttribute('data-status', 'degraded');
+					} else {
+						$entry.setAttribute('data-status', 'healthy');
+					}
+				}
+				$entry.querySelector('.dur').innerText = point.dur.toFixed(2)+'ms';
+				if(point.ttfb)
+					$entry.querySelector('.ttfb').innerText = point.ttfb.toFixed(2)+'ms';
+				if(point.dll)
+					$entry.querySelector('.dll').innerText = point.dll.toFixed(2)+'ms';
+			} else {
+				$entry.setAttribute('data-status', 'none');
+				$entry.innerHTML = `<div><strong>No Data</strong></div>`;
+			}
+			this.shadowRoot.append($entry);
+			
+		}
+	}
+}
+customElements.define('status-bar', StatusBar);