yardstick/common/report.html.j2

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <!--
   5  Copyright (c) 2017 Rajesh Kudaka <4k.rajesh@gmail.com>
   6  Copyright (c) 2018 Intel Corporation.
   7
   8  All rights reserved. This program and the accompanying materials
   9  are made available under the terms of the Apache License, Version 2.0
  10  which accompanies this distribution, and is available at
  11  http://www.apache.org/licenses/LICENSE-2.0
  12 -->
  13
  14     <head>
  15         <meta charset="utf-8">
  16         <meta name="viewport" content="width=device-width, initial-scale=1">
  17         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  18         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  19         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  20         <script src="https://code.highcharts.com/highcharts.js"></script>
  21
  22         <style>
  23             table {
  24                 overflow-y: scroll;
  25                 height: 360px;
  26                 display: block;
  27             }
  28             header {
  29                 font-family: Frutiger;
  30                 clear: left;
  31                 text-align: center;
  32             }
  33         </style>
  34     </head>
  35
  36     <body>
  37         <header class="jumbotron text-center">
  38             <h1>Yardstick User Interface</h1>
  39             <h4>Report of {{task_id}} Generated</h4>
  40         </header>
  41
  42         <div class="container">
  43             <div class="row">
  44                 <div class="col-md-4">
  45                     <div class="table-responsive">
  46                         <table class="table table-hover"></table>
  47                     </div>
  48                 </div>
  49                 <div class="col-md-8">
  50                     <div id="container"></div>
  51                 </div>
  52             </div>
  53         </div>
  54
  55         <script>
  56             var arr, tab, th, tr, td, tn, row, col, thead, tbody;
  57             arr = {{table|safe}};
  58             tab = document.getElementsByTagName('table')[0];
  59
  60             thead = document.createElement('thead');
  61             tr = document.createElement('tr');
  62             for (col = 0; col < Object.keys(arr).length; col++) {
  63                 th = document.createElement('th');
  64                 tn = document.createTextNode(Object.keys(arr).sort()[col]);
  65                 th.appendChild(tn);
  66                 tr.appendChild(th);
  67                 thead.appendChild(tr);
  68             }
  69             tab.appendChild(thead);
  70
  71             tbody = document.createElement('tbody');
  72             for (row = 0; row < arr[Object.keys(arr)[0]].length; row++) {
  73                 tr = document.createElement('tr');
  74                 for (col = 0; col < Object.keys(arr).length; col++) {
  75                     td = document.createElement('td');
  76                     tn = document.createTextNode(arr[Object.keys(arr).sort()[col]][row]);
  77                     td.appendChild(tn);
  78                     tr.appendChild(td);
  79                 }
  80                 tbody.appendChild(tr);
  81             }
  82             tab.appendChild(tbody);
  83
  84             $(function() {
  85                 $('#container').highcharts({
  86                     title: {
  87                         text: 'Yardstick test results',
  88                         x: -20, //center
  89                     },
  90                     subtitle: {
  91                         text: 'Report of {{task_id}} Task Generated',
  92                         x: -20,
  93                     },
  94                     xAxis: {
  95                         title: {
  96                             text: 'Timestamp',
  97                         },
  98                         categories: {{Timestamps|safe}},
  99                     },
 100                     yAxis: {
 101                         plotLines: [{
 102                             value: 0,
 103                             width: 1,
 104                             color: '#808080',
 105                         }],
 106                     },
 107                     tooltip: {
 108                         valueSuffix: '',
 109                     },
 110                     legend: {
 111                         layout: 'vertical',
 112                         align: 'right',
 113                         verticalAlign: 'middle',
 114                         borderWidth: 0,
 115                     },
 116                     series: {{series|safe}},
 117                 });
 118             });
 119         </script>
 120     </body>
 121 </html>