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.7/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.3.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.3.7/jstree.min.js"></script>
  23         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.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">
  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                     <canvas id="cnvGraph" style="width: 100%; height: 500px"></canvas>
  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 None = null;
  51             var arr, tab, tr, td, tbody, keys, key, curr_data, val;
  52             arr = {{table|safe}};
  53
  54             tab = document.getElementsByTagName('table')[0];
  55             tbody = document.createElement('tbody');
  56             keys = Object.keys(arr);
  57             // for each metric
  58             for (var i = 0; i < keys.length; i++) {
  59                 tr = document.createElement('tr');
  60                 td = document.createElement('td');
  61                 key = keys[i];
  62                 td.append(key);
  63                 tr.append(td);
  64                 curr_data = arr[key];
  65                 // add each piece of data as its own column
  66                 for (var j = 0; j < curr_data.length; j++) {
  67                     val = curr_data[j];
  68                     td = document.createElement('td');
  69                     td.append(val === None ? '' : val);
  70                     tr.append(td);
  71                 }
  72                 tbody.append(tr);
  73             }
  74             tab.appendChild(tbody);
  75
  76             $(function() {
  77                 $('#data_selector').jstree({
  78                     plugins: ['checkbox'],
  79                     checkbox: {
  80                         three_state: false,
  81                         whole_node: true,
  82                         tie_selection: false,
  83                     },
  84                     core: {
  85                         themes: {
  86                             icons: false,
  87                             stripes: true,
  88                         },
  89                         data: {{jstree_nodes|safe}},
  90                     },
  91                 });
  92
  93                 var objGraph = new Chart($('#cnvGraph'), {
  94                     type: 'line',
  95                     data: {
  96                         labels: {{Timestamps|safe}},
  97                         datasets: [],
  98                     },
  99                     options: {
 100                         elements: {
 101                             line: {
 102                                 borderWidth: 2,
 103                                 fill: false,
 104                                 tension: 0,
 105                             },
 106                         },
 107                         scales: {
 108                             xAxes: [{
 109                                 type: 'category',
 110                             }],
 111                             yAxes: [{
 112                                 type: 'linear',
 113                             }],
 114                         },
 115                         tooltips: {
 116                             mode: 'point',
 117                             intersect: true,
 118                         },
 119                         hover: {
 120                             mode: 'index',
 121                             intersect: false,
 122                             animationDuration: 0,
 123                         },
 124                         legend: {
 125                             position: 'bottom',
 126                             labels: {
 127                                 usePointStyle: true,
 128                             },
 129                         },
 130                         animation: {
 131                             duration: 0,
 132                         },
 133                         responsive: true,
 134                         responsiveAnimationDuration: 0,
 135                         maintainAspectRatio: false,
 136                     },
 137                 });
 138
 139                 $('#data_selector').on('check_node.jstree uncheck_node.jstree', function(e, data) {
 140                     var selected_datasets = [];
 141                     for (var i = 0; i < data.selected.length; i++) {
 142                         var node = data.instance.get_node(data.selected[i]);
 143                         if (node.children.length == 0) {
 144                             var dataset = {
 145                                 label: node.id,
 146                                 data: arr[node.id],
 147                             };
 148                             selected_datasets.push(dataset);
 149                         }
 150                     }
 151
 152                     var colors = [
 153                         '#FF0000',  // Red
 154                         '#228B22',  // ForestGreen
 155                         '#FF8C00',  // DarkOrange
 156                         '#00008B',  // DarkBlue
 157                         '#FF00FF',  // Fuchsia
 158                         '#9ACD32',  // YellowGreen
 159                         '#FFD700',  // Gold
 160                         '#4169E1',  // RoyalBlue
 161                         '#A0522D',  // Sienna
 162                         '#20B2AA',  // LightSeaGreen
 163                         '#8A2BE2',  // BlueViolet
 164                     ];
 165
 166                     var points = [
 167                         {s: 'circle',   r: 3},
 168                         {s: 'rect',     r: 4},
 169                         {s: 'triangle', r: 4},
 170                         {s: 'star',     r: 4},
 171                         {s: 'rectRot',  r: 5},
 172                     ];
 173
 174                     selected_datasets.forEach(function(d, i) {
 175                         var color = colors[i % colors.length];
 176                         var point = points[i % points.length];
 177                         d.borderColor = color;
 178                         d.backgroundColor = color;
 179                         d.pointStyle = point.s;
 180                         d.pointRadius = point.r;
 181                         d.pointHoverRadius = point.r + 1;
 182                     });
 183                     objGraph.data.datasets = selected_datasets;
 184                     objGraph.update();
 185                 });
 186             });
 187         </script>
 188     </body>
 189 </html>