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.3.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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
  21
  22         <style>
  23             table {
  24                 overflow-y: scroll;
  25                 height: 360px;
  26                 display: block;
  27             }
  28             header {
  29                 font-family: Frutiger, "Helvetica Neue", Helvetica, Arial, sans-serif;
  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                     <canvas id="cnvGraph" style="width: 100%; height: 500px"></canvas>
  51                 </div>
  52             </div>
  53         </div>
  54
  55         <script>
  56             var None = null;
  57             var arr, tab, th, tr, td, tn, row, col, thead, tbody, val;
  58             arr = {{table|safe}};
  59             tab = document.getElementsByTagName('table')[0];
  60
  61             thead = document.createElement('thead');
  62             tr = document.createElement('tr');
  63             for (col = 0; col < Object.keys(arr).length; col++) {
  64                 th = document.createElement('th');
  65                 tn = document.createTextNode(Object.keys(arr).sort()[col]);
  66                 th.appendChild(tn);
  67                 tr.appendChild(th);
  68             }
  69             thead.appendChild(tr);
  70             tab.appendChild(thead);
  71
  72             tbody = document.createElement('tbody');
  73             for (row = 0; row < arr[Object.keys(arr)[0]].length; row++) {
  74                 tr = document.createElement('tr');
  75                 for (col = 0; col < Object.keys(arr).length; col++) {
  76                     val = arr[Object.keys(arr).sort()[col]][row];
  77                     td = document.createElement('td');
  78                     tn = document.createTextNode(val === None ? '' : val);
  79                     td.appendChild(tn);
  80                     tr.appendChild(td);
  81                 }
  82                 tbody.appendChild(tr);
  83             }
  84             tab.appendChild(tbody);
  85
  86             $(function() {
  87                 var datasets = {{datasets|safe}};
  88
  89                 var colors = [
  90                     '#FF0000',  // Red
  91                     '#228B22',  // ForestGreen
  92                     '#FF8C00',  // DarkOrange
  93                     '#00008B',  // DarkBlue
  94                     '#FF00FF',  // Fuchsia
  95                     '#9ACD32',  // YellowGreen
  96                     '#FFD700',  // Gold
  97                     '#4169E1',  // RoyalBlue
  98                     '#A0522D',  // Sienna
  99                     '#20B2AA',  // LightSeaGreen
 100                     '#8A2BE2',  // BlueViolet
 101                 ];
 102
 103                 var points = [
 104                     {s: 'circle',   r: 3},
 105                     {s: 'rect',     r: 4},
 106                     {s: 'triangle', r: 4},
 107                     {s: 'star',     r: 4},
 108                     {s: 'rectRot',  r: 5},
 109                 ];
 110
 111                 datasets.forEach(function(d, i) {
 112                     var color = colors[i % colors.length];
 113                     var point = points[i % points.length];
 114                     d.borderColor = color;
 115                     d.backgroundColor = color;
 116                     d.pointStyle = point.s;
 117                     d.pointRadius = point.r;
 118                     d.pointHoverRadius = point.r + 1;
 119                 });
 120
 121                 new Chart($('#cnvGraph'), {
 122                     type: 'line',
 123                     data: {
 124                         labels: {{Timestamps|safe}},
 125                         datasets: datasets,
 126                     },
 127                     options: {
 128                         elements: {
 129                             line: {
 130                                 borderWidth: 2,
 131                                 fill: false,
 132                                 tension: 0,
 133                             },
 134                         },
 135                         title: {
 136                             text: [
 137                                 'Yardstick test results',
 138                                 'Report of {{task_id}} Task Generated',
 139                             ],
 140                             display: true,
 141                         },
 142                         scales: {
 143                             xAxes: [{
 144                                 type: 'category',
 145                                 scaleLabel: {
 146                                     display: true,
 147                                     labelString: 'Timestamp',
 148                                 },
 149                             }],
 150                             yAxes: [{
 151                                 type: 'linear',
 152                                 scaleLabel: {
 153                                     display: true,
 154                                     labelString: 'Values',
 155                                 },
 156                             }],
 157                         },
 158                         tooltips: {
 159                             mode: 'point',
 160                             intersect: true,
 161                         },
 162                         hover: {
 163                             mode: 'index',
 164                             intersect: false,
 165                             animationDuration: 0,
 166                         },
 167                         legend: {
 168                             position: 'right',
 169                             labels: {
 170                                 usePointStyle: true,
 171                             },
 172                         },
 173                         animation: {
 174                             duration: 0,
 175                         },
 176                         responsive: true,
 177                         responsiveAnimationDuration: 0,
 178                         maintainAspectRatio: false,
 179                     },
 180                 });
 181             });
 182         </script>
 183     </body>
 184 </html>