index.html.ejs 11.27 KiB
<!DOCTYPE html>
<html>
<head>
  <title>Minigun report</title>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js' charset='utf-8'></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.6.0/metricsgraphics.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.6.0/metricsgraphics.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
  <link href='https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet' type='text/css'>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js" charset="utf-8"></script>
  <style>
  body, p, li {
    font-family: sans-serif;
    font-size: 10pt;
  h1 {
    font-size: 18pt;
    font-weight: bold;
  #errorsContainer > p {
    color: #009900;
  #footer {
    padding: 1em;
    font-size: 0.8em;
    color: #999;
    text-align: center;
    margin-top: 1em;
    background-color: #eee;
  #editor {
    font-size: 8pt;
    height: 20em;
  </style>
  <script>
  window.Report = <%= report %>;
  </script>
  <style>
      h1 {
        line-height: 200%;
      body {
          background-color: #fcfcfc;
      .container {
          width: 90%;
          min-width: 960px;
  </style>
</head>
<body>
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<div class="container"> <div class="row" id="header"> <div class="col-md-4 col-md-offset-4"> <pre style="font-size: 5pt; background-color: #fcfcfc; border: none;"> _ _ _ _ __ ___ (_)_ __ (_) __ _ _ _ _ __ _ __ ___ _ __ ___ _ __| |_ | '_ ` _ \| | '_ \| |/ _` | | | | '_ \ | '__/ _ \ '_ \ / _ \| '__| __| | | | | | | | | | | | (_| | |_| | | | | | | | __/ |_) | (_) | | | |_ |_| |_| |_|_|_| |_|_|\__, |\__,_|_| |_| |_| \___| .__/ \___/|_| \__| |___/ |_| </pre> </div> </div> <div class="row"> <div class="col-md-12"> <h1 class="text-center" id="page-title">Test run on <span id="timestamp">date</span></h1> </div> </div> <div class="row"> <div class="col-md-4"> <p><strong>Summary</strong></p> <table class="table table-bordered table-hover table-condensed"> <tbody> <tr> <td>Test duration</td> <td><span id="testDuration">0</span> sec</td> </tr> <tr> <td>Scenarios created</td> <td><span id="scenariosCreated">0</span></td> </tr> <tr> <td>Requests completed</td> <td><span id="scenariosCompleted">0</span></td> </tr> </tbody> </table> </div> <div class="col-md-4"> <div id="codesContainer"> <strong>Codes</strong> <p></p> <table class="table table-bordered table-hover table-condensed" id="codes"> </table> </div> </div> <div class="col-md-4"> <div id="errorsContainer"> <strong>Errors</strong> <p></p> <table class="table table-bordered table-hover table-condensed" id="errors"> </table> </div> </div> </div> <!-- /.row --> <div class="row">
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
<div class="text-center col-md-12"> <h2>Charts</h2> </div> </div> <div class="row"> <div class="latency-histogram text-center col-md-6"></div> <div class="latency text-center col-md-6"></div> <!-- <div id="latency-buttons"> <button class="btn btn-xs btn-default">min</button> <button class="btn btn-xs btn-default">max</button> <button class="btn btn-xs btn-default">median</button> <button class="btn btn-xs btn-default">p95</button> </div> --> </div> <div class="latency-legend"></div> <div class="row"> </div> <div class="row"> <div class="rps-mean text-center col-md-6"></div> <div class="rps-count text-center col-md-6"></div> <div class="codes-line text-center col-md-6"></div> <div class="errors-line text-center col-md-6"></div> </div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h3 class="text-center">Raw report data</h3> <p>This is the raw JSON stats output that the report was generated from.</p> <div id="editor"> </div> </div> </div> <script> var editor = ace.edit("editor"); editor.getSession().setMode("ace/mode/javascript"); editor.setValue(JSON.stringify(Report, null, 2)); editor.gotoLine(1);editor.setHighlightActiveLine(false); var l = _; $('#timestamp').html(moment(Report.aggregate.timestamp).format('DD MMM YYYY HH:mm:SS')); $('#testDuration').html(l.size(Report.intermediate) * 10); $('#scenariosCompleted').html(Report.aggregate.scenariosCompleted); $('#scenariosCreated').html(Report.aggregate.scenariosCreated); var markers = []; if(l.size(Report.phases) > 0) { markers = l.foldl(Report.phases, function(acc, phase, index) { var label = phase.name || 'Phase ' + (index + 1); var timestamp = (index === 0) ? 0 : Report.phases[index - 1].duration + acc[index - 1].timestamp; acc.push({ timestamp: timestamp, label: label }); return acc; }, []);