yardstick/common/html_template.py

   1 #############################################################################
   2 # Copyright (c) 2017 Rajesh Kudaka
   3 #
   4 # Author: Rajesh Kudaka 4k.rajesh@gmail.com
   5 # All rights reserved. This program and the accompanying materials
   6 # are made available under the terms of the Apache License, Version 2.0
   7 # which accompanies this distribution, and is available at
   8 # http://www.apache.org/licenses/LICENSE-2.0
   9 #############################################################################
  10
  11 template = """
  12 <html>
  13 <body>
  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\
  18 /css/bootstrap.min.css">
  19 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1\
  20 /jquery.min.js"></script>
  21 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7\
  22 /js/bootstrap.min.js"></script>
  23 <script src="https://code.highcharts.com/highcharts.js"></script>
  24 <script src="jquery.min.js"></script>
  25 <script src="highcharts.js"></script>
  26 </head>
  27 <style>
  28
  29 table{
  30   overflow-y: scroll;
  31   height: 360px;
  32   display: block;
  33   }
  34
  35  header,h3{
  36     font-family:Frutiger;
  37     clear: left;
  38     text-align: center;
  39 }
  40 </style>
  41 <header class="jumbotron text-center">
  42   <h1>Yardstick User Interface</h1>
  43   <h4>Report of {{task_id}} Generated</h4>
  44 </header>
  45
  46 <div class="container">
  47   <div class="row">
  48     <div class="col-md-4">
  49         <div class="table-responsive" >
  50         <table  class="table table-hover" > </table>
  51         </div>
  52     </div>
  53     <div class="col-md-8" >
  54     <div id="container" ></div>
  55    </div>
  56   </div>
  57 </div>
  58 <script>
  59   var arr, tab, th, tr, td, tn, row, col, thead, tbody;
  60   arr={{table|safe}}
  61   tab = document.getElementsByTagName('table')[0];
  62   thead=document.createElement('thead');
  63   tr = document.createElement('tr');
  64   for(row=0;row<Object.keys(arr).length;row++)
  65   {
  66       th = document.createElement('th');
  67       tn = document.createTextNode(Object.keys(arr).sort()[row]);
  68       th.appendChild(tn);
  69       tr.appendChild(th);
  70           thead.appendChild(tr);
  71   }
  72   tab.appendChild(thead);
  73   tbody=document.createElement('tbody');
  74
  75   for (col = 0; col < arr[Object.keys(arr)[0]].length; col++){
  76   tr = document.createElement('tr');
  77   for(row=0;row<Object.keys(arr).length;row++)
  78   {
  79       td = document.createElement('td');
  80       tn = document.createTextNode(arr[Object.keys(arr).sort()[row]][col]);
  81       td.appendChild(tn);
  82       tr.appendChild(td);
  83   }
  84     tbody.appendChild(tr);
  85         }
  86 tab.appendChild(tbody);
  87
  88 </script>
  89
  90 <script language="JavaScript">
  91
  92 $(function() {
  93   $('#container').highcharts({
  94     title: {
  95       text: 'Yardstick test results',
  96       x: -20 //center
  97     },
  98     subtitle: {
  99       text: 'Report of {{task_id}} Task Generated',
 100       x: -20
 101     },
 102     xAxis: {
 103       title: {
 104         text: 'Timestamp'
 105       },
 106       categories:{{Timestamp|safe}}
 107     },
 108     yAxis: {
 109
 110       plotLines: [{
 111         value: 0,
 112         width: 1,
 113         color: '#808080'
 114       }]
 115     },
 116     tooltip: {
 117       valueSuffix: ''
 118     },
 119     legend: {
 120       layout: 'vertical',
 121       align: 'right',
 122       verticalAlign: 'middle',
 123       borderWidth: 0
 124     },
 125     series: {{series|safe}}
 126   });
 127 });
 128
 129 </script>
 130
 131
 132 </body>
 133 </html>"""
 134
 135 report_template = """
 136 <html>
 137     <head>
 138         <title>Yardstick Report</title>
 139         <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css\
 140 /bootstrap.min.css" rel="stylesheet">
 141     </head>
 142     <div class="content">
 143         <h3>Yardstick Report </h3>
 144         <hr/>
 145         <div>
 146
 147             <div>Task ID : {{result.task_id}} </div>
 148             <div style="margin-top:5px;">Criteria :
 149                 <font> {{result.criteria}}</font>
 150             </div>
 151             <hr/>
 152
 153             <caption>Information</caption>
 154             <table class="table table-striped">
 155                 <tr>
 156                     <th>#</th>
 157                     <th>key</th>
 158                     <th>value</th>
 159                 </tr>
 160                 <tbody>
 161                     {% for key, value in result.info.items() %}
 162                     <tr>
 163                         <td>{{ loop.index }}</td>
 164                         <td>{{key}}</td>
 165                         <td>{{value}}</td>
 166                     </tr>
 167                     {% endfor %}
 168                 </tbody>
 169             </table>
 170             <hr/>
 171
 172             <caption>Test Cases</caption>
 173             <table class="table table-striped">
 174                 <tr>
 175                     <th>#</th>
 176                     <th>key</th>
 177                     <th>value</th>
 178                 </tr>
 179                 <tbody>
 180                     {% for key, value in result.testcases.items() %}
 181                     <tr>
 182                         <td>{{ loop.index }}</td>
 183                         <td>{{key}}</td>
 184                         <td>{{value.criteria}}</td>
 185                     </tr>
 186                     {% endfor %}
 187                 </tbody>
 188             </table>
 189
 190         </div>
 191     </div>
 192 </html>
 193 """