From a2e34ad63c80c7c330b8a256b65eee0110429a14 Mon Sep 17 00:00:00 2001 From: classabbyamp Date: Mon, 20 Nov 2023 21:24:50 -0500 Subject: [PATCH 1/2] 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. --- web/assets/live-metrics.js | 33 +++++++++++++++++++++++ web/assets/misc.css | 55 +++++++++++++++++++++++++++----------- web/generate-site.py | 2 +- web/index.html.in | 6 ++--- 4 files changed, 77 insertions(+), 19 deletions(-) create mode 100644 web/assets/live-metrics.js diff --git a/web/assets/live-metrics.js b/web/assets/live-metrics.js new file mode 100644 index 0000000..256726b --- /dev/null +++ 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 'a long time ago'; + } else if (v >= 24*60*60) { // 24 hours + return '' + (v/(24*60*60)).toFixed(1) + " days" + } else if (v >= 19*60*60) { // 19 hours + return '' + (v/(60*60)).toFixed(1) + " hours" + } else if (v >= 60*60) { // 1 hour + return '' + (v/(60*60)).toFixed(1) + " hours" + } else { // less than an hour + return '' + (v/60).toFixed(0) + " 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('Last Synced'); + $(".mirrortbl tbody tr").each(function() { + var k = $(this).children(":first")[0].innerText.trim().replace(/https?:\/\//, ""); + $(this).append(mirrors[k] || 'unreachable'); + }); + } + ); +}); + diff --git a/web/assets/misc.css b/web/assets/misc.css index 058f2ed..d2ed8bd 100644 --- 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 index c1e501a..a250707 100644 --- a/web/generate-site.py +++ b/web/generate-site.py @@ -11,7 +11,7 @@ tabletmpl = """ - +
diff --git a/web/index.html.in b/web/index.html.in index 01781ad..6f7c690 100644 --- a/web/index.html.in +++ b/web/index.html.in @@ -17,9 +17,6 @@ - - -
Mirror