yardstick/common/nsb_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         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css">
  19         <link rel="stylesheet" href="{{template_dir}}/nsb_report.css">
  20         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  21         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  22         <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
  23         <script src="https://code.highcharts.com/highcharts.js"></script>
  24     </head>
  25
  26     <body>
  27         <div class="container" style="width:80%">
  28             <div class="row">
  29                 <header class="jumbotron">
  30                     <h1>Yardstick User Interface</h1>
  31                     <h4>Report of {{task_id}} Generated</h4>
  32                 </header>
  33             </div>
  34             <div class="row" style="height:500px">
  35                 <div class="col-md-2 control-pane">
  36                     <div id="data_selector"></div>
  37                 </div>
  38                 <div class="col-md-10 data-pane">
  39                     <div id="graph"></div>
  40                 </div>
  41             </div>
  42             <div class="row">
  43                 <div class="col-md-12 table-responsive">
  44                     <table class="table table-hover"></table>
  45                 </div>
  46             </div>
  47         </div>
  48
  49         <script>
  50             var arr, tab, tr, td, tbody, keys, key, curr_data;
  51             arr = {{table|safe}};
  52
  53             tab = document.getElementsByTagName('table')[0];
  54             tbody = document.createElement('tbody');
  55             keys = Object.keys(arr);
  56             // for each metric
  57             for (var i = 0; i < keys.length; i++) {
  58                 tr = document.createElement('tr');
  59                 td = document.createElement('td');
  60                 key = keys[i];
  61                 td.append(key);
  62                 tr.append(td);
  63                 curr_data = arr[key];
  64                 // add each piece of data as its own column
  65                 for (var j = 0; j < curr_data.length; j++) {
  66                     td = document.createElement('td');
  67                     td.append(curr_data[j]);
  68                     tr.append(td);
  69                 }
  70                 tbody.append(tr);
  71             }
  72             tab.appendChild(tbody);
  73
  74             $(function() {
  75                 $('#data_selector').jstree({
  76                     plugins: ['checkbox'],
  77                     checkbox: {
  78                         three_state: false,
  79                         whole_node: true,
  80                         tie_selection: false,
  81                     },
  82                     core: {
  83                         themes: {
  84                             icons: false,
  85                             stripes: true,
  86                         },
  87                         data: {{jstree_nodes|safe}},
  88                     },
  89                 });
  90
  91                 $('#data_selector').on('check_node.jstree uncheck_node.jstree', function(e, data) {
  92                     var selected_leaves = [];
  93                     for (var i = 0; i < data.selected.length; i++) {
  94                         var node = data.instance.get_node(data.selected[i]);
  95                         if (node.children.length == 0) {
  96                             var point = {name: node.id, data: arr[node.id]};
  97                             selected_leaves.push(point);
  98                         }
  99                     }
 100
 101                     $('#graph').highcharts({
 102                         title: {
 103                             text: 'Yardstick Graphs',
 104                             x: -20, //center
 105                         },
 106                         chart: {
 107                             marginLeft: 400,
 108                             zoomType: 'x',
 109                             type: 'spline',
 110                         },
 111                         xAxis: {
 112                             crosshair: {
 113                                 width: 1,
 114                                 color: 'black',
 115                             },
 116                             title: {
 117                                 text: 'Timestamp',
 118                             },
 119                             categories: {{Timestamps|safe}},
 120                         },
 121                         yAxis: {
 122                             crosshair: {
 123                                 width: 1,
 124                                 color: 'black',
 125                             },
 126                             plotLines: [{
 127                                 value: 0,
 128                                 width: 1,
 129                                 color: '#808080',
 130                             }],
 131                         },
 132                         plotOptions: {
 133                             series: {
 134                                 showCheckbox: false,
 135                                 visible: false,
 136                             },
 137                         },
 138                         tooltip: {
 139                             valueSuffix: '',
 140                         },
 141                         legend: {
 142                             enabled: true,
 143                         },
 144                         series: selected_leaves,
 145                     });
 146
 147                     var chart = $('#graph').highcharts();
 148                     for (var i = 0; i < chart.series.length; i++) {
 149                         var series = chart.series[i];
 150                         if (series.visible) {
 151                             series.hide();
 152                         } else {
 153                             series.show();
 154                         }
 155                     }
 156                 });
 157             });
 158         </script>
 159     </body>
 160 </html>