diff options
| author |   Patrice Buriez <patrice.buriez@intel.com> | 2018-11-09 10:33:50 +0100 |
|---|---|---|
| committer | Patrice Buriez <patrice.buriez@intel.com> | 2018-11-22 20:13:31 +0100 |
| commit | f36ccab454aa8ba156c234706d2667d5cae4ef94 (patch) | |
| tree | f8244c44d5e7cdf4b17edcac4d972e52a27a0ae4 /yardstick/common/report.html.j2 | |
| parent | 5d66ab59d2c6ab5784c965392fa7a9e137efc9d2 (diff) | |
Generate report from a file instead of string
``$ yardstick report generate ...`` now renders a template stored
in a file instead of from an imported string
Instead of using Django, templating is done by jinja2, as this is
used in other parts of Yardstick.
JIRA: YARDSTICK-1367
Topic: report/html_table (2 of 11)
Change-Id: Iaff53e7e28903e46164ce0977f6b8adbe04d23d7
Signed-off-by: Emma Foley <emma.l.foley@intel.com>
Signed-off-by: Patrice Buriez <patrice.buriez@intel.com>
Diffstat (limited to 'yardstick/common/report.html.j2')
| -rw-r--r-- | yardstick/common/report.html.j2 | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/yardstick/common/report.html.j2 b/yardstick/common/report.html.j2 new file mode 100644 index 000000000..ab76510ca --- /dev/null +++ b/yardstick/common/report.html.j2 @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<html> + +<!-- + Copyright (c) 2017 Rajesh Kudaka <4k.rajesh@gmail.com> + Copyright (c) 2018 Intel Corporation. + + All rights reserved. This program and the accompanying materials + are made available under the terms of the Apache License, Version 2.0 + which accompanies this distribution, and is available at + http://www.apache.org/licenses/LICENSE-2.0 +--> + + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> + <script src="https://code.highcharts.com/highcharts.js"></script> + + <style> + table { + overflow-y: scroll; + height: 360px; + display: block; + } + header { + font-family: Frutiger; + clear: left; + text-align: center; + } + </style> + </head> + + <body> + <header class="jumbotron text-center"> + <h1>Yardstick User Interface</h1> + <h4>Report of {{task_id}} Generated</h4> + </header> + + <div class="container"> + <div class="row"> + <div class="col-md-4"> + <div class="table-responsive"> + <table class="table table-hover"></table> + </div> + </div> + <div class="col-md-8"> + <div id="container"></div> + </div> + </div> + </div> + + <script> + var arr, tab, th, tr, td, tn, row, col, thead, tbody; + arr = {{table|safe}}; + tab = document.getElementsByTagName('table')[0]; + + thead = document.createElement('thead'); + tr = document.createElement('tr'); + for (col = 0; col < Object.keys(arr).length; col++) { + th = document.createElement('th'); + tn = document.createTextNode(Object.keys(arr).sort()[col]); + th.appendChild(tn); + tr.appendChild(th); + thead.appendChild(tr); + } + tab.appendChild(thead); + + tbody = document.createElement('tbody'); + for (row = 0; row < arr[Object.keys(arr)[0]].length; row++) { + tr = document.createElement('tr'); + for (col = 0; col < Object.keys(arr).length; col++) { + td = document.createElement('td'); + tn = document.createTextNode(arr[Object.keys(arr).sort()[col]][row]); + td.appendChild(tn); + tr.appendChild(td); + } + tbody.appendChild(tr); + } + tab.appendChild(tbody); + + $(function() { + $('#container').highcharts({ + title: { + text: 'Yardstick test results', + x: -20, //center + }, + subtitle: { + text: 'Report of {{task_id}} Task Generated', + x: -20, + }, + xAxis: { + title: { + text: 'Timestamp', + }, + categories: {{Timestamps|safe}}, + }, + yAxis: { + plotLines: [{ + value: 0, + width: 1, + color: '#808080', + }], + }, + tooltip: { + valueSuffix: '', + }, + legend: { + layout: 'vertical', + align: 'right', + verticalAlign: 'middle', + borderWidth: 0, + }, + series: {{series|safe}}, + }); + }); + </script> + </body> +</html> |