Load incidents log directly from GitHub Issues

Author: Hans Kristian Flaatten

assets/js/script.js

@@ -38,4 +38,66 @@ $(document).ready(function() {
 
       $here.append('<li>' + name + ' <span class="status ' + clas + '">' + text + '</span></li>') });
   };
+
+  $.getJSON('https://api.github.com/repos/Turistforeningen/status/issues?state=all').done(message);
+
+  var $incidents = $('#incidents');
+
+  function message(issues) {
+    issues.forEach(function(issue) {
+      var status_text = {
+        operational: 'løst',
+        investigating: 'undersøker',
+        'major outage': 'driftsavbrudd',
+        'degraded performance': 'degradert ytelse',
+      };
+
+      var status = issue.labels.reduce(function(status, label) {
+        if (/^status:/.test(label.name)) {
+          return label.name.replace('status:', '');
+        } else {
+          return status;
+        }
+      }, 'operational');
+
+      var systems = issue.labels.filter(function(label) {
+        return /^system:/.test(label.name);
+      }).map(function(label) {
+        return label.name.replace('system:', '')
+      });
+
+      console.log(status);
+      console.log(systems);
+
+      var html = '<div class="incident">\n';
+      html += '<span class="date">' + issue.created_at + '</span>\n';
+
+      // status
+      if (issue.state == 'closed') {
+        html += '<span class="label operational float-right">løst</span>';
+      } else {
+        html += '<span class="label ' + status + ' float-right">';
+          html += status_text[status];
+        html += '</span>\n';
+      }
+
+      // systems
+      for (var i = 0; i < systems.length; i++) {
+        html += '<span class="label system float-right">' + systems[i] + '</span>';
+      }
+
+      html += '<hr>\n';
+      html += '<span class="title">' + issue.title + '</span>\n';
+      html += '<p>' + issue.body + '</p>\n';
+
+      if (issue.state == 'closed') {
+        html += '<p><em>Oppdatert ' + issue.closed_at + '<br/>';
+        html += 'Systemet er tilbake i normal drift.</p>';
+      }
+
+      html += '</div>';
+
+      $incidents.append(html);
+    });
+  };
 });

index.html

@@ -28,35 +28,10 @@ <h4>Tjenester</h4>
         <ul id="services" class="systems"></ul>
 
         <h4>Hendelser</h4>
-        <em>Ingen hendelser de siste dagene.</em>
 
-        <!--{% if incidents %}
-          {% for incident in incidents %}
-          <div class="incident">
-            <span class="date">{{ incident.created }}</span>
-
-            {% if incident.closed %}
-              <span class="label operational float-right">resolved</span>
-            {% else %}
-              <span class="label {{ incident.severity }} float-right">{{ incident.severity }}</span>
-            {% endif %}
-            {% for system in incident.systems %}
-              <span class="label system float-right">{{ system }}</span>
-            {% endfor %}
-            <hr/>
-
-            <span class="title">{{ incident.title }}</span>
-            <p>{{ incident.body }}</p>
-            {% for update in incident.updates %}
-              <p><em>Update {{ update.created }}</em><br/>
-              {{ update.body }}
-              </p>
-            {% endfor %}
-          </div>
-          {% endfor %}
-        {% else %}
-        {% endif %}-->
-      </section>
+        <div id="incidents">
+          <div class="incident"></div>
+        </div>
 
       <footer class="footer">
         <section class="container">