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         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  20         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  21         <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
  22         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
  23         <style>
  24             {% include 'nsb_report.css' %}
  25         </style>
  26         <script>
  27             {% include 'nsb_report.js' %}
  28         </script>
  29     </head>
  30
  31     <body>
  32         <div class="container" style="width:80%">
  33             <div class="row">
  34                 <header class="jumbotron">
  35                     <h1>Yardstick User Interface</h1>
  36                     <h4>Report of {{task_id}} Generated</h4>
  37                 </header>
  38             </div>
  39             <div class="row">
  40                 <div class="col-md-2 control-pane">
  41                     <div id="data_selector"></div>
  42                 </div>
  43                 <div class="col-md-10 data-pane">
  44                     <canvas id="cnvGraph" style="width: 100%; height: 500px"></canvas>
  45                 </div>
  46             </div>
  47             <div class="row">
  48                 <div class="col-md-12 table-responsive">
  49                     <table class="table table-hover"></table>
  50                 </div>
  51             </div>
  52         </div>
  53
  54         <script>
  55             var arr, jstree_data, timestamps;
  56             arr = {{table|safe}};
  57             timestamps = {{Timestamps|safe}};
  58             jstree_data = {{jstree_nodes|safe}};
  59
  60             $(function() {
  61                 create_table(arr);
  62                 create_tree(jstree_data);
  63                 var objGraph = create_graph($('#cnvGraph'), timestamps);
  64
  65                 $('#data_selector').on('check_node.jstree uncheck_node.jstree', function(e, data) {
  66                     var selected_datasets = [];
  67                     for (var i = 0; i < data.selected.length; i++) {
  68                         var node = data.instance.get_node(data.selected[i]);
  69                         if (node.children.length == 0) {
  70                             var dataset = {
  71                                 label: node.id,
  72                                 data: arr[node.id],
  73                             };
  74                             selected_datasets.push(dataset);
  75                         }
  76                     }
  77                     update_graph(objGraph, selected_datasets);
  78                 });
  79             });
  80         </script>
  81     </body>
  82 </html>