update live-metrics script to remove jquery dependency

web/assets/live-metrics.js

@@ -1,33 +1,61 @@
-function parseAge(raw) {
-	var v = parseFloat(raw);
-	if (v >= 20*24*60*60) { // 20 days
-		return '<td class="time-muted">a long time ago</td>';
-	} else if (v >= 24*60*60) { // 24 hours
-		return '<td class="time-red">' + (v/(24*60*60)).toFixed(1) + " days</td>"
-	} else if (v >= 19*60*60) { // 19 hours
-		return '<td class="time-yellow">' + (v/(60*60)).toFixed(1) + " hours</td>"
-	} else if (v >= 60*60) { // 1 hour
-		return '<td class="time-green">' + (v/(60*60)).toFixed(1) + " hours</td>"
-	} else { // less than an hour
-		return '<td class="time-green">' + (v/60).toFixed(0) + " minutes</td>"
-	}
+function parseAge(age) {
+  if (!age) {
+    return { className: "time-muted", innerText: "unreachable" };
+  }
+
+  const days = `${(age / (24 * 60 * 60)).toFixed(1)} days`;
+  const hours = `${(age / (60 * 60)).toFixed(1)} hours`;
+  const minutes = `${(age / 60).toFixed(0)} minutes`;
+  if (age >= 20 * 24 * 60 * 60) {
+    // 20 days
+    return { className: "time-muted", innerText: "a long time ago" };
+  } else if (age >= 24 * 60 * 60) {
+    // 24 hours
+    return { className: "time-red", innerText: days };
+  } else if (age >= 19 * 60 * 60) {
+    // 19 hours
+    return { className: "time-yellow", innerText: hours };
+  } else if (age >= 60 * 60) {
+    // 1 hour
+    return { className: "time-green", innerText: hours };
+  } else {
+    // less than an hour
+    return { className: "time-green", innerText: minutes };
+  }
 }
 
-$(function() {
-	$.getJSON(
-		"https://prometheus.voidlinux.org/api/v1/query?query=(time()-repo_origin_time%7Bzone=%22external%22%7D)",
-		function(data) {
-			var mirrors = {};
-			$.each(data["data"]["result"], function(i, val) {
-				mirrors[val["metric"]["instance"].replace(/current$/, "")] = parseAge(val["value"][1]);
-			});
-			console.log(mirrors);
-			$(".mirrortbl thead tr").append('<th>Last Synced</th>');
-			$(".mirrortbl tbody tr").each(function() {
-				var k = $(this).children(":first")[0].innerText.trim().replace(/https?:\/\//, "");
-				$(this).append(mirrors[k] || '<td class="time-muted">unreachable</td>');
-			});
-		}
-	);
-});
+document.addEventListener("DOMContentLoaded", async () => {
+  const req = await fetch(
+    "https://prometheus.voidlinux.org/api/v1/query?query=(time()-repo_origin_time%7Bzone=%22external%22%7D)"
+  );
+  const data = await req.json();
+
+  const mirrorAge = Object.fromEntries(
+    data["data"]["result"].map((val) => {
+      const url = val["metric"]["instance"].replace(/current$/, "");
+      const age = parseFloat(val["value"][1]);
+      return [url, age];
+    })
+  );
 
+  const headerRows = document.querySelectorAll(".mirrortbl > thead > tr");
+  for (const headerRow of headerRows) {
+    const header = document.createElement("th");
+    header.innerText = "Last Synced";
+    headerRow.appendChild(header);
+  }
+
+  const rows = document.querySelectorAll(".mirrortbl > tbody > tr");
+  for (const row of rows) {
+    const url = row
+      .querySelector("a")
+      .getAttribute("href")
+      .replace(/https?:\/\//, "");
+    const { className, innerText } = parseAge(mirrorAge[url]);
+
+    const cell = document.createElement("td");
+    cell.className = className;
+    cell.innerText = innerText;
+    row.appendChild(cell);
+  }
+});