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-2019 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-fluid">
  33             <div class="row">
  34                 <header>
  35                     Testcase: {{report_meta.testcase}}<br>
  36                     Task-ID: {{report_meta.task_id}}<br>
  37                 </header>
  38             </div>
  39             <div class="row">
  40                 <div class="col-md-2">
  41                     <div id="divTree"></div>
  42                 </div>
  43                 <div class="col-md-10">
  44                     <canvas id="cnvGraph"></canvas>
  45                 </div>
  46             </div>
  47             <div class="row">
  48                 <div class="col-md-12 table-responsive">
  49                     <table id="tblMetrics" class="table table-condensed table-hover"></table>
  50                 </div>
  51             </div>
  52         </div>
  53
  54         <script>
  55             // Injected metrics, timestamps, keys and hierarchy
  56             var report_data = {{report_data|safe}};
  57             var report_time = {{report_time|safe}};
  58             var report_keys = {{report_keys|safe}};
  59             var report_tree = {{report_tree|safe}};
  60             var table_data = {{table_data|safe}};
  61
  62             // Wait for DOM to be loaded
  63             $(function() {
  64                 var tblMetrics = $('#tblMetrics');
  65                 var cnvGraph = $('#cnvGraph');
  66                 var divTree = $('#divTree');
  67
  68                 create_table(tblMetrics, table_data, report_time, report_keys);
  69                 var objGraph = create_graph(cnvGraph, report_time);
  70                 create_tree(divTree, report_tree);
  71                 handle_tree(divTree, tblMetrics, objGraph, report_data, table_data, report_time);
  72             });
  73         </script>
  74     </body>
  75 </html>