PagerDuty Incidents on a Service

Show incidents on a service. Part of the Summit 18 demo.

HTML

<div id="banner-message">
  Text a message or picture to 1-415-792-4932
</div>
<div id="incidents" class="wrapper">

</div>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Colfax;
  color: #222;
}

#banner-message {
  font-size: 40pt;
}

.incident img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

.wrapper {
  display: grid;
  grid-template-columns: 320px 320px 320px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
  font-size: 24pt;
  object-fit: cover
}

.box {
  background-color: #ddd;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}

JavaScript

update = function() {

  $.ajax({
    dataType: "json",
    url: "https://api.pagerduty.com/incidents?statuses%5B%5D=triggered&statuses%5B%5D=acknowledged&service_ids%5B%5D=PK01EFR&time_zone=UTC&include%5B%5D=first_trigger_log_entries&sort_by=created_at",
    headers: {
      "Accept": "application/vnd.pagerduty+json;version=2",
      "Authorization": "Token token=d4cc02c0de3a478cb13ae2aef31694a3"
    },
    success: function(data) {
      i = data.incidents
      if (JSON.stringify(i) == window.oldstring) {
        console.log("No changes")
        return;
      }
      window.oldstring = JSON.stringify(i)
      $("#incidents").html("")
      for (n in i) {
        incident = i[n]
        content = incident.title

        if (incident.first_trigger_log_entry && incident.first_trigger_log_entry.contexts && incident.first_trigger_log_entry.contexts.length) {
          content = "<img src='" + incident.first_trigger_log_entry.contexts[0].src + "'>"
        }
        console.log(incident)
        console.log(content)
        $("#incidents").prepend("<div class='box incident'>" + content + "</div>")
      }


    }
  });
}
update();
setInterval(update, 2000);