statsd-grapher/views/stats.jade

A statsd backend that serves an http page with the graphical data

include ./permalink.jade

doctype html
html(lang='en')
  head
    title statsd grapher
    link(href='/favicon.png' rel='icon' type='image/png')
    link(href='/style.css' rel='stylesheet' type='text/css')
    script(type='text/javascript', src='/jquery-2.2.2.min.js')
    script(type='text/javascript', src='/plotly-latest.min.js')

    script.
      var renderLineGraph = function(name, type, data) {
        var layout = {
          yaxis: {
            title: name +' (week)',
            rangemode: 'nonnegative'
          },
          xaxis: {
            showgrid: false,
            type: 'date',
            tickmode: 'auto',
            nticks: 60,
            tickformat: "%m/%d/%y %I:%M %p"
          },
          margin: { t: 50, b: 150 }
        };
        Plotly.plot(document.getElementById(name +'_'+ type), data, layout);
      }
    

  h2 Counters
  if (counters)
    each name in counters
      h3(id!=name +'_counter_h')
        a(href!='#'+ name +'_counter_h')
          +permalink
          span #{name}
      div(id!=name +'_counter')
      script.
        $.getJSON('/metrics/counters/!{name}', function(data) {
          renderLineGraph('!{name}', 'counter', [data]);
        });


  hr


  h2 Counter Rates
  if (counter_rates)
    each name in counter_rates
      h3(id!=name +'_counter_rates_h')
        a(href!='#'+ name +'_counter_rates_h')
          +permalink
          span #{name}
      div(id!=name +'_counter_rates')
      script.
        $.getJSON('/metrics/counter_rates/!{name}', function(data) {
          renderLineGraph('!{name}', 'counter_rates', [data]);
        });

  hr


  h2 Gauges
  if (gauges)
    each name in gauges
      h3(id!=name +'_gauges_h')
        a(href!='#'+ name +'_gauges_h')
          +permalink
          span #{name}
      div(id!=name +'_gauges')
      script.
        $.getJSON('/metrics/gauges/!{name}', function(data) {
          data.line = { shape: 'vh' };
          renderLineGraph('!{name}', 'gauges', [data]);
        });


  hr


  h2 Timers
  if (timers)
    each name in timers
      h3(id!=name +'_timer_h')
        a(href!='#'+ name +'_timer_h')
          +permalink
          span #{name}

      div(id!=name +'_timer')
      script.
        $.getJSON('/metrics/timers/!{name}', function(data) {
          renderLineGraph('!{name}', 'timer', [data]);
        });

      div(id!=name +'_timer_box')
      script.
        $.getJSON('/metrics/timers/!{name}', function(data) {
          var data = data.hour;
          var layout = {
            yaxis: {
              title: '!{name} (hour)',
              rangemode: 'nonnegative'
            },
            xaxis: {
              tickmode: 'auto',
              nticks: 60
            },
            margin: { t: 50, b: 150 },
            showlegend: false
          };

          Plotly.plot(document.getElementById("!{name +'_timer_box'}"), data, layout);
        });


  hr


  h2 Sets
  if (sets)
    each name in sets
      h3(id!=name +'_sets_h')
        a(href!='#'+ name +'_sets_h')
          +permalink
          span #{name}

      div(id!=name +'_sets')
      script.
        $.getJSON('/metrics/sets/!{name}', function(data) {
          data.mode = 'markers';
          renderLineGraph('!{name}', 'sets', [data]);
        });