upbeat/lib/upbeat/www/views/service.jade

Fast health and performance monitoring with process handling

extend layout
block content
  h1.name= service.name

  table.table.table-bordered
    thead
      tr
        th id
        th Avg Resp
        th Uptime
        th Status
        th 
    each action, i in service.actions
      tr(id="action" + i)
        td: a(href="/services/#{service.name}/actions/#{action.name}")= action.name
        td.avgTime= action.averageTime() + 'ms'
        td.uptime= percentage(action.meta.uptime(), action.meta.uptime() + action.meta.downtime())
        td.is-up
          = action.isUp() ? 'Up' : 'Down'
        td
          div.sparkline

  #chart

  script.
    var chart = null;

    $(function () { 
      buildChart();
      getData();
      setInterval(getData, 2000);
    });

    function getData() {
      $.get(location.href.replace(/(\.\w+)?$/, '.json'), function (data) { 
        for (var i=0; i<data.length; i++) {
          populateAction(i, data[i]);
        }

        chart.redraw();
      });
    }

    function populateAction(idx, data) {
      var $action = $('#action' + idx);
      $action.find('.avgTime').html(data.avgTime);
      $action.find('.is-up').html(data.up ? 'Up' : 'Down');
      $action.find('.sparkline').sparkline(data.series);

      var totalTime = data.uptime + data.downtime;
      var time = percentage(data.uptime, totalTime);

      $action.find('.uptime').html(time);

      var line = chart.series[idx];
      line.setData(data.series, false);
    }

    function buildChart() {
      var count = #{service.actions.length};
      var series = [];

      for (var i=0; i<count; i++) {
        series.push({ name: $('#action' + i).attr('name'), data: [], connectNulls: true });
      }


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

        title: { text: $('h1.name').text() },

        xAxis: {
          title: { text: "Seconds Ago" },
          categories: #{categories.min.data},
        },


        yAxis: {
          title: { text: "Response Time in Milliseconds" }
        },


        plotOptions: {
          pointInterval: 2000
        },

        series: series
      });
    }