lnt/server/ui/templates/v4_graph.html

{% set nosidebar = True %}
{% import "utils.html" as utils %}

{% extends "layout.html" %}
{% set components = [(ts.name, v4_url_for(".v4_recent_activity"))] %}
{% block head %}
  <script src="{{ url_for('.static', filename='popup.js') }}"></script>
  <script src="{{ url_for('.static', filename='sorttable.js') }}"></script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
                          filename='flot/jquery.flot.min.js') }}"> </script>
  <script language="javascript" type="text/javascript"
           src="{{ url_for('.static',
                          filename='flot/jquery.flot.symbol.min.js') }}"> </script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
                          filename='flot/jquery.flot.errorbars.min.js') }}"> </script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
                          filename='flot/jquery.flot.navigate.min.js') }}"> </script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
                          filename='flot/jquery.flot.selection.min.js') }}"> </script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
                          filename='flot/jquery.flot.highlight.min.js') }}"></script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
                          filename='flot/jquery.flot.touch.min.js') }}"></script>
  <script language="javascript" type="text/javascript"
          src="{{ url_for('.static',
                        filename='lnt_graph.js') }}"></script>
{% endblock %}

{% block title %}Graph{% endblock %}

{# Add JS to initialize the graph. #}
{% block onload %}init_page(){% endblock %}

{% block javascript %}
var g = {};
var test_suite_name = "{{ request.view_args.testsuite_name }}";
var db_name = "{{ request.view_args.get('db_name','') }}";
var graph_plots = {{graph_plots|tojson|safe}};
var baseline_plots = {{baseline_plots|tojson|safe}};
var options = {{options|tojson|safe}};
prefix = "{{request.base_url}}";

transform_fn = function (v) { return v; }
inverse_transform_fn = function (v) { return v; }

if (options.logarithmic_scale) {
    transform_fn = function(v) {
      if (v < 0)
        return -Math.log10(-v);
      else if (v > 0)
        return Math.log10(v);
      else
        return 0;
    }
    inverse_transform_fn = function(v) {
      if (v < 0)
        return -Math.pow(10, -v);
      else if (v > 0)
        return Math.pow(10, v);
      else
        return 0;
    }
}

function init_graph() {
  // Set up the primary graph.
  var graph = $("#graph");
  var graph_options = {
      series : {
        lines : {
          lineWidth : 1 },
        shadowSize : 0
        },
      highlight : {
{% if revision_range is not none %}
        range: {{revision_range|tojson|safe}}
{% else %}
        enabled: false
{% endif %}
      },
      zoom : { interactive : false },
      pan : { interactive : true,
              frameRate: 60 },
      grid : {
        hoverable : true,
        clickable: true },
        yaxis: {
          transform: transform_fn,
          inverseTransform: inverse_transform_fn }
      };

  // Add baseline lines
  graph_options['grid']['markings'] = baseline_plots;
  var tmp_plots = update_graphplots(graph_plots);
  var main_plot = $.plot(graph, tmp_plots, graph_options);

  // Add tooltips.
  graph.bind("plotclick", function (e, p, i) {
      update_tooltip(e, p, i, show_tooltip, tmp_plots);
  });

  // Set up the overview graph.
  var overview = $("#overview")
  var overview_plots = {{overview_plots|tojson|safe}};
  $.plot(overview, overview_plots, {
    series : {
      lines : {
        lineWidth : 1 },
      shadowSize : 0 },
    selection: { mode: "x" },
    touch: {
      enabled: false
    },
    highlight : {
{% if revision_range is not none %}
       range: {{revision_range|tojson|safe}},
       alpha: "1",
       stroke: true,
{% else %}
        enabled: false
{% endif %}
    },
    yaxis: { ticks: [] } });

  // Connect selection on the overview graph to the main plot.
  $("#overview").bind("plotselected", function (event, ranges) {
    // Set the zooming on the plot.
    $.plot(graph, graph_plots,
      $.extend(true, {}, graph_options, {
        xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
        yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
      }));
  });
  bind_zoom_bar(main_plot);

}


function init_page() {
    // First start the requests for regrssion data.
    var urls = $(".data-row").each(function (index, val) {
        $.getJSON(get_api_url("regression",
                              db_name,
                              test_suite_name,
                              $(val).data('url')),
                              function (data) {
                                  new_graph_regression_callback(data, index, init_graph);
                              });
        return $(val).data('url');
    });

    init_graph();
    init_axis();
}

{% endblock %}

{% block sidebar %}
  <h4>Controls</h4>
  <ul>
  <li>Left Mouse: Pan
  <li>Double Left Mouse: Zoom
  </ul>
{% endblock %}

{% block body %}
  <table width="100%">
  <tr>
    <td><h3>Graph</h3></td>
    <td>
      <div class="dropdown pull-right" id="settings">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#settings">
          Settings <i class="icon-wrench"></i>
        </a>
        <div class="dropdown-menu">
          <form action="" method="get">
          <table class="table table-striped table-hover table-condensed">
            <tbody>
              <tr>
                <td>Mean() as Aggregation</td>
                <td><input type="checkbox" name="switch_min_mean" value="yes"
                    {{ 'checked="checked"' if options.switch_min_mean else ""}}/></td>
              </tr>
              <tr>
                <td>Hide Line Plot:</td>
                <td><input type="checkbox" name="hide_lineplot" value="yes"
                     {{ 'checked="checked"' if options.hide_lineplot else ""}}/></td>
              </tr>
              <tr>
                <td>Show Median Absolute Deviation:</td>
                <td><input type="checkbox" name="show_mad" value="yes"
                     {{ 'checked="checked"' if options.show_mad else ""}}/></td>
              </tr>
              <tr>
                <td>Show Standard Deviation:</td>
                <td><input type="checkbox" name="show_stddev" value="yes"
                     {{ 'checked="checked"' if options.show_stddev else ""}}/></td>
              </tr>
              <tr>
                <td>Show Linear Regression:</td>
                <td><input type="checkbox" name="show_linear_regression" value="yes"
                     {{ 'checked="checked"' if options.show_linear_regression else ""}}/></td>
              </tr>
              <tr>
                <td>Show Points For Failures:</td>
                <td><input type="checkbox" name="show_failures" value="yes"
                     {{ 'checked="checked"' if options.show_failures else ""}}/></td>
              </tr>
              <tr>
                <td>Hide Sample Points:</td>
                <td><input type="checkbox" name="hide_all_points" value="yes"
                     {{ 'checked="checked"' if options.hide_all_points else ""}}/></td>
              </tr>
              <tr>
                <td>Normalize By Median:</td>
                <td><input type="checkbox" name="normalize_by_median" value="yes"
                     {{ 'checked="checked"' if options.normalize_by_median else ""}}/></td>
              </tr>
              <tr>
                <td>Show Moving Average</td>
                <td><input type="checkbox" name="show_moving_average" value="yes"
                     {{ 'checked="checked"' if options.show_moving_average else ""}}/></td>
              </tr>
              <tr>
                <td>Show Moving Median</td>
                <td><input type="checkbox" name="show_moving_median" value="yes"
                     {{ 'checked="checked"' if options.show_moving_median else ""}}/></td>
              </tr>
              <tr>
                <td>Show Logarithmic Scale</td>
                <td><input type="checkbox" name="logarithmic_scale" value="yes"
                     {{ 'checked="checked"' if options.logarithmic_scale else ""}}/></td>
              </tr>
              <tr>
                <td>Moving Average/Median Window Size</td>
              </tr>
              {# Split this into a new row to avoid making the dialog wider. #}
              <tr>
                <td><input type="text" name="moving_window_size"
                     value="{{ options.moving_window_size }}"/></td>
              </tr>
              <tr>
                <td>Hide Revision Comparison Region Highlight</td>
                <td><input type="checkbox" name="hide_highlight" value="yes"
                     {{ 'checked="checked"' if options.hide_highlight else ""}}/></td>
              </tr>
            </tbody>
          </table>

          {# Add all the hidden fields. #}
          {% for name,value in request.args.items() %}
          {% if name.startswith('plot.') %}
          <input type="hidden" name="{{name}}" value="{{value}}"/>
          {% endif %}
          {% if name.startswith('baseline.') %}
          <input type="hidden" name="{{name}}" value="{{value}}"/>
          {% endif %}
          {% if name == 'mean' %}
          <input type="hidden" name="{{name}}" value="{{value}}"/>
          {% endif %}
          {% endfor %}

          <input class="btn btn-primary" style="clear: left; width: 100%"
                 type="submit" name="submit" value="Update" />
          </form>
        </div>
      </div>
    </td>
  </tr>

	<tr>
        <td colspan="2">
            <div id="graphbox" style="margin-left:20px">
                <div id="graph" style="height:500px"></div>
                <div id="zoombar" style="width:40px;">
                    <button id="in" type="button" class="btn btn-default" style="width:100%;text-align:center;">+</button>
                    <br/>
                    <button id="out" type="button" class="btn btn-default" style="width:100%; text-align:center;">-</button>
                </div>
                <div id="yaxis">Metric</div>
                <div id="xaxis">Order</div>
            </div>
        </td>
    </tr>

    <tr>
        <td colspan="2">
            <div id="overview" style="height:80px;margin-top:20px;margin-left:20px"></div>
        </td>
    </tr>

</table>

  <h3>Legend</h3>
  <table class="table table-condensed table-hover table-striped">
    <tr>
      <th></th>
      <th>Machine</th>
      <th>Test</th>
      <th>Type</th>
    </tr>
    {% for machine, test_name, field_name, col, url in legend %}
    <tr class="data-row" data-url="{{url}}">
      <td style="background-color: #{{ '%02x%02x%02x' % ((255*col[0])|int, (255*col[1])|int, (255*col[2])|int) }}">&nbsp;</td>
      <td>{{ utils.render_machine(machine) }}</td>
      <td>{{ test_name }}</td>
      <td class="metric">{{ field_name }}</td>
    </tr>
    {% endfor %}
  </table>
{% endblock %}