web: add "last synced" column to tables

this uses prometheus data, just like grafana, so users who don't have JS enabled can just go there to get this info if they so choose.
void-linux · Nov 21, 2023 · 7c6c02d · 7c6c02d
1 parent 6020e02
commit 7c6c02d
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 19 deletions.
diff --git a/web/assets/live-metrics.js b/web/assets/live-metrics.js
@@ -0,0 +1,33 @@
+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() {
+	$.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>');
+			});
+		}
+	);
+});
+
diff --git a/web/assets/misc.css b/web/assets/misc.css
@@ -27,47 +27,52 @@ h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
 	border-color: black;
 }
 
-table {
+.mirrortbl {
 	border-collapse: collapse;
 	overflow-y: auto;
 	border: 1px #478061 solid;
-	table-layout: fixed;
 }
 
-table td {
+.mirrortbl td {
 	padding: 6px 20px;
 }
 
-table thead {
+.mirrortbl thead {
 	background: #478061;
 	color: #fff;
 }
 
-table thead th {
+.mirrortbl thead th {
 	font-weight: 700;
 	text-align: center;
 	padding: 6px 20px;
 }
 
-thead th:nth-child(1) {
-	width: 50%;
+.mirrortbl tr:nth-child(2n) {
+	background: #eee;
 }
 
-thead th:nth-child(2) {
-	width: 20%;
+.time-muted {
+	color: #666;
+	background-color: #ddd;
 }
 
-thead th:nth-child(3) {
-	width: 30%;
+.time-red {
+	color: #fff;
+	background-color: rgb(227, 46, 66);
+}
+
+.time-yellow {
+	background-color: rgb(234, 184, 57);
 }
 
-tbody tr:nth-child(2n) {
-	background: #fafafa;
+.time-green {
+	background-color: rgb(115, 191, 105);
 }
 
 @media (prefers-color-scheme: dark) {
   body {
-    color: #ccc;
+    color: #ddd;
     background-color: #222;
   }
   h1, h2, h3, h4, h5, h6 { color: #ccc; }
@@ -94,7 +99,27 @@ tbody tr:nth-child(2n) {
   .navbar {
     background-color: #295340;
   }
-  tbody tr:nth-child(2n) {
+  .mirrortbl tbody tr:nth-child(2n) {
   	background: #2c2c2c;
   }
+
+  .time-muted {
+  	color: #aaa;
+  	background-color: #444;
+  }
+
+  .time-red {
+	color: #000;
+	background-color: #d73c50;
+  }
+
+  .time-yellow {
+	color: #222;
+  	background-color: rgb(234, 184, 57);
+  }
+
+  .time-green {
+	color: #222;
+  	background-color: rgb(115, 191, 105);
+  }
 }
diff --git a/web/generate-site.py b/web/generate-site.py
@@ -11,7 +11,7 @@
 
 
 tabletmpl = """
-<table>
+<table class="mirrortbl">
 <thead>
 <tr>
   <th>Mirror</th>

diff --git a/web/index.html.in b/web/index.html.in
@@ -17,9 +17,6 @@
 	<link rel="stylesheet" href="/assets/screen.css">
 	<link rel="stylesheet" href="/assets/misc.css">
 	<link rel="stylesheet" href="/assets/font-ubuntu.css">
-
-	<script src="/assets/jquery.min.js"></script>
-	<script src="/assets/bootstrap.min.js"></script>
 </head>
 <body>
 	<nav class="navbar navbar-default navbar-inverse navbar-sticky" role="navigation">
@@ -126,5 +123,8 @@
 			<p class="text-center">Linux® is a registered trademark of Linus Torvalds (<a href="https://www.linuxfoundation.org/programs/legal/trademark/attribution">info</a>)</p>
 		</footer>
 	</div>
+	<script src="/assets/jquery.min.js"></script>
+	<script src="/assets/bootstrap.min.js"></script>
+	<script src="/assets/live-metrics.js"></script>
 </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ @@
     tabletmpl = """
-    <table>
+    <table class="mirrortbl">
     <thead>
     <tr>
       <th>Mirror</th>
@@ Expand Down @@