status-page: add alerts for github issues (#93)

* status-page: add alerts for github issues * status-page: tweak css
NixOS · Jan 8, 2020 · 3294705 · 3294705
1 parent 396ad45
commit 3294705
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/delft/eris/status-page/index.html b/delft/eris/status-page/index.html
@@ -57,6 +57,8 @@
         <h1>NixOS</h1>
       </div>
 
+      <div id="alerts"></div>
+
       <div class="hero12">
         <h2>Nix Channel Status</h2>
         <p>See <a href="http://howoldis.herokuapp.com/">HowOldIs</a> and the <a href="https://nixos.wiki/wiki/Nix_channels">NixOS Wiki</a> for information on how channel updates progress.</p>

diff --git a/delft/eris/status-page/status.css b/delft/eris/status-page/status.css
@@ -12,6 +12,15 @@
   max-width: 15em;
 }
 
+#alerts {
+    margin-top: 10px;
+}
+
+.issue-age {
+    display: inline-block;
+    min-width: 6em;
+}
+
 .github {
   max-width: 10em;
   overflow: hidden;

diff --git a/delft/eris/status-page/status.js b/delft/eris/status-page/status.js
@@ -8,6 +8,30 @@ function init() {
   });
 }
 
+async function fetchIssues(label) {
+    const response = await fetch(`https://api.github.com/repos/NixOS/nixpkgs/issues?labels=${label}`);
+    return await response.json();
+}
+
+fetchIssues("1.severity%3A%20channel%20blocker")
+    .then(data => data.map(issue => {
+        var el = document.createElement('div');
+        el.classList = "alert alert-warning";
+        el.innerHTML = '<span class="issue-age"></span> <a class="issue-link"></a>';
+        const since = moment(issue['created_at']).fromNow();
+        el.getElementsByClassName('issue-age')[0].innerText = since;
+        el.getElementsByClassName('issue-link')[0].href = issue['html_url'];
+        el.getElementsByClassName('issue-link')[0].innerText = issue['title'];
+        if (issue['labels'].find(label => label['name'] == 'infrastructure')) {
+            el.innerHTML += ' <span class="label label-important">Infrastructure</span>'
+        }
+        return el;
+    }))
+    .then(elems => {
+        var alerts = document.getElementById('alerts');
+        elems.forEach(el => alerts.appendChild(el));
+    });
+
 function aggregateByChannel(result) {
   return result.reduce((acc, {
     channel,
@@ -18,7 +42,7 @@ function aggregateByChannel(result) {
   }), {});
 }
 
-async function fetchData(queryType, queryArgs = {}) {
+async function fetchMetrics(queryType, queryArgs = {}) {
   const params = new URLSearchParams();
   for (const [key, value] of Object.entries(queryArgs)) {
     params.set(key, String(value));
@@ -32,7 +56,7 @@ async function fetchData(queryType, queryArgs = {}) {
   return data.result;
 }
 
-const revisionData = fetchData('query', {
+const revisionData = fetchMetrics('query', {
     query: 'channel_revision'
   })
   .then(records => (
@@ -50,7 +74,7 @@ const revisionData = fetchData('query', {
   .then(aggregateByChannel);
 
 
-const updateTimeData = fetchData('query', {
+const updateTimeData = fetchMetrics('query', {
     query: 'channel_update_time'
   })
   .then(records => (
@@ -75,7 +99,7 @@ if (idealStart > earliestStart) {
     start = earliestStart;
 }
 var end = moment.utc().format();
-const jobsetData = fetchData('query_range', {
+const jobsetData = fetchMetrics('query_range', {
     query: 'hydra_job_failed',
     start: start.format(),
     end,