upbeat/lib/upbeat/www/views/action.jade

Fast health and performance monitoring with process handling

extend layout
block content
  ul.breadcrumb
    li
      a(href="/services/#{service.name}")= service.name
      span.divider /
    li.active= action.name


  h3 Attributes
  table.table.table-condensed.table-bordered.table-striped
    tr
      th Uptime Today
      td#uptime
    tr
      th Downtime Today
      td#downtime
    tr
      th Average Response Time
      td#avgRespTime
    tr
      th Interval
      td#interval
    tr
      th Timeout
      td#timeout
    tr
      th Failed Count
      td#failures
    tr
      th Passed Count
      td#passes

  h3 Error History
  table.table.table-condensed.table-bordered.table-striped#errorHistory

  h3 Performance
  #container(style="width:100%;height:500px")

  script.
    $(function () { getData(); });

    function getData() {
      $.get(location.href + '.json', updateData);
      setInterval(function () { $.get(location.href + '.json', updateData) }, 2000);
    }

    var chart = null;

    function updateData(payload) {
      var meta = payload.meta;
      var data = payload.responseTimes;

      for (var k in meta) {
        var html = '';

        if (k == 'errorHistory') {
          html = meta.errorHistory.map(function (e) {
            return '<tr>' +
                     '<td>' + e.error + '</td>' +
                     '<td>@</td>' +
                     '<td>' + new Date(e.timestamp) + '</td>' +
                   '</tr>';
          }).join("\n");
        }

        else {
          html = meta[k];
        }

        $('#' + k).html(html)
      }

      if (chart) {
        chart.series[0].setData(data, true);
        return;
      }

      chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          type: 'line'
        },

        xAxis: {
          title: { text: 'Seconds Ago' },
          categories: #{categories.min.data}
        },
        yAxis: { title: { text: 'Time in Milliseconds' } },

        title: { text: '' },
        plotOptions: {
          pointInterval: 2000
        },

        series: [ { name: 'action', data: data, connectNulls: true } ]
      });
    }